Vue事件传递方式有冒泡和捕获,默认是冒泡（Vue:Vue事件整理）
前言
本篇复习Vue中的事件处理 ，包含事件基本响应 、事件修饰符 、键盘事件等内容
一 、Vue基本事件
Vue中 ，设置点击 、鼠标滚动和键盘输入等相应事件 ，可以用v-on指令进行绑定
v-on指令是事件绑定指令 ，当用户需要点击 ，按下键盘 ，滚动鼠标等操作时 ，想要添加一些自己的逻辑处理时 ，就可以为特定的元素绑定一些特定的事件 。
例如：我们先在被vue实例挂载的标签div中 ，放入一个按钮为input标签 ，我们为这个input标签设置事件 ，做法如下：
在标签内部写入v-on指令 ，冒号(:)后面就是事件名 ，等号(=)后面就是需要绑定的事件方法名称； @事件名=事件方法名称 <div id="app"> <input type="button" value="事件绑定" v-on:click="方法名"> <input type="button" value="事件绑定" v-on:mouseenter="方法名"> <input type="button" value="事件绑定" v-on:dblclick="方法名"> <input type="button" value="事件绑定" @click="方法名"> <input type="button" value="事件绑定" @mouseenter="方法名"> <input type="button" value="事件绑定" @dblclick="方法名"> </div>而我们对应的方法名 ，是写在相关挂载的Vue对象的methods属性中 ，换句话说 ，事件的回调需要设置在methods中：
<body> <div id="app"> <input type="button" value="事件绑定" v-on:click="todo"> <input type="button" value="事件绑定" v-on:mouseenter="todo"> <input type="button" value="事件绑定" v-on:dblclick="todo"> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el:"#app", methods:{ todo:function() { //方法执行的逻辑 } } }) </script> </body> this对象在Vue函数中 ，this默认指向包含函数的Vue对象 ，但是如果使用箭头函数 ，则this对象表示窗体对象
在日常开发中 ，通常不建议使用箭头函数 ，因为这样会改变函数的this对象 ，而我们通常需要在方法内部通过this关键字访问定义在data中的数据
传递参数v-on传递参数主要有三种情况
无参方法； 有参方法； 既需要参数 ，也需要浏览器产生的event事件无参方法实现时 ，可以在调用方法时加入小括号 ，也可以不加小括号；
当方法有参数时 ，需要在调用方法时传入参数,当不写参数时默认为undefined 。不写小括号 ，默认将浏览器产生的event事件传给方法；
当方法即需要参数,又需要event事件时 ，必须使用$event才可以返回事件； 当使用event时或者不写时返回undefined；
当方法中不填写任何值时 ，参数与evnet事件均为undefined; 当不填写小括号时 ，默认将event事件传入方法 总结二 、事件修饰符
Vue中 ，可以通过在事件名加上一些修饰符 ，为事件增添相对应的效果
例如,我们希望在点击一个a标签时 ，能够显示一个弹窗之类的效果 ，但是不希望其进行跳转 ，我们可以使用prevent标签 ，阻止其默认行为
具体如下：
.stop 阻止事件继续传播
.prevent 阻止标签默认行为
.capture 使用事件捕获模式,即元素自身触发的事件先在此处处理 ，然后才交由内部元素进行处理
.self 只当在 event.target 是当前元素自身时触发处理函数
.once 事件将只会触发一次
.passive 告诉浏览器你不想阻止事件的默认行为例：
<!-- 阻止单击事件继续传播 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再重载页面 --> <form v-on:submit.prevent="onSubmit"></form> <!-- 修饰符可以串联 --> <a v-on:click.stop.prevent="doThat"></a> <!-- 只有修饰符 --> <form v-on:submit.prevent></form> <!-- 添加事件监听器时使用事件捕获模式 --> <!-- 即元素自身触发的事件先在此处处理 ，然后才交由内部元素进行处理 --> <div v-on:click.capture="doThis">...</div> <!-- 只当在 event.target 是当前元素自身时触发处理函数 --> <!-- 即事件不是从内部元素触发的 --> <div v-on:click.self="doThat">...</div> <!-- 点击事件将只会触发一次 --> <a v-on:click.once="doThis"></a> <!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 --> <!-- 而不会等待 `onScroll` 完成 --> <!-- 这其中包含 `event.preventDefault()` 的情况 --> <div v-on:scroll.passive="onScroll">...</div>三 、键盘事件
Vue中 ，我们可以通过为键盘按下/键盘弹起这一些行为设立相应的触发事件 ，我们可以通过键盘码/键盘别名对键盘按下设立事件 ，也可以通过键盘别名设立相关事件 ，具体如下：
keyup/keydown <input v-on:keyup.13="submit"> <input @keyup.enter="submit"> <!-- 缩写形式 -->针对不同的事件 ，我们选择keyup/keydown两种形式设置事件 ，这个结合具体的应用场景选择即可
相应键盘具体的按键别名如下 ，我们推荐通过键盘按键别名进行事件设置：
.enter
.tab
.delete (捕获“删除 ”和“退格 ”键)
.esc
.space
.up
.down
.left
.right对于一些组件 ，如Ctrl+1 2 3,Alt + 1 2 3 ，我们可以通过书写多个.的方式进行修饰
<!-- Alt + C --> <input @keyup.alt.67="clear"> <!-- Ctrl + Click --> <div @click.ctrl="doSomething">Do something</div>与按键别名不同的是 ，修饰键和 keyup 事件一起用时 ，事件引发时必须按下正常的按键 。换一种说法：如果要引发 keyup.ctrl ，必须按下 ctrl 时释放其他的按键；单单释放 ctrl 不会引发事件 。
<!-- 按下Alt + 释放C触发 --> <input @keyup.alt.67="clear"> <!-- 按下Alt + 释放任意键触发 --> <input @keyup.alt="other"> <!-- 按下Ctrl + enter时触发 --> <input @keydown.ctrl.13="submit">四 、ElementUi
对于elementUI的input ，我们需要在后面加上.native, 因为elementUI对input进行了封装 ，原生的事件不起作用 。
<input v-model="form.name" placeholder="昵称" @keyup.enter="submit"> <el-input v-model="form.name" placeholder="昵称" @keyup.enter.native="submit"></el-input>创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！