1. 首頁 > 生活百科 > >

9_Vue事件修飾符

生活百科9_Vue事件修飾符

概述首先需要理解下什么是事件修飾符
常用事件修飾符案例1_阻止默認行為發生

  • 我這里有一個a標簽
  • 這個標簽呢我會給它配置一個點擊事件
  • 點擊事件輸出一句話 ， 那么效果是這樣的
代碼
<body><!-- 定義一個容器 --><div class="app"><!-- 默認事件發生（常用） --><a @click="toBaidu"></a></div></body><script>var vm = new Vue({el: '.app',data: {name: 'wavesbright'},methods: {// 默認事件行為toBaidu(){alert("即將前往百度.......");}},});</script>測試
9_Vue事件修飾符

文章插圖
分析/需求
  • 分析
    • 在案例當中我們看到，頁面是先出現了 提示框
    • 然后跳轉到了 百度 的頁面
    • 跳轉到百度頁面，這是a標簽的默認行為，也就是 默認觸發的事件
  • 需求
    • 我只想讓他出現提示框 ， 但是不跳轉
    • 需求很簡單 ， 我換個標簽不就行了，誒，我偏不，我就要讓a標簽來完成這個事情
    • 那怎么辦？
    • 解決也很簡單，讓a標簽不跳轉就行了，怎么個不跳轉法？
      • 使用 herf =“javascript:iod(0)”這種 偽協議
      • 使用#代替
      • 在onclick當中返回false
    • 我們要做的，就是阻止這個默認行為的發生
    • 那么就需要使用到事件修飾符
解決方法在原生JS中，利用事件源對象的 prevenDefault();來阻止
9_Vue事件修飾符

文章插圖
我們來測試下
9_Vue事件修飾符

文章插圖
在vue當中我們可以使用如下的語法來代表 阻斷默認事件發生
事件修飾符 == .prevent
9_Vue事件修飾符

文章插圖
測試效果
9_Vue事件修飾符

文章插圖
我使用了 .prevent來修飾這個事件 ， 那么造成的結果就是 ， 這個事件的默認行為被我阻斷了
案例2_阻止冒泡準備工作簡單設計一個 div 加一個 button按鈕，為這倆設置與案例1相同的點擊事件
9_Vue事件修飾符

文章插圖
<!-- 2、事件冒泡 --><div class="box" @click="toBaidu"><button @click="toBaidu">事件冒泡</button></div>簡單樣式設計
9_Vue事件修飾符

文章插圖
<style>.app{height: 100vh;width: 100%;}/* 給這個盒子設置一個寬高 */.box{margin-top: 20px;height: 100px;border: 1px solid black;display: flex;align-items: center;}</style>冒泡測試
9_Vue事件修飾符

文章插圖
  • 可以看到 ， 我們在點擊這個按鈕的時候，div的事件也被調用了
  • 這就是一個典型的事件冒泡 ， 那么我們應該如何解決？
需求分析點擊button按鈕的時候不要觸發div的點擊事件
解決方式通過事件源對象的.stopPropagation()可以阻止
9_Vue事件修飾符

文章插圖
測試結果
9_Vue事件修飾符

文章插圖
注意：如果子元素和父元素使用的是不同的事件，那么在子元素的事件當中添加即可
事件修飾符 == .stop
9_Vue事件修飾符

文章插圖
測試結果
9_Vue事件修飾符

文章插圖
案例3_只觸發一次的事件準備工作
9_Vue事件修飾符

文章插圖
這有個按鈕，簡單設計下樣式 ， 事件還是剛剛的點擊事件
測試結果
9_Vue事件修飾符

文章插圖
需求我只想讓他觸發一次 ， 點了以后可以繼續點 ， 但是事件不會繼續觸發了
事件修飾符 == .once

推薦閱讀