Vue指令v-once、v-pre、v-model
1、v-once
v-once:只渲染一次,之后的重新渲染,元素及其所有的子节点将被视为静态内容并跳过。因为它使用缓存中的值,不再使用vm中的值,数据也就不再变化。这可以用于优化跟新性能。
<body>
<div id="app">
<!-- 使用v-once,只会在初始化的时候插入一次值 当数据发生变化时,视图不再发生更新 -->
<h2 v-once>{{ dec }}</h2>
</div>
<script src="./Vuejs/vue2-6-12.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
dec:"v-once渲染"
}
})
</script>
</body>
当没使用v-once时:修改vm中dec的值后,页面刷新。
当使用v-once时:修改vm中dec的值后,页面不刷新。
2、v-pre
v-pre:不使用vue语法进行渲染,跳过元素和他的子元素的编译过成。相当于不编译指令。
<body>
<div id="app">
<h2 v-pre>{{ dec }}</h2>
</div>
<script src="./Vuejs/vue2-6-12.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
dec:"v-pre渲染"
}
})
</script>
</body>
3、v-model
3.1、v-model介绍
v-model:表单元素的双向数据绑定。数据更新元素会更新、元素更新数据也会更新。本质上v-model是value和input事件的语法糖。
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app">
<input type="text" v-model="dec">
<br>
<p v-cloak>{{dec}}</p>
</div>
<script src="./Vuejs/vue2-6-12.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
dec:""
}
})
</script>
</body>
在这个例子中,我们可以看到input输入了什么,p标签里面的插值表达式的值就为多少,同样的,我们设置vm.dec的值的时候,input上面的值也会随之发生变化,它们之间是双向数据绑定的。同时在这个例子中,我们运用了v-cloak,当没有使用v-cloak的时候,我们不停刷新页面的时候,会发现刷新的瞬间p标签里面的内容是如上显示的{{dec}}。
①、上面的例子是input中type的值为text的情况,即当为文本输入框的情况,这里,当使用的是复选框的时候,即type的值为checkbox时的情况:
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app">
<input type="checkbox" v-model="hobby">爱好
<p v-cloak>{{hobby}}</p>
</div>
<script src="./Vuejs/vue2-6-12.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
dec:"",
hobby:""
}
})
</script>
我们可以看到当我们勾选了”爱好”之后,返回的vm.hobby的值为true,当我们取消勾选后,返回的值为false。
当我们做如下修改的时候:
<script>
var vm = new Vue({
el:"#app",
data:{
dec:"",
hobby:[]
}
})
</script>
即将hobby修改成空的数组,即[]。我们发现返回的值为:
当我们给input设置value值的时候即:
<input type="checkbox" v-model="hobby" value="haha">爱好
<div id="app">
<input type="checkbox" v-model="hobby" value="摸鱼">摸鱼
<input type="checkbox" v-model="hobby" value="学习">学习
<input type="checkbox" v-model="hobby" value="写代码">写代码
<input type="checkbox" v-model="hobby" value="玩手机">玩手机
<p v-cloak>{{hobby}}</p>
</div>
<script src="./Vuejs/vue2-6-12.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
dec:"",
hobby:[]
}
})
</script>
②、同样的也可以完成双向绑定。在单选框里面,也存在这样的双向绑定。
<div id="app">
<input type="radio" name="life" v-model="hobby" value="吃饭">吃饭
<input type="radio" name="life" v-model="hobby" value="学习">学习
<p v-cloak>{{hobby}}</p>
</div>
<script src="./Vuejs/vue2-6-12.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
dec:"",
hobby:[]
}
})
</script>
3.2、v-model修饰符
3.2.1、.lazy
使用change事件而非input事件,如果不需要实时更新,则可以用.lazy。
<div id="app">
<p>没有添加修饰符</p>
<input type="text" v-model="meg">
<p>添加修饰符.lazy</p>
<input type="text" v-model.lazy="meg">
</div>
<script src="./Vuejs/vue2-6-12.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
meg:'修饰符'
}
})
</script>
在上面例子中,上面是没有添加.lazy的v-model,下面是添加了.lazy的v-model,他们最主要的区别在于添加.lazy的元素没办法实时更新,需要input标签内容发生改变时,才会改变v-model绑定的值,如上面的例子,我们对第一个input进行修改的时候,下面的值会随着变化,而对第二个修改的时候,之后按回车或者其他onchange事件后,才会修改对应的值。
3.2.2、.number
.number:因为v-model绑定数据是一个字符串,会将数据中的字符串转为number类型。
<div id="app">
<input type="text" v-model.number="num">
<p v-cloak>{{num}}</p>
</div>
<script src="./Vuejs/vue2-6-12.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
num:'1'
}
})
</script>
.number的作用就是当我们输入的文本的内容以数字开头的话,那么后面的非数字内容就会被忽略掉,此时msg的格式为number格式。但是当我们输入的内容是以字符串开头的话,那么就会将msg的值修改成字符串的格式,那么就无法忽略字符串的内容。
3.3.3、.trim
.trim:去掉前后的空格
<div id="app">
<input type="text" v-model.trim="num">
<p v-cloak>{{num}}</p>
</div>
<script src="./Vuejs/vue2-6-12.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
num:''
}
})
</script>