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;
}
}
} ) .,