Vue2事件处理(v-on)

本文主要是介绍Vue2事件处理(v-on)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1.事件处理

（1）指令的语法格式

<标签 v-指令名:事件名="表达式">{{插值语法}}</标签>

（2）"表达式"位置都可以写什么？
常量、JS表达式、Vue实例所管理的XXX

1.1 事件绑定

（1）在Vue当中完成事件绑定需要的指令：v-on指令
（2）语法格式：v-on:事件名=“表达式”
（3）例如：
①v-on:click=“表达式” 表示当鼠标单机事件之后，执行表达式
②v-on:keydown=“表达式” 表示当发生键盘按下事件之后，执行表达式
（4）在Vue当中，所有事件所关联的回调函数，需要在Vue实例的配置项methods中进行定义。methods是一个对象：{}，在这个methods中可以定义多个回调函数
（5）v-on指令的简写形式：
①v-on:click 简写为@click
②v-on:keydown简写为@keydown
（6）绑定的回调函数，如果函数调用时不需要传递任何参数，小括号（）可以省略
（7）Vue在调用回调函数的时候，会自动给回调函数传递一个对象，这个对象是：当前发生的事件对象。
（8）在绑定回调函数的时候，如果已经传了自己定义的对象，可以在回调函数的参数上加上$event 占位符，Vue框架看到这个占位符之后，会自动将当前事件以对象的形式传过去。

<body><div id="app"><button @click="sayHi($event,'abc')">hi button2</button></div>   <script>const vm = new Vue({el: '#app',data: {msg:'vues'},methods:{sayHi(event,name){console.log(event,name);}}})  </script>
</body>

1.2 methods详情

（1）methods对象中的方法可以通过vm去访问；methods中的箭头函数中的this是从父级作用域当中继承的，对于当前程序来说，父级作用域是全局作用域：window

1.3 事件修饰符

（1）.stop：停止事件冒泡，等同于event.stopProagation()

<body><div id="app"><!-- 停止事件冒泡 --><div @click="san"><div @click="er">// 如果不加会出现1 2 3，加了就只显示1<button @click.stop="yi">事件冒泡</button></div></div></div><script>const vm = new Vue({el: '#app',data: {msg:'事件修饰符'},methods: {yi(){alert(1)},er(){alert(2)},san(){alert(3)}}})</script>
</body>

（2）.prevent：等同于event.preventDefault() 阻止事件的默认行为

<body><div id="app"><h1>{{msg}}</h1>// 使用 .prevent 后就不会跳转到百度页面了<a href="https://www.baidu.com" @click.prevent="yi">百度</a></div><script>const vm = new Vue({el: '#app',data: {msg:'事件修饰符'},methods: {yi(){alert('去百度')}}})</script>
</body>

（3）.capture：添加事件监听器时使用事件捕获模式
添加事件监听器包括两种不同的方式：
①从内到外添加（事件冒泡模式）：下面例子打印 1、2、3
②从外到内添加（事件捕获模式）：下面例子打印 3、2、1

<body><div id="app"><!-- 添加事件监听器时使用事件捕获模式 --><div @click.capture="san"><div @click.capture="er"><button @click.capture="yi">添加事件监听器时使用事件捕获模式</button></div></div></div><script>const vm = new Vue({el: '#app',methods: {yi(){alert(1)},er(){alert(2)},san(){alert(3)}}})</script>
</body>

（4）.self：这个事件如果是“我自己身上的元素”发生的事件，不是别人传递过来的，则执行相应的程序

<body><div id="app"><div @click="san">// 此时2就不会显示出来<div @click.self="er"><button @click="yi">使用.self</button></div></div></div><script>const vm = new Vue({el: '#app',methods: {yi(){alert(1)},er(){alert(2)},san(){alert(3)}}})</script>
</body>

（5）.once：事件只发生一次

1.4 按键修饰符

（1）.enter
（2）.tab（必须配合keydown事件使用）
（3）.delete (捕获“删除”和“退格”键)
（4）.esc
（5）.space
（6）.up
（7）.down
（8）.left
（9）.right

<body><div id="app"><!-- 回车后触发方法 --><input type="text" @keyup.enter="getInfo"><br> </div><script>const vm = new Vue({el: '#app',methods: {getInfo(event) {console.log(event.target.value)}}})</script>
</body>