vue 中绑定点击事件主要有两种方法:内联事件和方法处理程序。内联事件直接在 html 元素上声明,而方法处理程序将事件绑定到一个 vue 方法上。此外,vue 提供了事件修饰符来修改事件处理程序的行为,例如 .stop(阻止冒泡)、.prevent(阻止默认行为)、.once(仅触发一次)和 .capture(捕获模式)。
Vue 中绑定点击事件
Vue 中绑定点击事件有两种主要方法:内联事件和方法处理程序。
内联事件
内联事件直接在 HTML 元素上声明。当该元素被点击时,事件将触发:
<button>点击我</button>
方法处理程序
方法处理程序将事件绑定到一个 Vue 方法。当元素被点击时,该方法将被调用:
<button v-on:click="myFunction()">点击我</button>
methods: {
myFunction() {
console.log('按钮被点击了!')
}
}
事件修饰符
Vue 提供了事件修饰符来修改事件处理程序的行为:
- .stop:阻止事件冒泡
- .prevent:阻止默认事件行为
- .once:仅触发一次事件
- .capture:使用捕获模式(从父元素开始而不是从目标元素开始)侦听事件
例如:
<button>停止冒泡</button>
其他注意事项
- 事件处理程序的名称与 HTML 事件监听器一致(例如,onClick、onInput)。
- Vue 自动为事件添加前缀 on。因此,@click 等效于 @on:click。
- 可以一次绑定多个事件处理程序(例如,@click="myFunction1, myFunction2")。
- Vue 支持键盘事件(例如,@keyup、@keydown)、焦点事件(例如,@focus、@blur)和其他事件类型。