Vue：入门7（事件处理 ）

事件处理

监听事件

通过v-on进行绑定事件。下面的结果是点一按钮，数字显示+1，从0开始

<div id="id1">
   <button v-on:click="counter += 1">add 1button>
   <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">clickbutton>
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)">buttonbutton>
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">dothisa>

   
   <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">
   
   <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">
   
   <button @click.ctrl="onClick">Abutton>

   
   <button @click.ctrl.exact="onCtrlClick">Abutton>

   
   <button @click.exact="onClick">Abutton>
div>
<script>
   var vm = new Vue({
      el:'#id6',
      methods:{
         onClick:function () {
            alert('id6');
         }
      }
   });
script>

鼠标按钮修饰符（2.2.0 新增）
.left
.right
.middle