Vue學習筆記二：v-cloak，v-text，v-html的使用

時間 2020-06-07

標籤 vue 學習筆記 cloak text html 使用欄目 HTML 简体版

原文原文鏈接

[TOC]javascript

愈來愈感受，Vue學起來頗有意思html

v-cloak：解決插值表達式閃爍問題

先來寫一個HTML，以下vue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vae</title>
    

</head>
<body>
    
    <!-- 這個div就是MVVM中的V，View -->
    <div id="app">
        <p>{{ msg }}</p>
    </div>

    <script type="text/javascript" src="../lib/vue-2.6.10.js"></script>


    <script>
        // 這個vm就是MVVM中的VM，ViewModel
        var vm=new Vue({
         el: '#app',
        //  這個data就是MVVM中的M，Model
         data: {
            msg: '許嵩'
            }
        }) 
    </script>

</body>
</html>

能夠看到，我把Vue.js的引用放到div下面了，這樣是爲了更好的重現插值表達式閃爍的狀況。java

安裝插件Live Server

我要模擬網絡環境，本地確定不行，因此咱們下載安裝一個插件Live Server瀏覽器

看這個插件的開發者化的括號和箭頭我就知道，這是一個有趣的人:joy:網絡

右鍵以HTTP形式運行HTML

講個好玩的東西，在瀏覽器能夠模擬網速慢的狀況，點擊F12以後，能夠把網絡環境模擬爲慢速3G，如圖app

很不錯，如今你刷新一下就會看到瀏覽器上顯示的先是{{ msg }}，而後纔是許嵩spa

{{ msg }}這個就是Vue的插值表達式，能夠理解爲佔位符。爲了避免讓這個插值表達式顯示出來，咱們可使用v-cloak這個指令，加上v-cloak的HTML以下插件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    

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

</head>
<body>
    
    <!-- 這個div就是MVVM中的V，View -->
    <div id="app">
        <p v-cloak>{{ msg }}</p>
    </div>

    <script type="text/javascript" src="../lib/vue-2.6.10.js"></script>


    <script>
        // 這個vm就是MVVM中的VM，ViewModel
        var vm=new Vue({
         el: '#app',
        //  這個data就是MVVM中的M，Model
         data: {
            msg: '許嵩'
            }
        }) 
    </script>

</body>
</html>

很明顯，我改了兩個地方，一個是p標籤加了v-cloak，一個是在style樣式裏面寫了，有v-cloak指令的就隱藏不顯示。這樣就達到了插值表達式隱藏的目的。3d

v-text：以屬性方式使用插值表達式

這個v-text就厲害了，自己就解決了插值表達式的閃爍問題，由於他是使用的屬性的方式。HTML再次修改以下：我只修改了div部分，其餘的不貼了，沒改其餘部分

<div id="app">

        <!-- v-cloak方式 -->
        <p v-cloak>{{ msg }}</p>

        <!-- v-text方式 -->
        <p v-text="msg"></p>
    </div>

你看看瀏覽器，效果是如出一轍的，你把style裏面的v-cloak註釋了還會發現，v-cloak方式有閃爍，v-text方式沒有閃爍。

v-cloak方式先後寫的東西都會出現，v-text方式寫的內容會被插值表達式覆蓋，例如

<div id="app">

        <!-- v-cloak方式 -->
        <p v-cloak>哈哈 {{ msg }} 許嵩來了</p>

        <!-- v-text方式 -->
        <p v-text="msg">許嵩說菜糊了不來了</p>
    </div>

我在兩種方式的p元素內都加了文字，看看瀏覽器的效果

在加載中的時候，v-cloak方式因爲被我隱藏了因此只有v-text方式顯示了內容

可是一旦加載完Vue的js文件，v-cloak方式插值表達式先後的內容都會顯示，而v-text方式裏的內容會被覆蓋

v-cloak和v-text的區別

v-text自己解決了插值表達式閃爍的問題
v-cloak顯示先後內容，v-text會覆蓋

v-html:解決html展現問題

修改的HTML以下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    

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

</head>
<body>
    
    <!-- 這個div就是MVVM中的V，View -->
    <div id="app">

        <!-- v-cloak方式 -->
        <p v-cloak>哈哈 {{ msg }} 許嵩來了</p>

        <!-- v-text方式 -->
        <p v-text="msg">許嵩說菜糊了不來了</p>

        <!-- v-html方式 -->
        <p v-html="msg2"></p>
    </div>

    <script type="text/javascript" src="../lib/vue-2.6.10.js"></script>


    <script>
        // 這個vm就是MVVM中的VM，ViewModel
        var vm=new Vue({
         el: '#app',
        //  這個data就是MVVM中的M，Model
         data: {
            msg: '許嵩',
            msg2:"<h1>你們好，我是Vae</h1>"
            }
        }) 
    </script>

</body>
</html>

能夠看到個人data裏面寫了一個新的msg2，內容確實HTML格式的，這種狀況下只能使用v-html指令來展現

其餘的方式展現的都是文本，只能使用v-html

防盜連接：本博客由蜀雲泉發表