vue之監聽事件

居老師的狗子發表於2019-03-12
Vue事件

一、v-on

可以用 v-on 指令監聽 DOM 事件，並在觸發時執行一些 JavaScript 程式碼。

簡寫形式  用@代替 v-on：

<button v-on:click="counter += 1">Add 1</button>
<button @click="counter += 1">Add 1</button>
<button v-on:click="greet">Greet</button>
//此處需注意，greet()加括號與否均可，如果要傳參，當然需要括號。但如果直接在雙花括號內獲取函式，必須含有括號，即{{ greet() }}
<button @click="greet">Greet</button>

點選事件 v-on:click、雙擊事件v-on:dbclick、滑鼠事件v-on:mousemove

二、事件修飾符

Vue.js 為 v-on 提供了事件修飾符。Vue.js 為 v-on 提供了事件修飾符來處理 DOM 事件細節，如：event.preventDefault() 或 event.stopPropagation()。修飾符是由點開頭的指令字尾來表示的。使用修飾符時，順序很重要；相應的程式碼會以同樣的順序產生。因此，用 v-on:click.prevent.self 會阻止所有的點選，而 v-on:click.self.prevent 只會阻止對元素自身的點選。

  • .stop  
  • .prevent
  • .capture
  • .self
  • .once
  • .passive

1、.stop阻止冒泡事件

今天在<li>里加了一個button，結果點選button，觸發了li上的點選事件。使用.stop阻止事件冒泡

       <ul>
        <li v-for="(task,index) in list"  @click="add(task)" :class="{'complated':task.finished}">
          {{task.id}}-{{task.name}}
          <button @click.stop="deltask(task)">del</button>
        </li>
      </ul>

 

相關文章