使用 v-on 指令监听 DOM 事件。
一、事件触发时执行js语句
<div id="app1">
<button @click="counter += 1">点击我</button>
<p>按钮被点击次数为:{{counter}}</p>
</div>
----------
//事件触发时执行js语句
var app1 = new Vue({
el: '#app1',
data: {
counter:0
}
})
二、定义在methods对象中的事件处理器
v-on 可以接收要调用的方法名。
<div id="app2">
<button @click="greet">Greet</button>
</div>
----------
// 在methods对象中定义事件监视器
var app2 = new Vue({
el: '#app2',
data: {
name: 'Vue.js'
},
methods:{
greet: function(event){
alert('Hello' + this.name + '!')
// `event` 是原始 DOM 事件对象
if (event) {
alert(event.target.tagName)
}
}
}
})
// 直接调用methods方法
app2.greet()
三、定义在行间的事件处理器
<div id="app3">
<button @click="say('hi')">Say hi</button>
<button @click="say('what')">Say what</button>
</div>
----------
// 定义在行间内的事件处理器
var app3 = new Vue({
el: '#app3',
methods: {
say: function(msg){
alert(msg)
}
}
})
当需要访问原始DOM事件对象的时候,可以使用特殊的$event变量将它传递给一个方法。
<div id="app4">
<button @click="warn('Form cannot be submitted yet.', $event)">
submit
</button>
</div>
----------
// 传递DOM事件对象
var app4 = new Vue({
el: '#app4',
methods:{
warn: function(msg,event){
// 现在可以访问原始事件对象
if (event) event.preventDefault()
alert(msg)
}
}
})
四、事件修饰符
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。
尽管我们可以在 methods 中轻松实现这点,但更好的方式是:methods 只有纯粹的数据逻辑,而不是去处理 DOM 事件细节。
为了解决这个问题, Vue.js 为 v-on 提供了事件修饰符。
- .stop 停止事件冒泡
- .prevent 不再载入页面
- .capture 事件捕获
- .self
- .once
- .passive
<!-- 停止点击事件冒泡 -->
<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 是元素自身时,才触发处理函数。 -->
<!-- 也就是说,event.target 是子元素时,不触发处理函数 -->
<!-- 使用 v-on:click.prevent.self 会阻止所有点击 -->
<!-- 使用 v-on:click.self.prevent 只阻止元素自身的点击 -->
<div v-on:click.self="doThat">...</div>
<!-- .once 修饰符:不仅能处理DOM事件还可以用于处理组件事件 -->
<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>
<!-- 滚动事件的默认行为(滚动)将立即发生, -->
<!-- 而不是等待 `onScroll` 完成后才发生, -->
<!-- 以防在滚动事件的处理程序中含有 `event.preventDefault()` 调用 -->
<!-- .passive 会向浏览器传达你并不希望阻止事件的默认行为 -->
<!-- .passive 和 .prevent 放在一起使用 -->
<div v-on:scroll.passive="onScroll">...</div>
五、按键修饰符
在监听键盘事件时经常需要查找常用按键对应的 code 值。
Vue 可以在 v-on 上添加按键修饰符,用于监听按键事件。
<!-- 只在 `keyCode` 是 13 时,调用 `vm.submit()` -->
<input v-on:keyup.13="submit">
常用按键修饰符别名
记住所有 keyCode 是非常麻烦的事,所以 Vue 提供一些最常用按键的别名:
- .enter
- .tab
- .delete (捕获“删除”和“退格”按键)
- .esc
- .space
- .up
- .down
- .left
- .right
<!-- 和上面的示例相同 -->
<input v-on:keyup.enter="submit">
自定义按键修饰符别名
通过全局 config.keyCodes 对象设置:
// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112
自动对应按键修饰符
直接使用 KeyboardEvent.key 暴露出来的所有合法按键名作为修饰符,但是要将它们转换为串联式命名。
<input @keyup.page-down="onPageDown">
六、系统辅助按键
触发鼠标或键盘事件监听器
仅在以下修饰符对应的按键被按下时,才会触发鼠标或键盘事件监听器
- .ctrl
- .alt
- .shift
- .meta
<!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">做一些操作</div>
在keyup事件触发时,辅助按键必须是按下状态。也就是说,keyup.ctrl 事件需要同时按下 ctrl 键和释放一个按键。
.exact 修饰符
.exact 修饰符可以控制触发事件所需的系统辅助按键的准确组合。
<!-- 如果 Alt 键或 Shift 键与 Ctrl 键同时按下,也会触发事件 -->
<button @click.ctrl="onClick">A</button>
<!-- 只在 Ctrl 按键按下,其他按键未按下时,触发事件 -->
<button @click.ctrl.exact="onCtrlClick">A</button>
<!-- 只在没有系统辅助按键按下时,触发事件 -->
<button @click.exact="onClick">A</button>
鼠标按键修饰符
- .left
- .right
- .middle
这些修饰符会限制处理函数,仅响应特定的鼠标按键触发的事件。
七、为什么监听器会放在html中?
因为所有 Vue 事件处理器函数和表达式都严格绑定在处理当前视图(view)的 ViewModel 上,不会造成任何维护上的困难。
通过浏览 HTML 模板,就能很方便地找到在 JavaScript 代码里对应的处理函数。
由于无须在 JavaScript 里手动绑定事件,ViewModel 代码是非常纯粹的逻辑,并且和 DOM 完全解耦。
当一个 ViewModel 被销毁时,所有的事件监听器都会被自动删除。