1 v-on ¶
Vue中，绑定点击事件用 v-on:实现，例如绑定鼠标点击事件用 v-on:click="fun"实现，绑定键盘回车键按下事件用 v-on:keydown.enter="fun"实现，其中”fun”是点击事后后的回调方法。 v-on:可以简写为”@”,例如 @click="fun"、 @keyup.enter="fun"。
2 鼠标事件 ¶
绑定鼠标点击事件通过 v-on:click实现，例如给按钮添加一个点击事件，点击后执行名为”fun1″的方法：
<div id="app"> <button v-on:click="fun1">按钮button> div> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 const vm = new Vue({ el:'#app', methods:{ fun1(event){ console.log(event) alert('按钮被点击') }, } }) script>
在上述示例中，我们给button绑定了fun1作为回调方法，那么，fun1方法接受了一个参数event，这个参数就是点击事件本身，通过这个参数可以获取一些环境变量，例如按钮信息等。这时候因为点击事件回调时除默认的event外并没有传递其他参数，所以，可以以 v-on:click="fun"的方式绑定事件。但是，如果还有其他参数情况下，就不能这样书写。例如，我们希望回调时，传递两个个额外的数值给fun1，那么，可以做么做：
<div id="app"> <button @click="fun1(1, $event, 66)">按钮button> div> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 num = 123 const vm = new Vue({ el:'#app', methods:{ // 此处定义回调函数 fun1(a, event, b){ console.log(a) console.log(event) console.log(b) }, } }) script>
为了区别于其他参数，event前面必须有个”\$”符号，”$event”的位置可以随意,可以使第一个参数位置，也可以是第二个参数位置。回调方法调用处的参数顺序、个数必须与定义处一致。
另外需要注意，在事件回调方法内部，如果使用this关键字，this指代的是Vue实例对象。
3 事件修饰符 ¶
3.1 阻止默认事件：prevent ¶
在上面例子中，我们将鼠标点击事件绑定在button上，但在一些应用场景中我们需要对其他类型标签绑定鼠标事件，例如a标签，这时候，由于标签本身存在默认事件，点击执行回调后，标签本身的默认事件也会发生，为了阻止默认事件发生，我们可以使用”prevent”对默认事件进行阻止。具体操作是在绑定点击事件时，将”@click”改为”@click.prevent”，如下所示：
<div id="app"> <a href="https://home.cnblogs.com/u/chenhuabin/" @click.prevent="fun1">我是一个a标签a> div> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 const vm = new Vue({ el:'#app', methods:{ // 此处定义回调函数 fun1(){ console.log('Hello Vue! ') }, } }) script>
通过这一方法，点击a标签后，页面并不会跳转，从控制台输出也可以看出，回调函数成功执行。
3.2 阻止事件冒泡：stop ¶
在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。例如，下面的代码，点击按钮后，会触发两次弹窗：
<div id="app"> <div @click="fun1"> <button @click="fun1">按钮button> div> div> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 const vm = new Vue({ el:'#app', methods:{ // 此处定义回调函数 fun1(){ alert('Hello Vue! ') }, } }) script>
在Vue中，阻止事件冒泡方法很简单，只需要在绑定事件时，将”@click”改为”@clilck.stop”即可，上面示例改为：
<div id="app"> <div @click="fun1"> <button @click.stop="fun1">按钮button> div> div>
多个事件修饰符可以连续使用，例如同时使用prevent和stop：
<div @click.prevent="fun1"> <a href="https://www.baidu.com" @click.prevent.stop="fun1">按钮a> div>
3.3 事件只允许触发一次：once ¶
有时候，我们只需要事件被触发一次，即触发一次后，再次触发，将不会执行回调方法。这种功能可以通过”once”实现。
<div id="app"> <button @click.once="fun1">按钮button> div> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 const vm = new Vue({ el:'#app', methods:{ // 此处定义回调函数 fun1(){ alert('Hello Vue! ') }, } }) script>
在上述代码示例中，只有第一次点击按钮会出现弹窗，后续点击不再有弹窗出现。
4 键盘事件 ¶
键盘事件是指我们对键盘进行操作时触发的事件，在Vue中，使用”keydown”和”keyup”绑定，分别对应按下键盘和松开键盘，一般使用”keyup”居多（tab键需使用keydown，否则将由于按下tab后焦点转移导致keyup不触发）。在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：如下所示，我们定义一个输入框，完成输入后，按下”Enter”键，在控制台输出输入框内容：
<div id="app"> <input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo"> div> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 new Vue({ el:'#app', methods: { showInfo(e){ console.log(e.target.value) } }, }) script>
上述示例中，我们通过”.enter”绑定回车按键事件，除回车外，Vue中对绝大多数常见按键定义了此类别名，方便调用：
- enter
- tab
- delete (捕获”删除”和”退格”键)
- esc
- space
- up
- down
- left
- right
以下是个按键使用是需要注意，因为这4个按键同安作为系统修饰键配合其他按键进行组合使用，所以多事情况下建议不要使用keydown，而是使用keyup：
- ctrl
- alt
- shift
- meta
例如绑定”ctrl+y”事件时，可以这么写：
<div id="app"> <input type="text" placeholder="按下回车提示输入" @keyup.ctrl.y="showInfo"> div>
Original: https://www.cnblogs.com/chenhuabin/p/15927202.html
Author: 奥辰
Title: Vue学习笔记（四）：事件处理
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/602809/
转载文章受原作者版权保护。转载请注明原作者出处！