六、Vue基本指令

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;

    } 

}

} ) .,

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容