目录
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>