怎么理解Vue中的模板語法插值和指令

本篇內(nèi)容主要講解“怎么理解Vue中的模板語法插值和指令”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“怎么理解Vue中的模板語法插值和指令”吧!

創(chuàng)新互聯(lián)主營綏濱網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,app軟件開發(fā)公司,綏濱h5小程序開發(fā)搭建,綏濱網(wǎng)站營銷推廣歡迎綏濱等地區(qū)企業(yè)咨詢

怎么理解Vue中的模板語法插值和指令

Vue有很多模板語法特別好用，就是在HTML中寫一些Vue定義的一些模板語法，可以快速的展現(xiàn)數(shù)據(jù)，綁定方法等。這也就是Vue上手很快的原因之一。

1. 模板的理解

我們先來理解理解什么是模板？

模板就是動態(tài)html頁面，這里面包含了一些js語法代碼

Vue的模板語法分為兩種，分別是：

  • 【插值語法】雙大括號表達(dá)式 （“Mustache”語法）【一個】

  • 【指令語法】指令（以v-開頭的自定義標(biāo)簽屬性）【很多】

1、插值語法：

  • 功能：用于解析標(biāo)簽體內(nèi)容，向頁面輸出數(shù)據(jù)

  • 寫法：{{xxx}}，xxx是js表達(dá)式，且可以直接讀取到data中的所有屬性，可以調(diào)用對象的方法

  • 備注：里面寫js表達(dá)式：有返回值的js代碼，而不是js語句

2、指令語法：

  • 功能：用于解析標(biāo)簽（包括：標(biāo)簽屬性、標(biāo)簽體內(nèi)容、綁定事件.....）

  • 舉例：v-bind:href="xxx" 或  簡寫為 :href="xxx"，xxx同樣要寫js表達(dá)式，且可以直接讀取到data中的所有屬性

  • 備注：Vue中有很多的指令，且形式都是：v-????

下面我們來介紹幾個常用的指令語法。

2. 指令語法：強(qiáng)制數(shù)據(jù)綁定 v-bind:

功能：指定變化的屬性值

完整寫法

v-bind:xxx='yyy'  // yyy會作為表達(dá)式解析執(zhí)行

簡潔寫法

:xxx='yyy'

單向數(shù)據(jù)綁定

  • 語法：v-bind:href ="xxx" 或簡寫為 :href ="xxx"

  • 特點：數(shù)據(jù)只能從 data 流向頁面

雙向數(shù)據(jù)綁定 指令 v-model

  • 語法：v-mode:value="xxx" 或簡寫為 v-model="xxx"

  • 特點：數(shù)據(jù)不僅能從 data 流向頁面，還能從頁面流向 data

3. 指令語法：綁定事件監(jiān)聽 v-on:

功能：綁定指定事件名的回調(diào)函數(shù)

完整寫法

v-on:click='xxx'
v-on:keyup='xxx(參數(shù))'
v-on:keyup.enter='xxx'

簡潔寫法

@click='xxx'
@keyup='xxx'
@keyup.enter='xxx'

4. v-text與v-html

v-text

  • 作用：向其所在的節(jié)點中渲染文本內(nèi)容。

  • 與插值語法的區(qū)別：v-text會替換掉節(jié)點中的內(nèi)容，{{xx}}則不會。

v-html

1、作用：向指定節(jié)點中渲染包含html結(jié)構(gòu)的內(nèi)容。

2、與插值語法的區(qū)別：

  • (1).v-html會替換掉節(jié)點中所有的內(nèi)容，{{xx}}則不會。

  • (2).v-html可以識別html結(jié)構(gòu)。

3、嚴(yán)重注意：v-html有安全性問題?。。?！

  • (1). 在網(wǎng)站上動態(tài)渲染任意HTML是非常危險的，容易導(dǎo)致XSS攻擊。

  • (2). 一定要在可信的內(nèi)容上使用v-html，永不要用在用戶提交的內(nèi)容上！

<body>
    <div id='app'>

        <h3>1. 大括號表達(dá)式</h3>
        <p>{{msg}}</p>    <!--textContent -->
        <p>{{msg.toUpperCase()}}</p>

        <p v-html="msg"></p> <!--innerHTML -->

        <p v-text="msg"></p> <!--textContent -->
        <p v-text="msg.toUpperCase()"></p>


        <h3>2. 指令一： 強(qiáng)制數(shù)據(jù)綁定</h3>
        <img src="imgUrl" alt="Vue">  <!--無法顯示圖片，沒有識別成js表達(dá)式 -->
        <img v-bind:src="imgUrl" alt="Vue"> <!--屬性值識別成js表達(dá)式 -->
        <img :src="imgUrl" alt="Vue">


        <h3>3. 指令二： 綁定事件監(jiān)聽</h3>
        <button v-on:click="test1">test1</button>
        <button @click="test1">test1</button>
        
        <button @click="test2('abc')">test2</button> <!--可以傳參數(shù) -->
        <button @click="test2(msg)">test2</button>
    </div>



    <script src="../js/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg: '<a href="http:www.baidu.com">I Will Back!</a>',
                imgUrl: "https://cn.vuejs.org/images/logo.png"
            },
            methods: {
                test1() {
                    alert('heheh');
                },
                test2(content){
                    alert(content);
                }
            }

        })
    </script>
</body>

5. 條件渲染指令

移除標(biāo)簽刪除

  • v-if

  • v-else

寫法：

  1. v-if="表達(dá)式"

  2. v-else-if="表達(dá)式"

  3. v-else="表達(dá)式"

適用于：切換頻率較低的場景。 特點：不展示的DOM元素直接被移除。 注意：v-if可以和:v-else-if、v-else一起使用，但要求結(jié)構(gòu)不能被“打斷”。

添加樣式隱藏（display: none）

  • v-show

寫法：v-show="表達(dá)式"適用于：切換頻率較高的場景。 特點：不展示的DOM元素未被移除，僅僅是使用樣式隱藏掉

【備注】使用v-if的時候，元素可能無法獲取到，而使用v-show一定可以獲取到。

比較v-if與v-show

v-if是控制元素是否加載到頁面上（有性能開銷） v-show是控制元素的顯示與隱藏 （初始創(chuàng)建時加載一次）

  • 如果需要頻繁切換 v-show 較好

  • 當(dāng)條件不成立時, v-if 的所有子節(jié)點不會解析

<body>
    <div id="demo">

        <p v-if="ok">成功了</p> <!-- 移除標(biāo)簽刪除 -->
        <p v-else>失敗了</p>

        <p v-show="ok">又成功了</p> <!-- 添加樣式隱藏 -->
        <p v-show="!ok">又失敗了</p>

        <button @click="ok = !ok">切換</button>
    </div>

    <script src="../js/vue.js"></script>
    <script>
        new Vue({
            el: '#demo',
            data: {
                ok: false,
            }
        })
    </script>
</body>

6. 總結(jié)

一些常用的指令

  • v-text : 更新元素的 textContent

  • v-html : 更新元素的 innerHTML

  • v-if : 如果為true, 當(dāng)前標(biāo)簽才會輸出到頁面

  • v-else: 如果為false, 當(dāng)前標(biāo)簽才會輸出到頁面

  • v-show : 通過控制display樣式來控制顯示/隱藏

  • v-for : 遍歷數(shù)組/對象

  • v-on : 綁定事件監(jiān)聽, 一般簡寫為@

  • v-bind : 強(qiáng)制綁定解析表達(dá)式, 可以省略v-bind

  • v-model : 雙向數(shù)據(jù)綁定

  • ref : 為某個元素注冊一個唯一標(biāo)識, vue對象通過$refs屬性訪問這個元素對象

  • v-cloak : 使用它防止閃現(xiàn)表達(dá)式, 與css配合: [v-cloak] { display: none }

到此，相信大家對“怎么理解Vue中的模板語法插值和指令”有了更深的了解，不妨來實際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

網(wǎng)站欄目：怎么理解Vue中的模板語法插值和指令
瀏覽地址：http://muchs.cn/article18/ieppdp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開發(fā)、Google、服務(wù)器托管、網(wǎng)站策劃、網(wǎng)站內(nèi)鏈、用戶體驗

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

搜索引擎優(yōu)化