Vue指令之v-on的缩写和事件修饰符||.stop 和 .self 的区别
生活随笔
收集整理的這篇文章主要介紹了
Vue指令之v-on的缩写和事件修饰符||.stop 和 .self 的区别
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
事件修飾符：
-
.stop 阻止冒泡
注：不阻止冒泡的話：先冒里面的那個元素，再冒外面的元素
-
.prevent 阻止默認事件
-
.capture 添加事件偵聽器時使用事件捕獲模式
注：捕獲時間：先冒外面的元素，再冒里面的那個元素
-
.self 只當事件在該元素本身（比如不是子元素）觸發時觸發回調
-
.once 事件只觸發一次
.stop 和 .self 的區別
?
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="./lib/vue-2.4.0.js"></script><style>.inner {height: 150px;background-color: darkcyan;}.outer {padding: 40px;background-color: red;}</style> </head><body><div id="app"><div class="outer" @click="div2Handler"><div class="inner" @click="div1Handler"><input type="button" value="戳他" @click.stop="btnHandler"></div></div> <!-- .self 只會阻止自己身上冒泡行為的觸發，并不會真正阻止 冒泡的行為 --><div class="outer" @click="div2Handler"><div class="inner" @click.self="div1Handler"><input type="button" value="戳他" @click="btnHandler"></div></div> </div><script>// 創建 Vue 實例，得到 ViewModelvar vm = new Vue({el: '#app',data: {},methods: {div1Handler() {alert('這是觸發了 inner div 的點擊事件')},btnHandler() {alert('這是觸發了 btn 按鈕 的點擊事件')},linkClick() {alert('觸發了連接的點擊事件')},div2Handler() {alert('這是觸發了 outer div 的點擊事件')}}});</script> </body></html>總結
以上是生活随笔為你收集整理的Vue指令之v-on的缩写和事件修饰符||.stop 和 .self 的区别的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Vue指令之v-for——迭代数组、迭代
- 下一篇： 在Vue中使用样式——使用内联样式