事件是每个框架都绕不过去的话题，实现的方式各有千秋，而Vue中，我们使用v-on的指令来进行事件监听。
1、使用v-on监听事件。示例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue学习</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<style>
.style{
color: red
}
</style>
<body>
<div id="app">
<button v-on:click="message+=1">click</button>
<p>被点击了{{message}}次</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 0
}
})
</script>
</body>
</html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
2、正常情况下，事件应该写在函数中，而我们需要在Vue这个对象的参数中配置methods属性，里面就是相应的一些方法，这个方法通过this能访问数据。代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue学习</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<style>
.style{
color: red
}
</style>
<body>
<div id="app">
<button v-on:click="clicks">click</button>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 0
},
methods: {
clicks: function(){
alert("发生点击事件了")
}
}
})
</script>
</body>
</html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
3、关于事件修饰符。
在Vue中，我们不得不牵扯一些dom相关的东西，比如阻止默认行为，阻止事件冒泡等等，但是正常情况下，我们应该着手处理的是数据逻辑，而不是和dom相关的东西，尽管我们确实能在事件中处理。（这里应该这么理解，MVC思想中，和dom相关的处理尽可能的隔离出去，我们应该专注于数据和逻辑），这就是事件修饰符的存在意义。通过由点(.)表示的指令后缀来调用修饰符。
.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>
<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">
<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
可以用如下修饰符开启鼠标或键盘事件监听，使在按键按下时发生响应。
.ctrl
.alt
.shift
.meta
<!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>- 1
- 2
- 3
- 4