vue：内置指令

一、基本指令

1. v-cloak
   作用：解决初始化慢导致网页闪动
   用法：

	{{message}}

原理：配合css设置v-cloak不显示，所以看不到相应的标签，当dom被渲染之后，v-cloak会自动失效，所以现在就显示出来啦

2. v-once
   数据只渲染一次，后面数据变化的时候，它不再变化，相当于渲染了一次之后，后面将变成不是双向绑定的

二、v-if 和v-show

1、
v-if 是条件判断，满足条件之后再显示。
v-else 不满足上面的 v-if条件的显示
v-else-if 是不满足上面的if条件的，且满足这个if条件的才显示
这里的显示和不显示是值dom节点渲染或者不渲染

2、
v-show 满足条件才显示
这里的显示和不显示是指：display是不是none

三、v-for循环

1、数组循环
在 v-for 块中，我们拥有对父作用域属性的完全访问权限。v-for 还支持一个可选的第二个参数为当前项的索引。

  

    {{ parentMessage }} - {{ index }} - {{ item.message }}
  

var example2 = new Vue({
  el: '#example-2',
  data: {
    parentMessage: 'Parent',
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

结果：

你也可以用 of 替代 in 作为分隔符，因为它是最接近 JavaScript 迭代器的语法：

2、对象循环
你也可以用 v-for 通过一个对象的属性来迭代。

  

    {{ value }}
  

new Vue({
  el: '#v-for-object',
  data: {
    object: {
      firstName: 'John',
      lastName: 'Doe',
      age: 30
    }
  }
})

你也可以提供第二个的参数为键名：

  {{ key }}: {{ value }}

第三个参数为索引：

  {{ index }}. {{ key }}: {{ value }}

注：在遍历对象时，是按 Object.keys() 的结果遍历，但是不能保证它的结果在不同的 JavaScript 引擎下是一致的。

3、key
当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。这个类似 Vue 1.x 的 track-by="$index" 。

这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出。

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的唯一 id。这个特殊的属性相当于 Vue 1.x 的track-by ，但它的工作方式类似于一个属性，所以你需要用 v-bind 来绑定动态值 (在这里使用简写)：

建议尽可能在使用 v-for 时提供 key，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。

因为它是 Vue 识别节点的一个通用机制，key 并不与 v-for 特别关联，key 还具有其他用途，参考链接key

四、方法和事件

v-on:click=“xxx” 简写模式 @click=“xxx”
事件修饰符：
• .stop
• .prevent
• .capture
• .self
• .once
具体用法如下：

//阻止单击事件冒泡

//提交事件不再重载页面