在Vue.js中,事件处理器是通过v-on指令来绑定的。v-on指令可以监听DOM事件,并在触发事件时执行指定的方法。
<button v-on:click="handleClick">点击我</button>
new Vue({
methods: {
handleClick: function () {
console.log('按钮被点击了')
}
}
})
此时,当用户点击按钮时,控制台会输出“按钮被点击了”。除了click事件,Vue.js还支持鼠标事件(如mousemove、mousedown等)和键盘事件(如keyup、keydown等)
<div v-on:mousedown="handleMouseDown">鼠标按下后拖动</div>
new Vue({
methods: {
handleMouseDown: function (event) {
console.log('鼠标按下了,x坐标:' + event.clientX + ',y坐标:' + event.clientY)
}
}
})
可以看到,除了事件处理函数中可以获取事件对象之外,还可以接收传递的参数。
<button v-on:click="handleClick('hello', $event)">点击我</button>
new Vue({
methods: {
handleClick: function (message, event) {
console.log(message) // 'hello'
console.log(event.target.tagName) // 'BUTTON'
}
}
})
最后需要注意的是,v-on指令绑定的事件处理器方法只有在Vue实例作用域内才能访问。如果想访问全局变量或在外部引用方法,可以使用JavaScript内置的addEventListener方法。
document.querySelector('button').addEventListener('click', function () {
console.log('按钮被点击了')
})
// Vue实例中先获取DOM元素再添加事件监听器
new Vue({
el: '#app',
mounted: function () {
this.$nextTick(function () {
document.querySelector('button').addEventListener('click', function () {
console.log('按钮被点击了')
})
})
}
})