我要评论只绑定一个点击事件
<button @click="greet">单个点击事件</button>
methods:{
greet(){
console.log('单个点击事件')
}
}一个标签内绑定多个点击事件方法
<button @click="one($event), two($event)">多个点击事件</button>
methods:{
one(e){
console.log(e)
},
two(e){
console.log(e)
}
}事件修饰符
.stop 阻止单击事件继续冒泡（适用于出现嵌套点击事件时）
<div @click="box('我是大box')" style="width:500px; background:red">
<button @click.stop="dothis('我是内嵌点击事件按')">单个点击事件</button>
</div> methods:{
dothis(val){
console.log(val)
},
box(val){
console.log(val)
}
}.prevent 阻止默认事件
<form action="">
<!-- 默认提交事件 -->
<!-- <input type="submit" value="提交"> -->
<!-- 阻止默认事件 -->
<input type="submit" value="提交" @click.prevent="submitclick('prevent阻止默认事件')">
</form>methods:{
submitclick(val){
console.log(val)
}
}.capture 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理
<form action="">
<input type="submit" value="提交" @click.capture="submitclick('capture先在此处理')">
</form>methods:{
submitclick(val){
console.log(val)
}
}.once点击事件将只会触发一次
<button @click.once="ononce('点击事件将只会触发一次')">点击事件将只会触发一次</button>methods:{
ononce(val){
console.log(val)
}
}.passive用在移动端的scroll事件，来提高浏览器响应速度，提升用户体验
<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发， --> <div @scroll.passive="onscroll">...</div>
修饰符串联使用（按循序执行）
// 按循序执行先执行阻止冒泡事件在执行阻止默认事件 <a @click.stop.prevent="dothat"></a>
tip
不要把 .passive 和 .prevent（阻止默认事件） 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。
请记住，.passive 会告诉浏览器你不想阻止事件的默认行为。
按键修饰符
vue 为最常用的键提供了别名：
.enter.tab.delete(捕获“删除”和“退格”键).esc.space.up.down.left.right
<!-- 只有在 `key` 是 `enter` 时调用 `vm.submit()` 按enter键执行 --> <input @keyup.enter="submit" /> <!-- 按delete 键执行 --> <input @keyup.delete="submit" />
系统修饰键
.ctrl.alt.shift.meta
<!-- alt + enter 时触发--> <input @keyup.alt.enter="clear" /> <!-- ctrl + click 按住加点击时触发--> <div @click.ctrl="dosomething">do something</div>
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持代码网。
发表评论