v-on是用來綁定事件監聽器，用在普通元素上時，只能監聽原生 DOM 事件。用在自定義元素組件上時，也可以監聽子組件觸發的自定義事件。

事件修飾符

這裡有範例

stop 修飾符

功能 : 阻止點擊事件繼續向上傳播

<div class="one" @click="out">
    <button @click.stop="inside">內層</button>
</div>
  
var vm = new Vue({
  el: '#app',
  data: { 
    
     },
  methods:{
    //stop 修飾符
    out(){
      console.log("外層");
    },
    inside(){
      console.log("內層");
    },
  },
})

結果:

prevent 修飾符

功能 : 阻止元素本身預設事件發生

  <a href="https://cn.vuejs.org/v2/api/#v-on" @click.prevent="govueAPi">我是a連結</a>
  
  var vm = new Vue({
  el: '#app',
  data: { 
    
     },
  methods:{
      govueAPi(){
         console.log('去不了vue.js的官網')
        },
    },
})

結果:

capture 修飾符

功能: 即是給元素添加一個監聽器，當元素發生冒泡時，先觸發帶有該修飾符的元素。
若有多個該修飾符，則由外而內觸發。

<div class="one" @click="captureOne">第一層
    <div class="two" @click.capture="captureTwo">二層
      <div class="three" @click.capture="captureThree">三層
        <button  @click="captureFour">四層</button>
      </div>  
    </div>
</div>
var vm = new Vue({
  el: '#app',
  data: { 
    
     },
  methods:{
    captureOne(){
      console.log('第一層(最底層)')
    },
    captureTwo(){
      console.log('第二層')
    },
    captureThree(){
      console.log('第三層')
    },
    captureFour(){
      console.log('第四層')
    },
    },
})

結果:

self 修飾符

功能 : 只會觸發自己範圍內的事件，不包含子元素

<div class="one"@click="selfOne">第一層
    <div class="two" @click.self="selfTwo">二層
      <div class="three" @click="selfThree">三層
        <button  @click="selfFour">四層</button>
      </div>  
    </div>
</div> 
var vm = new Vue({
  el: '#app',
  data: { 
    
     },
 methods:{
        selfOne(){
          console.log('第一層(最底層)')
        },
        selfTwo(){
          console.log('第二層')
        },
        selfThree(){
          console.log('第三層')
        },
        selfFour(){
          console.log('第四層')
        },
    },
})

結果:

once 修飾符

功能: 元素自身事件只能使用一次，第二次點擊元素時候並不觸發事件，但是不阻止事件冒泡

  <div class="one"@click="onceOne">第一層
    <div class="two" @click="onceTwo">二層
      <div class="three" @click="onceThree">三層
        <button  @click.once="onceFour">四層</button>
      </div>  
    </div>
  </div> 
 var vm = new Vue({
  el: '#app',
  data: { 
    
     },
 methods:{
    onceOne(){
      console.log('第一層(最底層)')
    },
    onceTwo(){
      console.log('第二層')
    },
    onceThree(){
      console.log('第三層')
    },
    onceFour(){
      console.log('第四層')
    },
    },
})

結果:

按鍵修飾符

• enter
• tab
• delete：含 delete 和 backspace 鍵。
• esc
• space
• up
• down
• left
• right
• ctrl
• alt
• shift
• meta

一天佑平安的過去了...