浅谈Vue.js中的v-on(事件处理)

<div class="box">
  {{msg}}
  <input type="button" value="按钮" v-on:click="msg+=1"/>
</div>

var vm = new Vue({
  el:".box",
  data:{
    msg:1
  },
})

<div class="box">
  {{msg}}
  <input type="button" value="按钮" v-on:click="jia"/>
</div>

var vm = new Vue({
  el:".box",
  data:{
    msg:1
  },
  // 在 `methods` 对象中定义方法
  methods:{
    jia:function(event){
      console.log(event)
    }
  }
})

MouseEvent {isTrusted: true, screenX: 18, screenY: 107, clientX: 18, clientY: 17, …}

<div class="box">
  {{msg}}
  <input type="button" value="按钮" v-on:click="jia('my day')"/>
</div>

var vm = new Vue({
  el:".box",
  data:{
    msg:1
  },
  methods:{
    jia:function(x){
      console.log(x)
    }
  }
})

<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身（比如不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>

<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

<div id="ar5">
  <input type="button" value="a" v-on:keydown="a">
</div>

var vm = new Vue({
  el:"#ar5",
  data:{
    msg:1
  },
  methods:{
    a:function(e){
      console.log(e.keyCode)
    }
  }
})

// 可以使用 v-on:keyup.f1
Vue.config.keyCodes.f1 = 112

<!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>