目录
1.事件修饰符
在事件处理函数中调用event.preventDefault或者event.StopPropagation是非常常见的需求。因此，vue提供了事件修饰符的概念，来辅助开发人员更方便的对时间的触发进行控制。常用的5个事件修饰符如下
.prevent:阻止默认行为（例如a链接的跳转、组止表单的提交）
.stop:阻止事件冒泡
.capture:以捕获模式触发当前的事件处理函数
.once:绑定的事件只触发一次
.self:只有在event.target是当前元素自身时触发事件处理函数<body>
<div id="app">
<a href="http://baidu.com" @click.prevent="show">点击跳转百度</a>
<div @click="divHandler" style="height:150px; line-height: 150px; background-color:orange; padding-left: 100px;">
<button @click.stop="btnHandler">按钮</button>
</div>
</div>
<script>
new Vue({
el:"#app",
data:{},
methods:{
show(e){
// e.preventDefault();
console.log("点击了a链接")
},
divHandler(){
console.log('divHandler')
},
btnHandler(){
console.log('btnHandler')
}
},
})
</script>
</body>
点击“跳转百度”,并没有跳转到百度页面，是因为.prevent阻止了a标签链接的跳转；
打开浏览器控制台，点击“按钮”，发现控制台只显示了btnHandler，并没有显示divHandler，这就是因为使用了(.stop)事件修饰符，阻止了冒泡事件。
2.v-model标签
v-model指令在表单控件元素上创建双向数据绑定，根据控件类型能够自动选取正确的方法来更新元素
2.1绑定文本框
1）绑定单行文本框
<body>
<div id="app">
<p>v-model绑定单行文本框</p>
<input v-model="message" type="text" placeholder="单击此处进行编辑">
<p>当前输入内容位：{
{message}}</p>
</div>
<script>
new Vue({
el:"#app",
data:{
message:''
}
})
</script>
</body>
实例：根据单行文本框中的关键字搜索指定图片信息
<body>
<div id="app">
<div>
请输入查询关键字<input v-model="msg" type="text" >
</div>
<div v-for="img in result">
<img :src="img.src">
<span>{
{img.name}}</span>
</div>
</div>
<script>
new Vue({
el:'#app',
data:{
msg:'',
imgs:[
{
name:'one',
src:'img/1.jpeg'
},
{
name:'two',
src:'img/2.jpeg'
},
{
name:'three',
src:'img/3.jpg'
}
]
},
computed:{
result(){
var m=this.imgs;
//若搜索框位空，则显示全部图片信息
if(this.msg==''){
return m
}
//对搜索框里面的内容进行去空、转换小写操作
var text=this.msg.trim().toLowerCase();
m=m.filter(function(e){
//对图片名字进行去空、转换小写操作;并调用indexOf()方法判断图片名字中是否包含文本输入框内容(text)对应的索引（不包含返回值-1）
if(e.name.trim().toLowerCase().indexOf(text)!=-1){
return e;
}
});
return m;
}
}
})
</script>
输入："e"关键字后，由于只有照片1和3的名称中含有"e"关键字，所以只出现了照片1和3的信息;如果在输入一个"e",即查询关键字为"ee",则就只会出现图片3的信息了
2）绑定多行文本框
<body>
<div id="app">
<p>v-model绑定多行文本框</p>
<textarea v-model="message" placeholder="单击此处进行编辑"></textarea>
<p>当前输入内容位：{
{message}}</p>
</div>
<script>
new Vue({
el:"#app",
data:{
message:''
}
})
</script>
</body> 
2.2绑定复选框
1）绑定单个复选框
绑定单个复选框时，v-model绑定的是一个布尔值
<body>
<div id="app">
<form action="">
<p>单个复选框</p>
<input type="checkbox" v-model="checked" id="checked">
<label for="checked">checked:{
{checked}}</label>
</form>
</div>
<script>
new Vue({
el:"#app",
data:{
checked:false
}
})
</script>
</body> 
2）绑定多个复选框
绑定单个复选框时，v-model绑定的是一个数组
<body>
<div id="app">
<form action="">
<p>多个复选框</p>
<input type="checkbox" id="huawei" v-model="brank" value="华为">
<label for="huawei">华为</label>
<input type="checkbox" id="OPPO" v-model="brank" value="OPPO">
<label for="OPPO">OPPO</label>
<input type="checkbox" id="VIVO" v-model="brank" value="VIVO">
<label for="VIVO">VIVO</label>
<input type="checkbox" id="xiaomi" v-model="brank" value="小米">
<label for="xiaomi">小米</label>
</form>
<p>选择的手机品牌{
{brank}}</p>
</div>
<script>
new Vue({
el:"#app",
data:{
brank:[]
}
})
</script>
</body> 
实例：全选、全不选、反选
在页面中应用复选框添加用户兴趣爱好，并添加”全选“、”全不选“、”反选“按钮，实现复选框的全选、全部选、反选操作
<body>
<div id="box">
<form action="">
<input type="checkbox" name="likes" value="上网" v-model="checkedNames">
<label for="net">上网</label>
<input type="checkbox" name="likes" value="看书" v-model="checkedNames">
<label for="book">看书</label>
<input type="checkbox" name="likes" value="电影" v-model="checkedNames">
<label for="movie">电影</label>
<input type="checkbox" name="likes" value="游戏" v-model="checkedNames">
<label for="game">游戏</label>
</form>
<div v-if="checked">
爱好：{
{result}}
</div>
<button @click="allchacked">全选</button>
<button @click="noallchacked">不全选</button>
<button @click="fanchacked">反选</button>
</div>
<script>
var vm = new Vue({
el: "#box",
data: {
checked: false,
checkedNames: [],
checkedArr: ["上网", "看书", "电影", "游戏"],
tempArr: []
},
methods: {
allchacked: function() {
this.checkedNames = this.checkedArr;
},
noallchacked: function() {
this.checkedNames = [];
},
fanchacked: function() {
this.tempArr = [];
for (var i = 0; i < this.checkedArr.length; i++) {
if (!this.checkedNames.includes(this.checkedArr[i])) {
this.tempArr.push(this.checkedArr[i]);
}
}
this.checkedNames = this.tempArr;
}
},
computed: {
result: function() {
var show = "";
for (var i = 0; i < this.checkedNames.length; i++) {
show += this.checkedNames[i] + " ";
}
return show;
}
},
watch: {
"checkedNames": function() {
if (this.checkedNames.length > 0) {
this.checked = true
} else {
this.checked = false
}
}
}
})
</script>
</body> 
2.3绑定单选按钮
v-model绑定单选按钮--->当某个单选按钮被选中时v-model绑定的属性值会被赋值为该单选按钮的value值
<body>
<div id="app">
<form action="">
<input type="radio" id="man" v-model="gender" value="男男男">
<label for="man">男</label>
<input type="radio" id="woman" v-model="gender" value="女女女">
<label for="woman">女</label>
</form>
<p>您的性别:{
{gender}}</p>
</div>
<script>
new Vue({
el:"#app",
data:{
gender:''
}
})
</script>
</body> 
2.4绑定下拉菜单
1）单选
该选项有设置value值：选中时v-model绑定的属性值会被赋值为该选项vllue值
该选项未设置value值：选中时v-model绑定的属性值会被赋值为显示在选项中的文本
<body>
<div id="app">
<select v-model="type" name="list">
<option>手机</option>
<option value="ipad">平板电脑</option>
<option value="laptop">笔记本</option>
</select>
<p>选中的类型:{
{type}}</p>
</div>
<script>
new Vue({
el:"#app",
data:{
type:''
}
})
</script>
</body> 
2）多选
应用v-model绑定的是一个数组
<body>
<div id="app">
<select v-model="type" multiple="multiple">
<option>手机</option>
<option value="ipad">平板电脑</option>
<option value="laptop">笔记本</option>
</select>
<p>选中的类型:{
{type}}</p>
</div>
<script>
new Vue({
el:"#app",
data:{
type:[]
}
})
</script>
</body>
2.5使用修饰符
1）使用lazy
v-model.lazy：使用change事件同步数据
<div id="app">
<p>单行文本框</p>
<input type="text" v-model.lazy="msg" placeholder="单机此处编辑内容">
<p>当前输入内容：{
{msg}}</p>
</div>
<script>
new Vue({
el:"#app",
data:{
msg:''
}
})
</script>
</body>
只有当鼠标点击文本框外部数据才会同步更新，而不是立即更新
2）使用number
v-model.number：自动将输入转换为数据类型；如果转换结果为NaN,则返回用户输入的原始数据
<body>
<div id="app">
<p>单行文本框</p>
<input type="text" v-model.number="msg" placeholder="单机此处编辑内容">
<p>当前输入内容：{
{msg}}</p>
</div>
<script>
new Vue({
el:"#app",
data:{
msg:''
}
})
</script>
</body>
3）使用trim
v-model.trim：自动过滤输入的字符串首尾空格（中间的不会去除哈）
<body>
<div id="app">
<p>单行文本框</p>
<input type="text" v-model.trim="msg" placeholder="单机此处编辑内容">
<p>当前输入内容：{
{msg}}</p>
</div>
<script>
new Vue({
el:"#app",
data:{
msg:''
}
})
</script>
</body>