Vue.js — 事件处理
1.事件处理
1.1 监听事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
</style>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div >
<button v-on:click="counter += 1">加1</button>
<p>点击了{{counter}}次。</p>
<button @click="greet">打招呼</button>
<button @click="say('Hello')">Hello</button>
</div>
<script>
new Vue({
el: '#app',
data: {
counter: 0,
name: '张三'
},
methods: {
greet: function(event){
console.log('你好，' + this.name + '！') // 你好，张三！
if(event){
console.log(event.target.tagName) // BUTTON
}
},
say: function(message){
console.log(message);
}
}
})
</script>
</body>
</html>
我们可以使用$event访问到原始的DOM事件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
</style>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div >
<button @click="test('Hello', $event)">点击按钮</button>
</div>
<script>
new Vue({
el: '#app',
data: {
counter: 0,
name: '张三'
},
methods: {
test: function(message, event){
if(event){
console.log(event.target.textContent); // 点击按钮
console.log(message); // Hello
}
}
}
})
</script>
</body>
</html>
注意：调用method时不传参数的话，其实method可以接收到原始的DOM事件；如果调用method时需要传其他参数，则需要显式地将$event作为参数传入才能访问到原始的DOM事件。
1.2 事件修饰符
Vue.js 为v-on提供了事件修饰符。
.stop.prevent.capture.self.once.passive
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
</style>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div >
<div @click="test1">
<div @click.stop="test2"></div>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
},
methods: {
test1: function(){
alert('外面');
},
test2: function(){
alert('里面');
}
}
})
</script>
</body>
</html>
注意到@click.stop="test2"使用了事件修饰符.stop，其作用是防止事件冒泡。
提示：事件修饰符可以串联，比如<a v-on:click.stop.prevent="doThat"></a>。
1.3 按键修饰符
Vue 允许为v-on在监听键盘事件时添加按键修饰符。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
</style>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div >
<input type="text" @keyup.13="test">
<input type="text" @keyup.enter="test">
</div>
<script>
new Vue({
el: '#app',
data: {
},
methods: {
test: function(event){
console.log(event.keyCode);
console.log(event.target.value);
}
}
})
</script>
</body>
</html>
注意到@keyup.13的13是按键码，@keyup.enter的enter是按键码的别名。
keyCode是按键码，为了在必要的情况下支持旧浏览器，Vue 提供了绝大多数常用的按键码的别名。
.enter.tab.delete.esc.space.up.down.left.right
我们可以通过全局config.keyCodes对象自定义按键修饰符别名。
// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112
1.4 系统修饰键
.ctrl.alt.shift.meta
.meta在Windows系统中是Win键（⊞）。
<!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>
<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button @click.ctrl="onClick">A</button>
<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>
<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button @click.exact="onClick">A</button>
鼠标按钮修饰符：
.left.right.middle
参考：
- 上一篇 »JavaScript中事件处理机制
- 下一篇 »JavaScript手机触摸滑动事件处理