浅谈Vue.js 中的 v-on 事件指令的使用

<div id="app">
 <h3>已点击 {{count}} 次</h3>
 <button @click="count++">点我</button>
</div>

<script>
 var app = new Vue({
  el: '#app',
  data: {
   count:0
  }
 });
</script>

<button @click="quickAdd(3)">快速增长</button>

methods: {
 quickAdd: function (i) {
  i = i || 1;//为避免参数为 null 或 undefined 值，这里设定了默认值 1
  this.count += i;
 }
}

<div id="app2">
 <a href="www.163.com" rel="external nofollow" @click="openUrl('被禁用咯',$event)">被禁用咯</a>
</div>

var app2 = new Vue({
 el: '#app2',
 data: {
  count: 0
 },
 methods: {
  openUrl: function (param, event) {
   event.preventDefault();
   console.log("param:" + param);
  }
 }
});

<div id="app3">
 <input @keyup.13="enterClick">
</div>

var app3 = new Vue({
 el: '#app3',
 data: {},
 methods: {
  enterClick: function () {
   console.log("enterClick");
  }
 }
});

<div id="app4">
 <input @keyup.alt.83="save">
</div>

var app4 = new Vue({
 el: '#app4',
 data: {},
 methods: {
  save: function () {
   console.log("save");
  }
 }
});