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: 数据只绑定一次