Vue2.0-3-指令

一、指令类型

【熟练】v-text:渲染普通文本
【熟练】v-html：渲染为浏览器解释的html内容
【熟练】v-bind：绑定数据到属性[自己练习] 例： <span v-bind:   title="msg">

【熟练】v-show: 用于定义元素的显示/隐藏

<button v-on:click="show=!show">点击显示</button>
<div v-show="show">这是一个用来测试v-show指令的内容</div>

【熟练】v-if: 判断-根据表达式的值的真假条件渲染元素，为真显示，为假不显示。
【熟练】v-else: 为 v-if 或者 v-else-if 添加 “else 块”。
限制： 前一兄弟元素必须有 v-if 或 v-else-if。
【熟练】v-else-if: 表示 v-if 的 “else if 块”。可以链式调用。
注：个人理解就同js中的 if(){}...else if(){}....else{} 类似

<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else>
C
</div>

【熟练】v-for：循环  例：  v-for="u in users"
vue2.0中已经移除了 $index 和 $key 这两个隐式声明变量，以便在 v-for 中显式定义。

【熟练】v-on：参考JQuery on---绑定事件   v-on:事件="..."

【熟练】v-model:数据双向绑定【表单元素】
在表单控件元素上创建双向数据绑定
但 v-model 本质上不过是语法糖，
它负责监听用户的输入事件以更新数据，并特别处理一些极端的例子
v-model 并不关心表单控件初始化所生成的值。因为它会选择 Vue 实例数据来作为具体的值。

vue与angular双向绑定的区别







【了解】v-pre: 跳过这个元素和它的子元素的编译过程。

可以用来显示原始 Mustache 标签。

跳过大量没有指令的节点会加快编译。

【了解】v-cloak:确保mastach语法，（ 即{{}} ）在渲染完成之后显示到页面上。适用：有时网速不好的情况下，刷新页面时， {{}}还未被渲染，会在页面显示出来

[使用并不是很多，通常会用v-text进行替换]

例

<div v-cloak>{{info}}</div>

【熟练】v-once: 数据只绑定一次