Vue2中的绑定事件和事件修饰符
一:绑定事件
事件的基本使用
1.使用v-on:xxx或者@xxx (@等同于v-on) 例如绑定一个点击事件v-on:click(@click)
2.事件的回调需要配置在methods对象中,最终会在实例对象上
3.methods中的配置的函数,不要使用箭头函数(不然this指向会出现问题)
4.methods中的函数都是Vue管理的,函数中的this指向vm或者组件实力对象
5.@click = "demo"和@click ="demo($event, 实参)"
代码如下
<body>
<div class="box">
<h3>欢迎来到{{name}}</h3>
<!-- 绑定事件 v-on:click -->
<button v-on:click="showInfo1">点我提示信息</button>
<!-- 简写 @click -->
<button @click="showInfo2($event,66)">点我提示信息</button>
</div>
</body>
<script>
Vue.config.productionTip = false;
new Vue({
el: '.box',
data: {
name: '尚硅谷',
address: '北京'
},
methods: {
showInfo1() {
alert('同学你好!');
},
showInfo2(e, num) {
alert('同学你好!!' + num);
console.log(e.target);
}
}
})
</script>
绑定点击事件调用的函数都写在methods属性里面,模板代码才可以调用
!!!注意 当使用到event事件时,需要在函数参数中写$event占位
二:事件修饰符
Vue中的事件修饰符
1.prevent: 阻止默认事件
2.stop: 阻止事件冒泡
3.once: 事件只触发一次
4.capture: 使用事件的捕获模式
5.self: 只有event.target是当前操作的元素时才触发事件
6.passive: 事件的默认行为立即执行,无需等待事件回调执行完毕
!!!修饰符可以连续写 .prevent.stop //先阻止默认事件后阻止冒泡
例
<body>
<div class="box">
<a href="http://www.csdn.net" @click="link()">跳转</a>
<a href="http://www.csdn.net" @click.prevent="link()">阻止默认跳转</a>
<div @click="maopao()">
<button @click="maopao()">点击</button>
</div>
<div @click="maopao()">
<button @click.stop="maopao">阻止冒泡</button>
</div>
</div>
</body>
<script>
new Vue({
el: '.box',
data: {},
methods: {
maopao() {
alert('点击事件');
},
link() {
alert('跳转');
}
}
});
</script>