提示:
本文为VUE栏目:VUE学习:vue基础05————VUE语法对内容处理:事件绑定处理和事件修饰符
VUE学习:vue基础05————VUE语法对内容处理:事件绑定处理和事件修饰符
前言
本文继续学习VUE语法对内容的处理。
提示:以下是本篇文章正文内容,下面案例可供参考
VUE
VUE语法对内容处理
事件绑定处理
v-on指令
v-on用来绑定事件,冒号后面跟事件名
@符号跟事件名是v-on的缩写形式
<body>
<div id="app">
<button type="button" v-on:click="getCount">{{count}}</button>
<button type="button" @click="getCount2">{{count}}</button>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
count:0
},
methods:{
getCount(){
this.count=++this.count;
},
getCount2(){
this.count=--this.count;
}
}
});
</script>
事件修饰符
.stop
.stop修饰符表示事件的冒泡到此为止(阻止事件冒泡)
<body>
<div id="app">
<!---->
<div style="height: 200px;width: 200px;background-color: pink" @click="divClick">
<p style="height: 100px;width: 100px;background-color: yellow;" @click.stop="pClick">
<button type="button" @click="btnClick">阻止冒泡</button>
</p>
</div>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
},
methods:{
divClick(){
console.log("您点击的是div");
},
btnClick(){
console.log("您点击的是btn");
},
pClick(){
console.log("您点击的是p");
}
}
});
</script>
.capture
.capture修饰符表示事件捕获
<body>
<div id="app">
<div style="height: 200px;width: 200px;background-color: pink" @click.capture="divClick">
<p style="height: 100px;width: 100px;background-color: yellow;" @click.capture="pClick">
<button type="button" @click.capture="btnClick">阻止冒泡</button>
</p>
</div>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
},
methods:{
divClick(){
console.log("您点击的是div");
},
btnClick(){
console.log("您点击的是btn");
},
pClick(){
console.log("您点击的是p");
}
}
});
</script>
.prevent
.prevent修饰符阻止默认行为
.self修饰符表示该函数只在自身触发
<body>
<div id="app">
<a href="https://www.baidu.com" target="_blank" @click.prevent="aClick">有问题,先百度</a>
<div style="height: 200px;width: 200px;background-color: pink" @click="divClick">
<p style="height: 100px;width: 100px;background-color: yellow;" @click.self="pClick">
<button type="button" @click="btnClick">阻止冒泡</button>
</p>
</div>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
},
methods:{
aClick(){
console.log("您点击了a标签");
},
divClick(){
console.log("您点击的是div");
},
btnClick(){
console.log("您点击的是btn");
},
pClick(){
console.log("您点击的是p");
}
}
});
</script>
.once
.once修饰符表示该事件只生效一次
<body>
<div id="app">
<!--事件修饰符可以组合使用-->
<a href="https://www.baidu.com" target="_blank" @click.prevent.once="aClick">有问题,先百度</a>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
},
methods:{
aClick(){
console.log("您点击了a标签");
},
divClick(){
console.log("您点击的是div");
},
btnClick(){
console.log("您点击的是btn");
},
pClick(){
console.log("您点击的是p");
}
}
});
</script>