Vue學習之路第三篇:插值表達式和v-text的區別


上一篇說到插值表達式有一個問題:

頁面頻繁刷新或者網速加載很慢的時候,頁面會先出現“{{ msg }}”,再一閃而過出現真實的數據。

對於這個問題Vue給予了解決辦法,看具體事例。

<div id="app">
        <p v-cloak> {{ msg }} </p>
</div>

節點中我們定義了 Vue 的內置屬性 “v-cloak”

    <style type="text/css">
        [v-cloak]{
            display:none;
        }
    </style>

這里我們定義了樣式:包含屬性“v-cloak”的節點默認隱藏

    <script type="text/javascript">
        var vm = new Vue({
            el : "#app",
            data : {
                msg : "Hello Vue"
            }
        });
    </script>

創建Vue對象,並與id為“app”的節點綁定。

這時如果再在頁面訪問發現:如果頁面加載很慢的時候,不會再出現“{{ msg }}”信息,直接是一片空白,當Vue數據傳遞完成時,會正確顯示數據。

從上面運行截圖可以分析出:

Vue在頁面數據傳遞時,如果一開始插值表達式獲取不到數據,那么包含“v-cloak”屬性的節點就會執行“display:none”樣式,導致頁面什么也看不到,當插值表達式獲取到數據之后,就會在節點中自動移除“v-cloak”屬性,這時樣式也就不起作用了,展示了正常的數據。這時有的看官就會抱怨尤雨溪大神了,整這么多事干嘛?能一下都解決了嗎?

接下來,我們來學習另一個指令:v-text

    <div id="app">
        <p v-cloak> {{ msg }} </p>
        <p v-text="msg"></p>
    </div>

執行代碼

結果完全一樣,頁面元素也一樣。但是這時候你把網速調的很慢會發現,“v-text”這個屬性在頁面數據加載沒完成的時候不會出現“{{ msg }}”的現象。這時候有的看官又會提出質疑,有這個了為什么還要用插值表達式?

且往下看,上代碼:

    <div id="app">
        <p v-cloak> 這是從Vue對象里獲取的數據:{{ msg }} </p>
        <p v-text="msg">這是從Vue對象里獲取的數據:</p>
    </div>

運行結果:

 

 

結論:插值表達式可以把Vue傳遞過來的數據和前台用戶自己定義的數據結合在一起,但是v-text只能顯示Vue對象傳遞過來的數據,會替換掉節點里已有的內容。

 

總結:

1、如果要同時展示用戶前台數據,那么就需要用插值表達式,但是不要忘記和“v-cloak”屬性一起使用哦。

2、如果只是單獨展示Vue對象里的數據,建議使用“v-text”指令。

弄清原理,根據需求,使用對應的解決方法,我想這是學習最高效的途徑!

每天進步一點點!

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM