vue学习总结(二)-指令详解

指令是带有特殊前缀"v-"的HTML特性，它绑定一个表达式，并将一些特性用在DOM上。

内置指令

v-bind

v-bind主要用法是动态更新HTML元素上的属性。常见的比如class及style。
绑定class的方式

• v-bind:class设置一个对象，可以动态切换class.如：

...
<div :class="{'active' : isActive}"></div>
<script>
var app = new Vue({
     el : "#app",
     data : {
        isActive : true
     }
})
</script>

当条件过长或者逻辑复杂可以绑定在计算属性上。

• 数组语法

<div :class="[activeCls, errorCls]"></div>
<script>
var app = new Vue({
    el : "#app",
    data : {
        activeCls : "active",
        errorCls : "error"
    }
})

数组中可使用三元表达式切换class，也可在其中使用对象语法。
绑定内联样式v-bind:style，与class类似，也有对象语法和数组语法，
在组件上写class :class或者style :style时,规则会直接应用到这个组件的根元素上。

v-cloak

v-cloak不需要表达式，会在Vue实例结束编译时从绑定的HTML元素上移除，通常和css display:none配合使用。在网速较慢，Vue.js文件未加载玩是，页面可能会出现{{message}}的字样，直接Vue创建实例编译模板，DOM才会替换，屏幕在这个过程会有闪动。
v-cloak是一个解决初始化慢导致页面闪动的最佳实践，对于简单项目有用，但对于复杂项目，例如结合webpack使用时，html结构只有一个空div元素，内容由挂载不同组件完成，故不需要使用。

v-once

不需要表达式，定义它的元素或组件只渲染一次，包括元素或组件的所有子节点，首次渲染后不在随数据的变化重新渲染，将被视为静态内容。

v-if、v-else-if、v-else

v-else-if要紧跟v-if，v-else要紧跟v-else-if或v-if,表达式为真时当前元素/组件及子节点将被渲染，为假时移除。如果一次判断多个元素可以在Vue内置