vue.js指令补充
前面在学习vue的指令的时候,在简书上看到一篇vue指令的总结,比较全面,转载到了自己的博客vue.js指令总结。
但是自己在学习的过程中也总结了一些文章里没有的,记录在这里!
1、v-clock
v-clock不需要表达式,它会在Vue实例结束编译时从绑定的HTML元素上移除,经常和CSS的display:none;配合使用.
<div id="app" v-cloak>
{{message}}
</div>
但是在这里虽然已经加了指令v-cloak,但其实并没有起到任何作用,当网速较慢、vue.js文件还没有加载完时;在页面上还是会显示{{message}} 的字样,直到vue创建实例、编译模板时,DOM才会被替换,所以这个过程中屏幕是有闪动的,只要加上一句display:none;就可以解决了!像这样
[v-cloak]{
display:none;
}
嘿嘿嘿,是不是很简单~
注意:一般情况下,v-clock是一个解决初始化慢导致页面闪动的最佳实践。对于简单的项目来说很实用,但是在具有工程化的项目里,比如有webpack和vue-router时,项目的html结构只有一个空的div元素,剩余的内容都是由路由去挂载不同组件完成的,所以不再需要使用v-clock。
2、v-for
为了优化代码,可以将v-for用在内置的template上,将多个元素进行渲染,不会构建多个容器,从而优化代码。
more:数组变异更新方法
①push()
向数组末尾添加一个或者多个元素,并返回新的长度。接收任意数量的参数
例:arr.push(1);
arr.push([2,3,4]);
②pop()
和push()方法相反。pop()方法删除数组的最后一个元素,返回它被删除元素的值;
如果数组变为空,则该方法不改变数组,返回undefine值。
③shift()
把数组的第一个元素从其中删除,并返回被删除的值。
如果数组是空的,shift()方法将不进行任何操作,返回undefined的值。
④unshift()
向数组的开头添加一个或多个元素,并且返回新的长度。
⑤splice()
从数组中添加/删除项目,然后返回被删除的项目。
splice的几个功能与使用
⑥sort()
⑦reverse()
将数组中的元素的顺序进行反转,在原数组上操作,然后返回原数组。
注意:reverse方法不能在null与undefined上运行,会报错;空数组上运行reverse方法得到空数组;
以上七个方法会改变被这些方法调用的原数组,下面三个不会,他们返回的是一个新数组。
⑧filter()
js 数组filter 总结及其用处
⑨concat()
⑩slice()
从已有的数组中返回选定的元素
数组slice方法各个参数情况的总结
3、v-if
(1) 条件指令可以根据表达式的值在DOM中渲染或销毁元素、组件; v-if是真正的条件渲染
(2) Vue在渲染元素时,会尽可能地复用已有的元素而非重新渲染,如果不希望这样做,可以增加key属性,key的值必须是唯一的。
例子如下:
<template v-if="type === 'name'">
<label>姓名</label>
<input placeholder="输入姓名">
</template>
<template v-else>
<label>手机号</label>
<input placeholder="输入手机号">
</template>
<button @click="keyTest">点一下</button>
data: {
type:'name'
},
methods: {
keyTest:function(){
this.type = this.type === 'name' ? 'phone' : 'name';
}
}
运行出来的效果:
点击一下按钮切换之后
可以看出,切换了之后,虽然DOM变了,但是之前在输入框里键入的内容并没有改变,只是替换了placeholder的内容,因为input元素被复用了。
解决方法:使用key属性
此时,input元素不会被复用,切换类型时键入的内容也会被删除,不过lable元素仍然是被复用的,因为没有key属性!
4、v-show
(1) v-show只是简单的CSS切换,无论条件真与否都会被编译;当值为false时,元素隐藏,查看DOM结构显示display:none。
(2) v-show不能在template上使用