本文详细介绍了Vue.js中事件修饰符的用法，包括.stop、.prevent、.capture、.self和.once，以及它们如何影响事件处理。同时，文章讲解了v-model指令的作用，它是如何实现表单元素和数据的双向绑定，并通过示例展示了在不同表单元素如文本框、radio、checkbox和select中的应用。
目录
一、事件修饰符
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在表单元素中实现了该功能。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
