<template>
<div>
<!-- 元素的事件绑定指令 -->
<!-- 在组件method属性上写事件方法 -->
<!-- v-on:type="fn" 例: v-on:click="fn" 简写: @click="fn" -->
<button v-on:click="btnClick1">click-1</button>
<!-- 简写 -->
<button @click="btnClick2">click-2</button>
<!-- 事件的访问修饰符 , 修饰符可以连用
.stop .prevent .capture .self .once .passive(提高移动端性能 关于passive:<https://blog.csdn.net/w993263495/article/details/85009761>) -->
<div @click="propClick" class="btnBox1">
<button @click="propClick" id="btn1">propBtn1</button>
<!-- 此处btn点击一次触发两次 -->
</div>
<!-- stop:阻止事件冒泡 (事件的冒泡:由里向外)-->
<div @click="propClick" class="btnBox2">
<button @click.stop="propClick" id="btn1">propBtn2</button>
<!-- btn点击只触发一次事件 -->
</div>
<div @click="capClick(1)" class="btnBox1">
<button @click="capClick(2)" id="btn1">propBtn3</button>
<!-- 先输出 2 再输出 1 -->
</div>
<!-- capture:事件捕获,修改冒泡事件为捕获 (事件的捕获:由外向里) -->
<div @click.capture="capClick(1)" class="btnBox2">
<button @click="capClick(2)" id="btn1">propBtn4</button>
<!-- 先输出 1 再输出 2 -->
</div>
<!-- prevent:阻止事件默认行为 -->
<form @submit.prevent="submitFn">
<input type="text" name="name" />
<button>submit</button>
</form>
<!-- self:自身执行当前事件 ( e.target 是自身才触发 ) 也可以阻止事件冒泡-->
<div @click.self="selfFn" class="btnBox1">
<button @click="selfFn" id="btn1">propBtn1</button>
</div>
<!-- once:当前事件仅能触发一次 -->
<button @click.once="btnClick1">once</button>
</div>
</template>
<script>
export default {
name: 'pra-04-01',
data() {
return {
propCount: 0
};
},
methods: {
//事件中的this指向当前组件
//2.x版本this指向 VueComponent 对象
//3.0版本生成Proxy对象,但效用相同
btnClick1() {
console.log('点击方法1');
},
btnClick2() {
console.log('点击方法2');
},
propClick() {
console.log('prop');
this.propCount++;
console.log(this.propCount);
},
capClick(proNum) {
console.log(proNum);
},
submitFn() {
console.log('submit');
},
selfFn() {
console.log('自身触发');
}
}
};
</script>
<style>
.btnBox1 {
height: 100px;
width: 100px;
background-color: rgb(90, 153, 212);
}
.btnBox2 {
height: 100px;
width: 100px;
background-color: rgb(231, 110, 110);
}
</style>
2021-04-02 vue基础语法(元素的事件绑定指令/事件的访问修饰符)
最新推荐文章于 2024-05-08 10:00:07 发布
本文详细介绍了Vue.js中事件绑定的使用,包括v-on指令的长格式和短格式,以及事件的访问修饰符如.stop, .prevent, .capture, .self, .once和.passive。通过实例展示了如何阻止事件冒泡、捕获事件、阻止默认行为以及限制事件触发次数,帮助开发者更好地理解和运用Vue.js的事件系统。
摘要由CSDN通过智能技术生成