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>