资讯专栏INFORMATION COLUMN

Vue.js-内置指令

zzbo / 554人阅读

摘要:如果一次判断的是多个元素,可以在内置的元素上使用条件指令,最终渲染的结果不会包含该元素。列表渲染也支持用代替作为分隔符,它更接近迭代器的语法的表达式支持一个可选参数作为当前项的索引。分隔符前的语句使用括号,第二项就是当前项的索引。

学习笔记:内置指令
内置指令 基本指令 v-cloak

v-cloak不需要表达式,它会在Vue实例结束编译时从绑定的HTML元素上移除,经常和CSS的display: none;配合使用:

{{message}}

当网速较慢、Vue.js文件还没加载完时,在页面上会显示{{message}}的字样,直到Vue创建实例、编译模板时,DOM才会被替换,所以这个过程屏幕有闪。只要加一句CSS就可以解决这个问题:

[v-cloak] {
    display: none;
}

v-cloak是一个解决初始化慢导致页面闪动的最佳实践,对于简单的项目很实用。

在工程化的项目中,项目的HTML结构只有一个空的div元素,剩下的内容都由路由挂载不同组件完成,这时不再需要v-cloak

v-once

v-once是一个不需要表达式的指令,作用是定义它的元素或者组件只渲染一次,包括元素或组件的所有子节点。首次渲染后,不再随数据的变化重新渲染,将被视为静态内容。

v-once在业务中很少使用,如果需要进一步优化性能时,可能会用到。

条件渲染指令 v-ifv-else-ifv-else

Vue.js的条件指令可以根据表达式的值在DOM中渲染或销毁元素/组件。

v-else-if要紧跟v-ifv-else要紧跟v-else-ifv-if,表达式的值为真时,当前元素/组件及所有子节点将被渲染,为假时被移除。

如果一次判断的是多个元素,可以在Vue.js内置的