Vue学习笔记（三、v-cloak、v-text、v-html指令）

一、 v-cloak

v-cloak 是 Vue.js 提供的一个特殊指令，用于在 Vue 实例准备完毕并开始进行 DOM 编译之前隐藏未编译的模板。它通常用于防止页面闪烁或者展示未编译的 Vue 模板语法。

你可以简单地在 HTML 元素上添加 v-cloak 指令，然后在确保 Vue 实例已经编译完成之前，通过 CSS 隐藏这些元素。当 Vue 实例编译完成后，会自动移除 v-cloak 属性，从而显示内容。

在下面的代码中，我们把Vue.js的引入放到了p元素之后，这样p元素在vue.js引入之前会渲染为"{{msg}}"，等vue.js引入之后才会渲染为"Vue的基础代码学习"，我们称之为一种"闪烁"现象，如果感受不到这个问题，可以把浏览器调整为慢速3G感受一下。

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>VueBaseCode</title>
</head>

<body>

    <div id="app">
        <p>{{msg}}</p>
    </div>
    
    <script src="./lib/vue.js"></script>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'Vue的基础代码学习'
            }
        });
    </script>
</body>

</html>

为了解决这个问题，我们先是在style中定义了v-cloak指令：

html 复制代码

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

然后在p元素中使用了这个指令：

html 复制代码

 <p  v-cloak>{{msg}}</p>

完整代码如下：

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>VueBaseCode</title>
</head>

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

<body>

    <div id="app">
        <p  v-cloak>{{msg}}</p>
    </div>
    
    <script src="./lib/vue.js"></script>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'Vue的基础代码学习'
            }
        });
    </script>
</body>

</html>

这样再vue.js加载完成之间，p元素会处于隐藏状态。

二、v-text

先看代码：

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>VueBaseCode</title>
</head>

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

<body>

    <div id="app">
        <p  v-cloak>{{msg}}++{{msg}}</p>
        <h4  v-text="msg"></h4>
    </div>
    
    <script src="./lib/vue.js"></script>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'Vue的基础代码学习'
            }
        });
    </script>
</body>

</html>

在上面代码中h4中使用了v-text指令，其值为"msg"，对应vm对象中data中的msg，同时h4中文本为空，这种情况下，h4元素在vue.js加载完成的情况下并不显示任何内容，直到vue.js加载完成之后，通过v-text="msg"指令获得了msg的值才被渲染出来，所以不存在闪烁问题。

但是p中包含的内容可以反复引用msg变量，同时可以添加其他内容，这也是v-text无法实现的，同时使用v-text时，当vue.js引入之后，h4之内的原始文本（假如有原始文本的话）会被msg的值替换掉。

三、v-html

参考代码如下：

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>VueBaseCode</title>
</head>

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

<body>

    <div id="app">
        <p  v-cloak>{{msg}}++{{msg}}</p>
        <h4  v-text="msg"></h4>
        
        <p>{{msg2}}</p>
        <p v-text="msg2"></p>
        <p v-html="msg2"></p>
    </div>
    
    <script src="./lib/vue.js"></script>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'Vue的基础代码学习',
                msg2:"<h1>这是一个大标题</h1>"
            }
        });
    </script>
</body>

</html>

在上面的代码中只有

html 复制代码

 <p v-html="msg2"></p>

这一行能够把msg2的变量值当作html元素解析，其前面两种都是作为字符串直接输出的。