Vue.js学习笔记 第五篇 事件处理
监听事件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://unpkg.com/vue"></script> </head> <body> <div id="app-1"> <button v-on:click="counter += 1">Add</button> <p>这个按钮被点击了{{ counter }}次</p> </div> <script type="text/javascript"> var vm1 = new Vue({ el: '#app-1', data: { counter: 0 } }) </script> </body> </html>
v-on指令，用于绑定事件，事件的处理是对counter变量累加
那么问题来了，实际应用中事件的处理并没有这么简单，在处理复杂的逻辑时，这种方式就不合适了，这时需要定义一个方法来处理
<div id="app-2"> <button @click="hello">Hello</button> </div> <script type="text/javascript"> var vm2 = new Vue({ el: '#app-2', data: { name: 'TanSea' }, methods: { hello: function(event) { alert('Hello, ' + this.name + '!') if (event) { alert(event.target.tagName) }; } } }) </script>
这里，我们又看到了一个陌生的东西@click，他是v-on:click的简写
到目前为止，我们已经学到了2个指令的简写方法，一个是针对属性的v-bind，一个是针对方法的v-on，可见这2个指令是Vue使用频率最高的2个指令
Vue对象实例化时，多了一个新的参数methods(方法)，用来定义事件的处理方法
事件修饰符
1、.once修饰符，事件只会被触发一次，版本：2.1.4+
<div id="app-3"> <button @click.once="count">Add</button> <p>这个按钮被点击了{{ counter }}次</p> </div> <script type="text/javascript"> var vm3 = new Vue({ el: '#app-3', data: { counter: 0 }, methods: { count: function() { this.counter += 1 } } }) </script>
2、.stop修饰符，阻止事件冒泡
先解释一下什么叫事件冒泡，当父元素和子元素同时绑定了一个事件时，子元素先触发事件，父元素再触发事件
和事件冒泡相对应的叫事件捕获，父元素先触发事件，子元素再触发事件
<div id="app-3"> <div @click="count"> 父元素<br> <p @click.stop="count">子元素</p> </div> <p>这个按钮被点击了{{ counter }}次</p> </div> <script type="text/javascript"> var vm3 = new Vue({ el: '#app-3', data: { counter: 0 }, methods: { count: function() { this.counter += 1 } } }) </script>
父元素(div)和子元素(p)同时绑定了一个事件，当点击父元素时counter加1，当点击子元素时，由于stop修饰符阻止了事件冒泡，所以counter也只加1
如果去掉stop修饰符，当点击子元素时，counter会加2(子元素和父元素先后触发事件)
按键修饰符
1、按键编码
只有在keyCode是13(“回车”键)时调用事件confirm
<div id="app-4"> 按键编码：<input @keyup.13="confirm" v-model:value="content"> </div> <script type="text/javascript"> var vm4 = new Vue({ el: '#app-4', data: { content: '' }, methods: { confirm: function() { alert(this.content) } } }) </script>
2、按键别名
我们很难记住所有的keyCode，所以Vue提供了一些常用按键别名：
.enter (“回车”键)
.tab (“TAB”键)
.delete (捕获 “删除” 和 “退格” 键)
.esc (“ESC”键)
.space (“空格”键)
.up (向上方向键)
.down (向下方向键)
.left (向左方向键)
.right (向右方向键)
当然，除了这些常用按键别名之外，Vue也提供了自定义按键别名的方法
Vue.config.keyCodes.f4 = 115 //全局自定义按键别名
只有在“回车”键或"F4"键时调用事件confirm
<div id="app-4"> 按键别名：<input @keyup.enter.f4="confirm" v-model:value="content"> </div> <script type="text/javascript"> Vue.config.keyCodes.f4 = 115 var vm4 = new Vue({ el: '#app-4', data: { content: '' }, methods: { confirm: function() { alert(this.content) } } }) </script>
3、组合按键，版本：2.1.0+
.ctrl
.alt
.shift
.meta (根据操作系统的不同而不同，Windows系统是WIN键)
组合按键不能单独触发事件，要与非组合按键一起才能触发事件
<!-- "回车"键 或 "F4"键 触发事件 --> <input @keyup.enter.f4="confirm"> <!-- "回车"键 和 "CTRL"键 触发事件 --> <input @keyup.enter.ctrl="confirm">
