VUE(事件处理 v-on)

我觉得对原生js有了一定的了解，在vue中对于v-on的绑定还是比较容易理解。
首先v-on的事件监听，方法处理，内连处理器，我觉得就是DOM的点击事件，只是书写的方法上有一些差别。
事件监听：
官网例子：

<div id="example-1">
  <button v-on:click="counter += 1">增加 1</button>
  <p>这个按钮被点击了 {{ counter }} 次。</p>
</div>

var example1 = new Vue({
  el: '#example-1',
  data: {
    counter: 0
  }
})

事件处理：
就是点击事件的方法名，greet=func(){}写在methods里

<div id="example-2">
  <button v-on:click="greet">Greet</button>
</div>

var example2 = new Vue({
  el: '#example-2',
  data: {
    name: 'Vue.js'
  },
  // 在 `methods` 对象中定义方法
  methods: {
    greet: function (event) {
      alert('Hello ' + this.name + '!')
    }
  }
})

内连处理器：
传参数。。。

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

new Vue({
  el: '#example-3',
  methods: {
    say: function (message) {
      alert(message)
    }
  }
})

事件修饰符：
在编程过程中，我们不可避免的会用到一些取消默认事件，取消冒泡事件等，vue为我们提供了相应的修饰符来简化操作。

.stop     //阻止冒泡
.prevent  //不重新加载
.capture  //使用事件捕获（只有谷歌可以使用）
.self     //元素本身触发的事件
.once     //只触发一次

<!-- 阻止单击事件冒泡 -->
<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>

模式是一样的，但是有些常用的方法还是应该记住，或者有个印象，在编程的过程中可以省去很多繁琐的步骤，也使代码质量更高。当串联使用修饰符，要注意顺序！
键值修饰符：
在编程过程中，我们有时需要给特定的按键加上特定的方法响应，这时候就要用到键值修饰符了。vue为我们提供了一些常用的键值修饰符：

.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta（在不同的电脑上代表的按键有所不同）
.exact（精准定位，当与其他按键同时按下不触发）
鼠标：
.left
.right
.middle

我们还可以自己定义键值修饰符：

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

还可以这样使用：

<input @keyup.page-down="onPageDown">

通过@keyup.key = “”;