详解Vue之事件处理

 <button v-on:click="counter += 1">Add 1</button>
 <p>按钮被点击了 {{ counter }} 次.</p>

<button v-on:click="greet">Greet</button>

<script type="text/javascript">
 var app=new Vue({
  el:'#app',
  data:{
   msg:'hello world!!!',
   counter:0,
   name: 'Vue.js'
  },
  // 在 `methods` 对象中定义方法
  methods:{
   greet: function (event) {
    // `this` 在方法里指向当前 Vue 实例
    alert('Hello ' + this.name + '!')
     // `event` 是原生 DOM 事件
    if (event) {
     alert(event.target.tagName)
    }
   },

  }
 });
</script>

<button v-on:click="say('hi')">Say hi</button> 
<button v-on:click="say('what')">Say what</button>

<button v-on:click="warn('表单不能被提交.', $event)">提交</button>

say: function (message) {
 alert(message);
},
warn: function (message, event) {
 // 现在我们可以访问原生事件对象
 if (event) {
  event.preventDefault();
 }
 alert(message);
}

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis">点击666</a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit">
 <div>阻止提交</div>
</form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent>
 <div id="d">只有修饰符</div>
</form>
<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">doThis...</div>
<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">doThat...</div>

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

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成 -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>

 <!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` ,点击时不调用 -->
 <input v-on:keyup.enter="submit" type="text" value="点我777" />
 <!-- 可以直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符。-->
 <input v-on:keyup.page-down="onPageDown" type="text" value="点我888" />
 <!-- 在上述示例中，处理函数只会在 $event.key 等于 PageDown 时被调用。且光标在时才管用。 -->

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

 <!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
 <button @click.ctrl="onClick">A</button>
 <!-- 有且只有 Ctrl 被按下的时候才触发 -->
 <button @click.ctrl.exact="onCtrlClick">A</button>
 <!-- 没有任何系统修饰符被按下的时候才触发 -->
 <button @click.exact="onClick">A</button>