VUE基础：事件处理
在前端小伙伴开发生涯中，经常要面对各种画面表单、各种按钮，针对表单和按钮的处理都包含一个共通事件：点击 (click)，前端最常见的场景：
- 表单提交
- 按钮点击
- 列表折叠
9.1 事件监听
在vue中可以用 v-on 指令监听原生的DOM事件，并在触发时运行一些 JavaScript代码，在vue中换了一种写法，更方便我们来控制数据。MVVM中强调的重点即数据驱动，那么在vue中我们就是利用事件处理来驱动视图已达到双向绑定的目的。即使用事件去控制数据变化，再由数据的变化驱动着视图的更新。
- 事件处理就是DOM事件，只不过在
vue中使用方式不同。 - 事件处理是控制数据变化的控制器，是连接视图与数据的桥梁。
所有的vue事件处理方法和表达式都绑定在当前视图的ViewModel，维护更加方便。使用v-on好处如下：
- 通过HTML模板便能轻松定位在JS代码里对应的方法
- 无须在JS里手动绑定事件，
ViewModel代码可以是非常纯粹的逻辑，和DOM完全解耦，更易于测试 - 当ViewModel被销毁时，其关联的所有的事件处理器都会自动被删除。
9.2 事件修饰符
在vue中，事件修饰符处理了许多DOM事件的细节，避免了我们手动去处理原生事件的逻辑，从而使我们专注于程序的内部逻辑处理。vue中事件修饰符主要有：
.stop：等同于JavaScript中的event.stopPropagation()，防止事件冒泡.prevent：等同于JavaScript中的event.preventDefault()，防止执行预设的行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播）.capture：与事件冒泡的方向相反，事件捕获由外到内.self：只会触发自己范围内的事件，不包含子元素.once：只会触发一次
9.3 按键修饰符
在项目开发的功能页面中，经常会遇到如下需求：用户输入账号密码后点击Enter键、筛选条件选择后自动加载符合选中条件的数据等。在传统的前端开发中，需要知道JavaScript中需要监听的按键所对应的keyCode，然后通过判断keyCode得知用户是按下了哪个键，以便执行后续操作。而vue给我们提供了一种便利的监听方式去监听需要的按键事件。在监听键盘事件时，vue为最常用的按键提供了别名，这样就减少了查找常见的按键所对应的keyCode的时间。
.enter：回车键.tab：制表键.delete：含delete和backspace键.esc：返回键.space: 空格键.up：向上键.down：向下键.left：向左键.right：向右键
9.4 实例代码
eventvue.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue事件处理</title>
</head>
<body>
<div id='app'>
<h2>Vue之绑定监听</h2>
<button v-on:click="alertMsg">提示消息：默认事件形参（event），隐含属性对象（隐含属性对象: $event）</button>
<br>
<button v-on:click="alertMsgParam('大家好，我是黑白猿')">提示参数消息：大家好，我是黑白猿</button>
<br>
<button v-on:click="alertMsgParamAndEvent('大家好，我是黑白猿', $event)">提示参数消息：</button>
<hr>
<h2>Vue之事件修饰符</h2>
<a href="http://www.baidu.com" v-on:click.prevent="alertMsgLink">百度一下</a>
<hr>
<div style="width: 200px;height: 100px;background: red" v-on:click="alertMsgOut">
<div style="width: 100px;height: 50px;background: blue" v-on:click.stop="alertMsgIn"></div>
</div>
<h2>Vue之按键修饰符</h2>
<input type="text" v-on:keyup.13="alertMsgEnter">
<input type="text" v-on:keyup.enter="alertMsgEnter">
</div>
</body>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
const vm = new Vue({
el : "#app",
data : {
},
methods :{
alertMsg(event){
alert(event.target.innerHTML);
},
alertMsgParam(message){
alert(message);
},
alertMsgParamAndEvent(message, event){
alert(event.target.textContent + message);
},
alertMsgLink(){
alert("点击网页链接")
},
alertMsgOut(){
alert("点击外部框框");
},
alertMsgIn(){
alert("点击内部框框")
},
alertMsgEnter(){
alert("您按了回车键")
}
}
})
</script>
</html>