iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 5
0
自我挑戰組

vue.js 30天學習軌跡系列 第 5

Day5 vue.js - v-on 修飾符

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

事件修飾符

這裡有範例/images/emoticon/emoticon37.gif

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

一天佑平安的過去了.../images/emoticon/emoticon10.gif


上一篇
Day4 vue.js - 初探v-on指令
下一篇
Day6 vue.js - 動態切換className 與 style
系列文
vue.js 30天學習軌跡30

1 則留言

0
chunwen
iT邦新手 4 級 ‧ 2019-09-22 13:07:48

capture 修飾符
功能: 即是給元素添加一個監聽器,當元素發生冒泡時,先觸髮帶有該修飾符的元素

有錯字觸發

iT邦新手 5 級 ‧ 2019-09-22 17:48:22 檢舉

收到!! /images/emoticon/emoticon41.gif

我要留言

立即登入留言