`
一，事件
$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">
<!-- 點擊回調只會觸發(fā)一次 -->
<button v-on:click.once="doThis"></button>
