一、事件修饰符
v-on指令提供了一些事件修饰符，即自定义事件行为，不同的事件修饰符会产生不同的功能，通常配置v-on指令来使用，下表是常用事件修饰符
| 事件修饰符 | 说明 |
| .stop | 阻止事件冒泡 |
| .prevent | 阻止默认事件 |
| .capture | 添加事件监听器时使用事件捕获模式 |
| .self | 将事件绑定到该元素本身，只有自身才能触发 |
| .once | 事件只触发一次 |
（1）.stop阻止事件冒泡
事件冒泡是当事件触发时，会像气泡一样，从DOM树的底层，一层一层往上面传递，一直传递到DOM树的根节点，如果子元素和父级元素触发的是相同的事件，那么当子元素被触发时父元素也会被触发，这就是事件的冒泡机制
由于事件的传递方式是冒泡，当子元素与父元素绑定同一事件时，有可能会造成事件的错误触发，此时需要使用.stop修饰符来阻止事件的冒泡，代码如下：
<div id="div1" @click="div1Handler"> <input type="button" value="点击" @click.stop="btnHandler"> </div>
注意：在使用不同内核的浏览器中，冒泡规律是不一样的。如IE浏览器中的顺序为div=> body=>html=>document，而其他内核中顺序为div=>body=>html=>window。此外，在JavaScript中，并非所有的事件都可以冒泡，像blur、unload、load等事件就不能冒泡
（2）.prevent阻止默认事件
在HTML中，很多标签都有默认事件，例如，<a>超链接标签被单击时会自动跳转到指定页面、在实际开发中，若<a>的默认事件会与其他事件冲突，则可以使用.prevent修饰符阻止它的默认事件，代码如下：
<a href="http://www.baidu.com" @click.prevent="linkClick">百度一下</a>
（3）.capture事件捕获模式
事件捕获的执行顺序是由外部结构向内部结构执行，恰好与事件的冒泡顺序相反，代码如下：
<div id="div3" @click.capture="div3Handler"> <input type="button" value="点击" @click="btnHandler3"> </div>
上述代码中，父级元素<div>的click事件后跟了".capture"，当单击按钮时，则会先执行div3Handler函数，在执行btnHandler3函数，与冒泡模式相反。
（4）.self自身触发事件
.self修饰符用来实现只有事件的元素本身触发时才会回调，除此之外都不会被触发。
<div class="inner" @click.self="divHandler"> <input type="button" value="点击" @click="btnHandler"> </div>
上述代码添加了".self"修饰符之后，当单击按钮时，将不再触发<div>的单击事件，只有单击<div>时，才会执行"divHandler"函数
注意：.self修饰符只会阻止本身身上的冒泡，并不会真正阻止冒泡
（5）.once事件只触发一次
.once修饰符用来阻止事件被多次触发，只触发一次，代码如下：
<input type="button" value="点击" @click.once="btnHandler">
上述代码中，<input>的click事件后跟了".once"，无论单击多少次按钮，"btnHandler"函数都只执行一次
事件修饰符可以控制事件按照一定的规则进行触发，在使用事件修饰符的时候，书写的顺序非常重要。譬如，@click.prevent.self会阻止所有的单击事件，而@click.self.prevent只会阻止对元素自身的单击事件。
二、v-model双向数据绑定
v-model指令主要用于实现表单元素和数据的双向绑定。
Vue.js是单项数据流，v-model指令只是语法糖而已，实现双向绑定的原理相当于两个指令（v-on和v-bind）的集合。v-model本质上包含两个操作：使用v-bind指令绑定一个value属性，使用v-on指令给当前元素绑定input事件，代码如下：
1 <input v-model="sth"> 2 <input v-bind:value="sth" v-on:input="sth=$event.target.value"> 3 <input :value="sth" @input="sth=$event.target.value">
上述3行代码的效果都是一样的，第一行代码是第2行代码的语法糖，第2行代码也可以简写为第3行代码，可以看出，v-model与同时使用v-bind和v-on的效果是相同的。
下面v-model绑定文本框、绑定radio、绑定checkbok做单选\做多选、绑定seleck做单选\做多选及绑定textareat
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../../vue-2.7.14.js"></script> <style> * { margin: 0; padding: 0; } #root { background-color: #7fffd4; width: 450px; height: 860px; margin: 0 auto; } div { margin-top: 20px; } .tilte{ text-align: center; } #dd{ border: 1px solid white; width: 400px; height: 50px; margin: 2px auto; } #dc{ width: 400px; height: 80px; margin: 2px auto; border: 1px solid white; } #df { width: 400px; height: 100px; margin: 2px auto; border: 1px solid white; } #dg { width: 400px; height: 120px; margin: 2px auto; border: 1px solid white; } </style> </head> <body> <div id="root"> <div class="tilte" id="dd"><h3>v-model双向绑定</h3></div> <div id="dd"> <h3>v-model的原理</h3> <input v-bind:value="msg" type="text" @input="msg=$event.target.value" /> </div> <div id="dd"> <h3>v-model绑定文本框</h3> <input v-model="text" type="text" placeholder="v-model绑定文本框"/> </div> <div id="dc"> <h3>v-model绑定radio</h3> <input v-model="sex" type="radio" value="男" />男 <input v-model="sex" type="radio" value="女" />女 <br> 所选的性别是：{{sex}} </div> <div id="dc"> <h3>v-model绑定radio</h3> <input v-model="zimu" type="radio" value="A" />A <input v-model="zimu" type="radio" value="B" />B <input v-model="zimu" type="radio" value="C" />C <input v-model="zimu" type="radio" value="D" />D <br> 多选的答案是：{{zimu}} </div> <div id="dc"> <h3>v-model绑定checkbox做单选</h3> <input v-model="isangree" type="checkbox" value="男" />同意协议 <br> isAngree的值是：{{isangree}} </div> <div id="df"> <h3>v-model绑定checkbox做多选</h3> <input v-model="hobbies" type="checkbox" value="篮球" />篮球 <input v-model="hobbies" type="checkbox" value="足球" />足球 <input v-model="hobbies" type="checkbox" value="乒乓球" />乒乓球 <input v-model="hobbies" type="checkbox" value="排球" />排球 <input v-model="hobbies" type="checkbox" value="网球" />网球 <br> 所选爱好有：{{hobbies}} </div> <div id="dc"> <h3>v-model绑定select做单选</h3> <select v-model="fruit"> <option value="苹果">苹果</option> <option value="香蕉">香蕉</option> <option value="李子">李子</option> <option value="桃子">桃子</option> <option value="西瓜">西瓜</option> <option value="草莓">草莓</option> </select> <br> 所选水果有:{{fruit}} </div> <div id="dg"> <h3>v-model绑定select做多选</h3> <select v-model="fruits" multiple> <option value="苹果">苹果</option> <option value="香蕉">香蕉</option> <option value="李子">李子</option> <option value="桃子">桃子</option> <option value="西瓜">西瓜</option> <option value="草莓">草莓</option> </select> <br> 所选水果有:{{fruits}} </div> <div id="df"> <h3>v-model绑定textareat</h3> <textarea v-model="info" cols="" rows=""> </textarea> <br> 所写内容是:{{info}} </div> </div> <script> const vm = new Vue({ el: '#root', data: { msg: "同学你好啊！！！", text: "", sex: "", zimu:"", isangree: "", hobbies: [], fruit:"", fruits:[], info:"" }, methods: { } }) </script> </body> </html>
执行截图：
双向绑定，v-model其实是语法糖，它的本质是绑定值到元素的指定元素上，并监听元素的输入事件，Vue.js在表单元素中实现了该功能。
