- 监听事件：可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。
🌰点击按钮累加
<div id="example-1">
<button v-on:click="counter += 1">Add 1</button>
<p>{{ counter }} </p>
</div>
var example1 = new Vue({
el: '#example-1',
data: {
counter: 0
}
})
- 事件处理方法(可以传递参数)：
// `greet` 是在下面定义的方法名
<button @click="greet">Greet</button>
data() {
return {
name: 'Vue.js'
}
},
// 在 `methods` 对象中定义方法
methods: {
greet: function () {
alert('Hello ' + this.name + '!')
}
},
结果：
Hello Vue.js!
- 事件修饰符：
修饰符 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定
<!-- 阻止单击事件冒泡 -->
<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>
<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>
为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符
- stop 等同于event.stopPropagation()，阻止事件冒泡
- prevent 等同于event.preventDefault()，阻止标签的默认行为
- capture 添加事件监听器时使用事件捕获模式，从上到下
- self 只会触发自己范围内的事件，不包含子元素
- once 只会触发一次
使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击
- 按键修饰符
在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符
<!-- 只有在 `keyCode` 是 `37` 时调用 `greet()`，即键盘左键 -->
<input type="text" @keyup.37="greet">
<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">
为了在必要的情况下支持旧浏览器，Vue 提供了绝大多数常用的按键码的别名：
- enter
- tab
- delete (捕获“删除”和“退格”键)
- esc
- space
- up
- down
- left
- right
