vue.png
一、监听事件的Vue处理
虽然我们可以直接使用原声DOM的方式去绑定事件，但是Vue为我们提供的、为标签绑定事件的方法更为方便。不仅如此，用Vue提供的指令还可以让ViewModel更加简洁，逻辑更彻底。
Vue提供了v-on指令帮助我们进行事件的绑定。基本的内联事件处理方法，见下面官方的demo:
<div id="example-1">
<!-- 为按钮绑定点击事件，执行counter += 1的任务。 -->
<button v-on:click="counter += 1">增加 1</button>
<p>这个按钮被点击了 {{ counter }} 次。</p>
</div>
<script>
var example1 = new Vue({
el: '#example-1',
data: {
counter: 0
}
})
</script>
二、事件处理方法集成到Vue对象
内联的方式绑定事件，只能处理简单的逻辑。复杂的情况，还是封装到JS中最为方便，也不容易出错。
Vue对象中可以添加methods属性，开发者可以把事件处理函数放在methods中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入门之事件绑定</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ number }}</p>
<input type="button" name="btnGetNumber" value="增加[绑定事件处理器]" v-on:click="getNumber">
<input type="button" name="btnGetNumber" value="增加[内联方法调用]" v-on:click="getNumber()">
</div>
<script>
var app = new Vue({
el: '#app',
data: {
number: 1
},
methods: {
// 事件响应方法的逻辑代码
getNumber: function (e) {
this.number += 1; // 不管是内联方法调用，还是绑定事件处理器两种方式执行事件响应方法的时候 this都是指向 app
}
}
});
</script>
</body>
</html>
三、事件修饰符
在事件处理程序中调用event.preventDefault()或是event.stopPropagation()是非常常见的需求。尽管我们可以在methods中轻松地实现这一点，但更好的方式是：methods只有纯粹的数据逻辑，而不去处理DOM事件的细节。
为了解决这个问题，Vue为v-on提供了事件修饰符。通过由点（.）表示的指令后缀来调用修饰符。
这部分的例子官方文档写的很详细，就直接用官方文档的例子吧。
- .stop
- .prevent
- .capture
- .self
- .once
<!-- 阻止单击事件冒泡 -->
<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>
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>
<!-- 点击事件最多只触发一次 -->
<a v-on:click.once="doThis"></a>
四、按键修饰符
在监听键盘事件时，我们常常需要监测常见的键值。Vue允许为v-on在监听键盘事件时，添加按键修饰符。
<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">
记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：
<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">
全部的按键别名：
- .enter
- .tab
- .delete (捕获 “删除” 和 “退格” 键)
- .esc
- .space
- .up
- .down
- .left
- .right
- .ctrl
- .alt
- .shift
- .meta
五、事件绑定的简写
Vue中属性绑定的简写是'v-bind:' === ':'，而事件的简写为'v-on:' === '@'
<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>
六、事件绑定总结
Vue为了方便大家进行开发，提供了事件的相关的封装，尤其是v-on指令非常方便地跟Vue对象中methods进行配合进行复杂的事件处理，非常方便。另外事件的事件修饰符和按键修饰符也可以为Vue事件锦上添花。
下一篇，会探讨Vue实例与生命周期，敬请期待。
网友评论