1、v-cloak
v-cloak 不需要表达式，它会在Vue 实例结束编译时从绑定的HTML 元素上移除， 经常和css的display: none；配合使用；
<div id=” app ” v-cloak>
{{message ))
</div>
加了指令v-cloak ，但其实并没有起到任何作用，当网速较慢、Vue.js 文件还没加载完时，在页面上会显示｛ { message } ｝的字样，直到Vue 创建实例、编译模板时， DOM 才会被替换，所以这个过程屏幕是有闪动的。只要加一句css 就可以解决这个问题了：
[v-cloak] {
display: none;
}
在一般情况下， v-cloak 是一个解决初始化慢导致页面闪动的最佳实践，对于简单的项目很实用，但是在具有工程化的项目里，比如后面进阶篇将介绍web pack 和vue-router 时，项目的HTML结构只有一个空的div 元素，剩余的内容都是由路由去挂载不同组件完成的，所以不再需要v-cloak。
2、v-once
v-once 也是一个不需要表达式的指令，作用是定义它的元素或组件只渲染一次，包括元素或组件的所有子节点。首次渲染后，不再随数据的变化重新渲染，将被视为静态内容；
3、v-if、v-else-if 、v-else
这个就不多介绍了，没什么说的
4、v-show
用法与v-if 基本一致，只不过v -show 是改变元素的css 属性di splay 。当v-show 表达式的值为false 时， 元素会隐藏，查看DOM 结构会看到元素上加载了内联样式display : none;
v-show 不能叫<template>上使用；
v-if 和v-show 具有类似的功能，不过v-if 才是真正的条件渲染，它会根据表达式适当地销毁或重建元素及绑定的事件或子组件。若表达式初始值为false ，则一开始元素／组件并不会渲染，只有当条件第一次变为真时才开始编译。
而v-show 只是简单的css 属性切换，无论条件真与否，都会被编译。相比之下， v-if 更适合条件不经常改变的场景，因为它切换开销相对较大，而v-show 适用于频繁切换条件。
5、v-for
<ul>
<li v-for ＝ ” item in books ” >{ { book.name } }</li>
<li v-for= ”(book , index) in books ” >{{ index}} - {{book . name })</li>
</ ul>
除了数组外， 对象的属性也是可以遍历的；遍历对象属性时，有两个可选参数，分别是键名和索引；
6、数组更新
Vue 包含了一组观察数组变异的方法，使用它们改变数组也会触发视图更新：
• push()
• pop()
• shift()
• unshift（）
• splice()
• sort（）
• reverse()
使用以上方法会改变被这些方法调用的原始数组，有些方法不会改变原数组，例如：
• filter()
• concat()
• slice()
Vue 在检测到数组变化时，并不是直接重新渲染整个列表，而是最大化地复用DOM 元素。替换的数组中，含有相同元素的项不会被重新渲染，因此可以大胆地用新数组来替换旧数组，不用担心性能问题。
需要注意的是，以下变动的数组中， Vue 是不能检测到的，也不会触发视图更新：
• 通过索引直接设置项，比如app.books[3] = { ... }.
• 修改数组长度，比如叩p.books.length = 1 .
7、数组过滤和排序
computed : {
filterBooks: function () {
return this.books.filter(function (book) {
return book.name.match(/JavaScript/);
}
}，
sortedBooks: function () {
return this.books.sort(function (a, b) {
return a. name.length < b.name.length;
}
}
} ) .,
网友评论