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