Vue指令

• v-text

<span v-text="msg"></span>
//其用法与 {{msg}} 一样
<span>{{msg}}</span>

那为什么不用{{msg}}要用v-text。因为直接用字面量会出现bug。网速慢的时候，先加载出HTML，在加载js,在js未加载出来的时候，{{msg}}没数据，所以会直接在页面上显示出{{msg}}。工作中用v-text用的多。

• v-html
  用法与v-text一样,但是v-html会识别出数据当中的HTML标签。但少用，会引起XSS攻击。

<div v-html="message">{{message}}</div>
//message可以包含html标签，来展示一个页面的内容。
export default {
  data () {
    return {
      message: "<h1>这里可以包含html标签<h1>"
    }
  }
}

• v-show

v-show的值为true，表示元素显示；如果v-show值为false，表示元素隐藏。等同于display:none;

• v-if

v-if的值为true，表示元素显示；如果v-if值为false，表示元素隐藏。但隐藏是会删除dom。

• v-else
  紧跟着v-if 或 v-if-else 无语法要求。

• v-else-if
  紧跟v-if 没啥好说的。

• v-for
  当和 v-if 一起使用时，v-for 的优先级比 v-if 更高。

//此指令之值，必须使用特定语法 alias in expression ，为当前遍历的元素提供别名：
<div v-for="item in items"> {{ item.text }} </div>

//另外也可以为数组索引指定别名 (或者用于对象的键)：
<div v-for="(item, index) in items"></div>

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

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

• v-on(缩写@)
  绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。类似于小程序的bindtab事件绑定。

如果是点击事件可以用缩写，如果不是要写全。

v-on:keyup.13 绑定键盘回车键

• v-bind(缩写：)

v-bind指令被用来响应地更新标签上的属性。(img标签上的src就是属性)动态地绑定一个或多个特性，或一个组件prop 到表达式.可以很方便的渲染DOM。

<!-- 绑定一个属性 -->
<img v-bind:src="imageSrc">

<!-- style 绑定 -->

<div :style="{ fontSize: size + 'px' }"></div>

<div :style="[styleObjectA, styleObjectB]"></div> 

• v-model
  在表单控件或者组件上创建双向绑定。

//v-model绑定输入框的内容给数据源的message
<input v-model="message" >

//在从数据源的message获取数据
<p>Message is: {{ message }}</p>

修饰符：

1. v-model.lazy = "message"并不会实时显示，而是在输入框失去焦点的时候会显示。
2. v-model.number ,输入的内容是数字才会显示，非数字不予显示。
3. v-model.trim 去空格。输入多少个空格都不予显示。

• v-slot(缩写#)
  插槽
  Vue.js 你需要知道的 v-slot （译)

• v-pre
  原样输出。

//跳过这个元素和它的子元素的编译过程。跳过大量没有指令的节点会加快编译。
// 原样输出：{{ this will not be compiled }}
<span v-pre>{{ this will not be compiled }}</span>

• v-clock
  渲染完成之后才显示。

指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none }一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

[v-cloak] { display: none;}

<div v-cloak> {{ message }}</div>
不会显示，直到编译结束。

• v-once
  只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

<span v-once>This will never change: {{msg}}</span>