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>