Vue中的各种内置指令
基本指令
v-cloak
网速特别慢或者遇到其他加载问题时,浏览器会先展示dom文本,然后再加载内容,给用户提供很差的体验.
体验差,那还不如直接白屏,再出现渲染完的内容
v-cloak可以解决画面闪动的问题
因为v-cloak在Vue结束编译时,从HTML元素上移除.还未编译完成就一直存在
所以让v-cloak的元素一直存在的时候,隐藏html元素.这样用户在页面还没加载完的时候看到的是空白
v-once
定义它的组件或元素只渲染一次
所以后续再怎么改变都不会再重新渲染
条件渲染指令
v-if,v-else-if,v-else
v-if后面接的是等于号"=",后面是布尔值,如果是true,那么就显示
v-if和v-else组合相当于if else语法
v-else-if就是js语法里的else if
<div v-if="6>3">{
{
color}}</div>
<div v-else-if="9>8">{
{
aaa}}</div>
//如果是true,页面上就会展示red,如果是false,那就不展示,展示下面的else
<div v-else>{
{
text}}</div>
//相当于if else语法
data:{
msg: 'red',
text:'哈哈哈'
aaa:'你干嘛'
}
小demo,点击按钮展示不同input
- 点击按钮,会根据判断条件,如果
data属性中的type = 'name',那么展示用户名input标签 - 反之展示密码input标签
- 同时增加一个按钮并监听点击事件函数,判断当点击按钮时,
data属性中的type是否是'name',如果是,那将type赋值为'password',如果不是'name',那么赋值为'name' - 但是我们会发现,虽然单击按钮表单会发生变化,但是如果用户在表单中输入内容,内容不会随表单切换.
因此这就是v-if 的缺点 :
- Vue在渲染元素时,出于效率考虑,会尽可能的复用已有的元素而不是重新渲染,导致这个元素没有重新渲染.
- 他只渲染发生了变化的元素
- 因为input元素时相同的
- 因此input元素被复用了(没有重新渲染input元素)
解决办法 - 既然元素相同会被复用,那么只要让元素不同不就好了
- Vue中可以添加key,使得该元素成为唯一元素
key加在标签上,命名他是的该标签成为唯一标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="app">
<div v-if="type === 'name'">
<input type="text" placeholder="输入用户名">
</div>
<div v-else>
<input type="text" placeholder="密码" >
</div>
<button @click="getInput">点击</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data:{
type:'name'
},
methods:{
getInput:function(){
this.type =(this.type ==='name' ? 'password':'name')
}}})
</script>
</body>
</html>
v-show
v-show和v-if类似,都是满足一定条件时,展示元素
v-show显现与否取决于布尔值
<div v-show="2>1">如果v-show里面是true,那么我就被渲染出来</div>
v-show和v-if的区别
v-if: 页面显示就渲染,页面不显示就直接移除,不会存在晕DOM上
v-show:只渲染一次,如果不显示还是存在DOM上,只是将css的 display属性设置为none.隐藏起来.
那么什么时候用v-show和v-if呢
- 如果频繁切换页面,那就用
v-show(比如tab切换) - 如果实时渲染用
v-if(比如股票走势图)
总而言之 v-if控制是否渲染,false就是不存在DOM中v-show控制是否显示(已经渲染完成)
列表渲染指令
v-for
注意,官方推荐我们在使用v-for时,给对应的元素或组件添加一个:key属性,来要求元素复用时,根据对象的key一一对应.
当我们有一组数据需要进行渲染时,我们可以使用
v-for来完成
v-for的语法类似Javescript中的for循环
格式是下面这样的
- items in items
一般会有两种使用场景: - 遍历多个对象
- 遍历一个对象多个使用场景时
遍历数组
没有获取下标的情况
- 理解为使用for循环将data属性内的数组内的内容遍历出来,赋值到
<li>上
获取下标的情况
遍历对象
使用
v-for在遍历对象时,如果像上面遍历数组一样,只获取一个值,那么获取的是这个对象中的value.
如果要遍历对象中的具体属性,可以在v-for = "(value,key,index)" in obj
- value代表对象中的键值
- key代表对象中的键名
- index代表下标
数组的响应式
Vue的核心是数据和视图的双向绑定,当我们修改数组时,Vue会检测到数据的变化,页面上的内容就会发生变化
以下这些改变数组的方法,会使得页面上的内容也会发生变化
改变数组的一系列方法：
- push() 在末尾添加元素
- pop() 将数组的最后一个元素移除
- shift() 删除数组的第一个元素
- unshift（）：在数组的第一个元素位置添加一个元素
- splice() ：可以添加或者删除函数—返回删除的元素
- splice的括号中含有三个参数
- 第一个,获取数组的起始位置
- 第二个,需要处理数组内容的数量(几个?)
- 第三个,需要替换的内容
- 如果没有第二个参数,那么这个参数就是全部
但是,下面直接修改数组的方式,修改数组后页面上的内容不会发生变化
- 第一种改变数组的长度
比如arr.length = 1 - 第二种直接修改数组的内容
arr[0]='book'
这样修改数组,即使数组的内容发生变化,页面上的内容还是不变的.不会重新渲染
那么问题来了,如果我一定要修改数组,那怎么办呢
可以使用Vue的内置方法Vue.set(arr,index,value)
- arr指需要操作的数组
- index指需要操作的下标
- 需要修改的值
如果需要修改数组的长度,或者替换
- 可以使用
splice()方法 splice(0)会从0项开始,第二个参数因为没写,所以数量就是从0开始的全部,结果就是数组全删了- 还可以
splice(index,0,value),从index项开始增加值,就是插入一个值