012 V v-cloak & v-once

不二如是

                               
登录/注册后可看大图

上一讲我们搞定了绑定内联样式，本次来学习两个基本指令。

v-cloak不需要表达式，会在Vue实例结束编译时从绑定的HTML元素上移除。

用来解决初始化慢导致页面闪动的问题。

经常和display:none配合使用。

创建div：

<div id="myApp" v-cloak>
    {{message}}
</div>

创建Vue实例：

<script>
    var app = new Vue({
        el:"#myApp",
        data:{
            message:"我爱鱼C"
        }
    })
</script>

这时虽然已经添加了v-cloak指令，但是没有任何效果。

当网速很慢，Vue.js文件没有被加载时，会显示message的内容：

直到Vue创建实例、编译模板时，DOM才会被替换。

所以这个屏幕会有闪动，只需要加一句CSS即可：

<style>
        [v-cloak]{
            display: none;
        }
    </style>

对于简单的项目很实用，但是在具有工程级别的中（webpack，路由...），项目的HTML结构中只有一个空的div元素。

剩下的内容都是由路由去挂载不同的组建来完成，v-cloak就不再适合了。

---

v-once

v-once也是一个不需要表达式的指令，用来定义元素或组件只渲染一次。

包括元素或组件的所有子节点。

首次渲染后，不再随数据的变化而重新渲染，简称静态内容。

创建div：

<div id="myApp">
    <span v-once>{{message}}</span>
</div>

Vue实例不变，v-once用的很少，往往在需要进一步优化性能时，才会用到。

---

课后作业


1、v-cloak用来解决什么问题？

2、v-once用来定义渲染多次组件？（T/F）

3、什么是静态内容？



答案：

游客，如果您要查看本帖隐藏内容请回复

---

如果有收获，别忘了评分 ：

                               
登录/注册后可看大图

这位鱼油，如果喜欢Vue，请订阅 专辑（传送门）（不喜欢更要订阅 ）

                               
登录/注册后可看大图

Ruide

1.解决初始化慢导致的页面闪动的问题
2.F
3.静态内容即初次渲染后，不随数据变化而重新渲染

优时风

1

一笙彤

0

suweixuan1998

1.初始化慢导致页面闪动的问题
2.F
3.一次渲染后就不再渲染的内容