Vue 内置指令

基本指令

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 ...
})