`
一，事件
$event:vue的内置对象
原生js阻止事件冒泡
<body>
<div id="myApp" @click="show2()">
<div @click="show1()">
<button @click="show($event)">点我</button>
</div>
</div>
</body>
<script>
window.onload=function(){
let vm=new Vue({
el:'#myApp',
data:{
},
methods:{
show(e){
e.stopPropagation();//原生阻止冒泡事件
console.log("111")
},
show1(){
console.log("222")
},
show2(){
console.log("333")
},
}
});
}
</script>
vue阻止事件冒泡
<body>
<div id="myApp" @click="show2()">
<div @click="show1()">
<button @click.stop="show">vue点我</button>
</div>
</div>
</body>
<script>
window.onload=function(){
let vm=new Vue({
el:'#myApp',
data:{
},
methods:{
show(){
console.log("111")
},
show1(){
console.log("222")
},
show2(){
console.log("333")
},
}
});
}
</script>
总结：
1.js阻止事件冒泡，获取点击对象, e.stopPropagation();
2.vue阻止事件冒泡@click.stop="show"，
3.vue有许多的内置属性
v-on的修饰符
<!-- 方法处理器 -->
<button v-on:click="doThis"></button>
<!-- 对象语法 (2.4.0+) -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>
<!-- 内联语句 -->
<button v-on:click="doThat('hello', $event)"></button>
<!-- 缩写 -->
<button @click="doThis"></button>
<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>
<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>
<!-- 阻止默认行为，没有表达式 -->
<form @submit.prevent></form>
<!-- 串联修饰符 -->
<button @click.stop.prevent="doThis"></button>
<!-- 键修饰符，键别名 -->
<input @keyup.enter="onEnter">
<!-- 键修饰符，键代码 -->
<input @keyup.13="onEnter">
<!-- 点击回调只会触发一次 -->
<button v-on:click.once="doThis"></button>
