vue 指令

表达式的值除了可以出现内容中，也可以使用在其它位置，比如：属性。但是不能使用 {{}} 语法，而是需要 指令

在 vue 中，指令是一个带有 v- 前缀的属性，与普通属性不一样的地方在于，指令的值是引号括起来的 表达式，不同的指令有不同的作用，vue 内置了一些常用的指令

1. v-cloak  解决进入页面{{}}（插值闪烁）的问题
   
    	特点：当vue.js加载完成后，指令会自动删除
   

<p v-cloak>{{title}}</p>    需要配合 <u>css</u> 进行处理

<style>
[v-cloak] {
  display: none;
}只要含有v-cloak指令的元素都会隐藏
</style>

2. v-text   v-html
   

   作用：改变标签里的内容，无插值闪烁的问题，相当于之前的innerTEXT和innerHTML

<p v-text="title"></p>

<p v-html="title"></p>

可以代替插值符{{}}

弊端：v-text 会填充整个 innerHTML

3. v-bind  绑定数据     简称  :
   

   绑定数据（表达式）到指定的属性上，<div v-bind:参数="值/表达式"></div>，这里的参数就是指定的属性名称

   :title=" mag " msg代表变量

   v-bind可以放合法的js表达式（字符串的拼接）

   v-bind是单项数据绑定：

   data变了，视图跟着变；视图变化，data不会变。
   

4. v-on   给元素绑定事件    简写为@
   

<button  v-on:click="show"></button>

简写：<button  @click="show"></button>

在vm实例中会监视data数据变化，如果一旦发生变化，就会吧数据同步到试图页面中

优点：在写代码不考虑dom节点，只关注数据

5. v-for          
   

根据数据循环渲染 v-for 指令所在的元素及其子元素

可以循环的数据：Array | Object | number | string | Iterable (2.6 新增)

<div v-for="(item, index) in items"></div>

<div v-for="(val, key) in object"></div>

<div v-for="(val, key, index) in object"></div>

在使用v-for时，添加key属性，提高for循环的性能，但是key值必须是唯一的

6. v-moder   双向数据绑定
   

model: 选项就是用来设定v-model

v-model 只能同时绑定一个 prop

只有表单元素才能在视图里改变数据

把表单元素和data的数据绑定在一起，只有一个发生改变另一个也会跟着变

7. v-if/v-show
   

这两个指令都是控制元素的显示隐藏

区别：
v-if 每次都会创建删除节点

v-show是让这个元素显示隐藏 display:none和display:black

如果来回切换显示隐藏效果就用v-show，不需要来回切换就用v-if