Vue.js 内部指令

基本指令

v-cloak
解决初始化慢导致页面闪动，一般与 display: none; 结合使用。
v-once
定义它的元素和组件只渲染一次。

条件渲染指令

v-if

v-if 后面接的是等号，等号后的内容必须是布尔值。
v-else
v-else-if
Vue 在渲染元素时，出于效率考虑，会尽可能地复用已有的元素而非重新渲染，解决方法：对不想让其复用的标签或元素加上唯一的 key

<div v-if="type === 'name'">
  用户名：<input type="text" placeholder="请输入用户名" key="name">
</div>
<div v-else>
  邮箱：<input type="text" placeholder="请输入邮箱" key="email">
</div>

v-show

v-show 后面接的是等号，等号后的内容必须是布尔值。

v-if 和 v-show 的比较

v-if 实时渲染，页面需要显示就渲染，不需要就移除。
v-show 元素只渲染一次，永远存在于页面中，只是改变了其 display 属性为 display: none; 。当需要频繁切换页面时，使用 v-show 。

v-for

写在要遍历的元素上。
(1) 遍历（数组中的）多个对象：

<ul>
  <li v-for="item in arr">{{item.name}}</li>
</ul>

带索引的写法：

<ul>
  <li v-for="(item, index) in arr">{{index}}------{{item.name}}</li>
</ul>

(2) 遍历一个对象的多个属性：

<span v-for="value in obj">{{value}}</span>

带索引的写法：

<span v-for="(value, key, index) in obj">{{index}}---{{key}}---{{value}}</span>

数组更新

改变数组的一系列方法：

• push()
  在数组末尾添加元素，返回添加元素后的数组长度。
• pop()
  删除数组最后一个元素，返回该元素。
• shift()
  删除数组的第一个元素， 返回该元素。
• unshift()
  在数组的头部添加元素，返回添加元素后的数组长度。
• splice()
  可以添加或者删除元素，返回删除的元素组成的数组。
  arr.splice(start, count, addElement1, addElement2, ...);第一个参数表示开始的位置，第二个参数表示删除元素的个数，第三个及更多的参数表示要被插入数组的元素。
  如果只提供第一个参数，等同于将元素组在指定位置拆分成两个数组。

var a = [1, 2, 3, 4];
a.splice(2) // [3, 4]
a // [1, 2]

• reverse()
  颠倒数组。
• sort()
  排序数组，默认为字典顺序，可传入函数作为参数自定义排序方式。

[1101, 10111, 111].sort()
// [10111, 1101, 111]

[1101, 10111, 111].sort(function (a, b) {
  return a - b;
})
// [111, 1101, 10111]

两个数组变动 Vue 检查不到：

1. 改变数组的指定项
   app.arr[1] = 'car' 这样写无效。
   解决方法：使用 Vue 提供的 set 方法，Vue.set(app.arr, 1, 'car')
2. 改变数组的长度
   app.arr.length = 1 这样写无效。
   解决方法： 使用 splice 方法，app.arr.splice(1)

方法和事件

v-on 绑定的事件类似于原生的 onclick 等写法。
如果方法中有参数，而你绑定事件时没写括号，会默认传入原生事件对象 event 。

修饰符

• .stop ：阻止事件冒泡
• .prevent ：阻止默认事件
• .self ：只是作用于元素本身而不是子元素时调用
• .once ： 事件只触发一次

按键修饰符

<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">
<input v-on:keyup.13="submit">