一、事件监听
1.1 v-on的使用
当我们需要监听用户操作时，如点击、拖拽、键盘事件等等，就需要使用到事件监听。
v-on的介绍：
- 作用：绑定事件监听器
- 缩写：@
- 预期：Function | Inline Statement | Object
- 参数：event
1.2 v-on基础操作
计数器案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h2>当前计数为： {{counter}}</h2>
<!--<button v-on:click="counter++">+</button>-->
<!--<button v-on:click="counter--;">-</button>-->
<button v-on:click="increment">+</button>
<button v-on:click="decrement">-</button>
<!--下面是语法糖写法-->
<!--<button @click="increment">+</button>-->
<!--<button @click="decrement">-</button>-->
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
counter: 0,
},
methods: {
increment: function () {
this.counter++
},
decrement: function () {
this.counter--
}
}
})
</script>
</body>
</html>
1.3 v-on参数
情况一：一般来说，如果当调用方法时，不需要传入额外的参数，可以省略方法后的()，如<button @click="increment">+</button>
如果需要传递参数，但是实际上没有传参时，形参就会使用默认的undefined，如下：
如果传递了参数的话，如下：
但是如果既没有传递参数，甚至连()都不加上的话，点击按钮后传递的就是event事件对象。
虽然不传递参数时可以省略括号，但是方法本身是需要一个参数的，在这个时候，Vue会默认将浏览器生成的event对象作为参数传入方法中。
在方法定义时，我们既需要event对象，同时又需要其他参数时，如下：
在上图中，分别尝试了五种传参方式，由浏览器的控制台可以知道：
不加()仍然会默认输出event对象；
加了()而不传递参数时，默认均为undefined；
而按钮3中形参event报错，因为Vue默认去app对象中找event却没有找到，而不是当成浏览器的event事件来传递；
如果不穿第二个参数也是默认的undefined；
最后成功的情况是，如果需要在传递其他参数的同时传递event对象的话，需要通过$event来获取事件。
1.4 v-on修饰符
在某些情况下，我们拿到event的目的可能是进行一些事件处理。
Vue提供了修饰符来帮助我们方便的处理一些事件：
.stop - 阻止事件冒泡；
此时就产生了事件冒泡，也就是我点击了button按钮会同时打印div和button两个@click的监听，为了阻止这种情况，通常会使用.stop，如：
.prevent - 阻止对元素自身的点击；
在点击提交按钮之后立即就跳转了，没有任何方法中的内容产生，这时就需要阻止元素对自生的操作，如下：
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调；
当我键盘按下弹起时，事件监听就成功一次，但是如果我只是需要监听回车键，就只需要加一个.enter即可，如：
.native - 监听组件根元素的原生事件；
.once - 只触发一次回调。