Vue：入門7（事件處理 ）

事件處理

監聽事件

通過v-on進行綁定事件。下面的結果是點一按鈕，數字顯示+1，從0開始

<div id="id1">
   <button v-on:click="counter += 1">add 1</button>
   <p>times:{{counter}}</p>
</div>
<script>
   var vm = new Vue({
      el:'#id1',
      data:{
         counter:0
      }
   });
</script>

同時方法的方式實現事件

<div id="id2">
   <button v-on:click="click_fun">click</button>
</div>
<script>
   var vm = new Vue({
      el:'#id2',
      methods:{
         click_fun:function (event) {
            // 這裏進行處理邏輯
            console.log(event);
         }
      }
   });
</script>

傳參的方式,這裏注意如果你想使用event，可以通過$event傳入

<div id="id3">
   <button v-on:click="fun('params 1',$event)">button</button>
</div>
<script>
   var vm = new Vue({
      el:'#id3',
      methods:{
         fun:function (param1 , eve) {
            console.log(param1,eve);
         }
      }
   });
</script>

事件修飾符

修飾符以’.'開頭： .stop .prevent .capture .self .once .passive

<div id="id4">
   <!-- 阻止單擊事件繼續傳播 -->
   <a v-on:click.stop="dothis">dothis</a>

   <!-- 修飾符可以串聯 -->
   <a v-on:click.stop.prevent="doThat"></a>
   <!-- 只有修飾符 -->
   <form v-on:submit.prevent></form>

   <!-- 點擊事件將只會觸發一次 -->
   <a v-on:click.once="doThis"></a>
</div>

按鍵修飾符

監聽鍵盤事件

<div id="id5">
   <!-- 只有在 `key` 是 `Enter` 時調用 `vm.submit()`
.enter .tab .delete (捕獲“刪除”和“退格”鍵)
.esc .space .up
.down .left .right
下面這些是需要多個按鈕一起用時纔會觸發.ctrl .alt .shift .meta
如果多個按鈕同時：@keyup.shift.enter
-->
   <input v-on:keyup.shift.enter="alert_fun">
</div>
<script>
   var vm = new Vue({
      el:'#id5',
      methods:{
         alert_fun:function () {
            alert('enter');
         }
      }
   });
</script>

.exact 修飾符允許你控制由精確的系統修飾符組合觸發的事件。

<div id="id6">
   <!-- 即使 Alt 或 Shift 被一同按下時也會觸發 -->
   <button @click.ctrl="onClick">A</button>

   <!-- 有且只有 Ctrl 被按下的時候才觸發 -->
   <button @click.ctrl.exact="onCtrlClick">A</button>

   <!-- 沒有任何系統修飾符被按下的時候才觸發 -->
   <button @click.exact="onClick">A</button>
</div>
<script>
   var vm = new Vue({
      el:'#id6',
      methods:{
         onClick:function () {
            alert('id6');
         }
      }
   });
</script>

鼠標按鈕修飾符（2.2.0 新增）
.left
.right
.middle