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.f1Vue.config.keyCodes.f1 = 112

还可以这样使用：

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

通过@keyup.key = “”;