基本指令
v-cloak
在 vue 实例编译结束之后再渲染,一般与 display: none 结合使用。
<div id="app">
<div v-cloak>{{msg}}</div>
</div>
// css
[v-cloak]: {
display: none;
}
解决初始化慢导致的页面闪动,比如:页面加载出来了但是没有解析完 vue 实例,从而导致页面中显示这种没有加载出来的情况 {{msg}}
v-once
定义它的元素和组件只渲染一次,后续都不会再重新渲染。
用法和 v-cloak 在标签上的一样。
条件渲染指令
v-if
用法直接看代码
<p v-if="6<3">{{apple}}</p>
<p v-else-if="9>6">{{elseifmsg}}</p>
<p v-else>{{banana}}</p>
再看如下代码
<div v-if="inputType=='name'">
用户名:<input type="text" placeholder="请输入用户名" key="name">
</div>
<div v-else>
密码:<input type="text" placeholder="请输入密码" key="pwd">
</div>
如果 input 中没有添加 key 属性的话,有这样一种情况,在切换输入框的时候,vue 可能复用 input 导致用户输入的用户名在切换输入框之后仍存在于 input 当中,这并不是我们想要的。
这里涉及到 v-if 的弊端:vue 在渲染元素时,出于效率考虑,会尽可能的复用已有的元素而非重新渲染,只渲染变化的元素和属性。解决这个弊端的方法就是提供 key 值来决定是否复用标签元素。
v-show
用法与 v-if 类似,显现 与否取决于布尔值。
v-if 和 v-show 的区别:
v-if 实时渲染,显示则渲染,不显示则移除;
v-show 元素永远存在于 DOM 结构中,只是改变了 css 的 diaplay 属性(none)。
使用场景根据元素标签是否需要频繁切换而定。
列表渲染指令
v-for
用法:写在要遍历的元素上 v-for=“item in items”
- 遍历多个对象:对象数组
<ul>
<li v-for="item in items">{{item.id}}<li>
</ul>
带索引的用法:括号的第一个变量代表 item,第二个代表 index
<div v-for="(item, index) in items">{{index}}: {{item}}</div>
- 遍历一个对象的多个属性
<p v-for="value in obj">{{value}}</p>
同时获取 value key 和 index 的写法
<p v-for="(value, key, index) in obj">{{index}}: {{key}}: {{value}}</p>
数组更新排序过滤
- push() 数组末尾添加元素
- pop() 移除数组最后一个元素
- shift() 删除数组第一个元素,返回删除元素
- unshift() 在数组开头添加元素,返回新数组长度
- splice() 添加或者删除元素,返回删除的元素数组
有三个以上的参数,1是开始操作的位置,2是要操作的长度,3以后的参数是要添加的元素 - sort() 指定排序方式进行排序
app.arr.sort(function(a, b) { return … }) - reverse() 翻转数组
有两种数组变动 vue 检测不到
1、改变数组的指定项app.arr[0] = '改变值'
2、改变数组的长度app.arr.length = 1
解决方法:
1、Vue.set(array, index, setSomething) 方法改变指定项
2、splice 方法删除操作,改变数组长度
过滤方法:filter
arr.filter(function(item) {
// item 为要匹配的每一项
return ...
})