首頁

web前端

Vue.js

深入淺析Vue中的範本語法：插值和指令

青灯夜游

Nov 17, 2021 pm 07:42 PM

vue

這篇文章帶大家了解Vue中的範本語法，介紹一下插值語法、指令語法。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。

深入淺析Vue中的範本語法：插值和指令

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

1. 模板的理解

我們先來理解要理解什麼是模板？

範本就是動態html頁面，這裡麵包含了一些js語法程式碼

Vue的範本語法分成兩種，分別是：

【插值語法】雙大括號表達式（「Mustache」語法）【一個】
【指令語法】指令（以v-開頭的自訂標籤屬性）【很多】

1、插值語法：

功能：用於解析標籤體內容，向頁面輸出資料
寫法：{{xxx}}，xxx是js表達式，且可以直接讀取到data中的所有屬性，可以呼叫物件的方法
備註：裡面寫js表達式：有傳回值的js程式碼，而不是js語句

#2、指令語法：

功能：用於解析標籤（包括：標籤屬性、標籤體內容、綁定事件.....）
範例：v-bind:href="xxx"### 或簡寫為:href ="xxx"###，xxx同樣要寫js表達式，並且可以直接讀取到data中的所有屬性#備註：Vue中有很多的指令，且形式都是：

vue.js教程

》】#下面我們來介紹幾個常用的指令文法.

2. 指令語法：強制資料綁定

v-bind:

#功能：指定變化的屬性值

完整寫法

v-bind:xxx=&#39;yyy&#39;  // yyy会作为表达式解析执行

簡潔寫法

:xxx=&#39;yyy&#39;

單向資料綁定

v-bind:href ="xxx"
或簡寫為:href ="xxx"#

v-model

v-mode:value="xxx"### 或簡稱為
v -model="xxx"
特點：資料不僅能從data 流向頁面，還能從頁面流向data
3 . 指令語法：綁定事件監聽

功能：綁定指定事件名的回呼函數

完整寫法

v-on:click=&#39;xxx&#39;
v-on:keyup=&#39;xxx(参数)&#39;
v-on:keyup.enter=&#39;xxx&#39;

簡潔寫法

@click=&#39;xxx&#39;
@keyup=&#39;xxx&#39;
@keyup.enter=&#39;xxx&#39;

4. v-text與v-html

#v-text

##作用：向其所在的節點渲染文字內容。

與內插語法的差異：
v-text
{{xx}}
則不會。
v-html

1、作用：在指定節點中渲染包含html結構的內容。 2、與內插語法的差異：

(1).

v-html

會取代節點中所有的內容，

則不會。 (2).v-html可以辨識html結構。
3、嚴重註意：v-html

(1). 在網站上動態渲染任意HTML是非常危險的，容易導致XSS攻擊。

(2). 一定要在可信的內容上使用

，永遠不要用在使用者提交的內容上！

<body>
    <div id=&#39;app&#39;>

        <h2 id="nbsp-大括号表达式">1. 大括号表达式</h2>
        <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>


        <h2 id="nbsp-指令一-nbsp-强制数据绑定">2. 指令一： 强制数据绑定</h2>
        <img src="/static/imghwm/default1.png"  data-src="imgUrl"  class="lazy"   alt="Vue">  <!--无法显示图片，没有识别成js表达式 -->
        <img src="/static/imghwm/default1.png"  data-src="imgUrl"  class="lazy"  v-bind: alt="Vue"> <!--属性值识别成js表达式 -->
        <img src="/static/imghwm/default1.png"  data-src="imgUrl"  class="lazy"  : alt="Vue">


        <h2 id="nbsp-指令二-nbsp-绑定事件监听">3. 指令二： 绑定事件监听</h2>
        <button v-on:click="test1">test1</button>
        <button @click="test1">test1</button>
        
        <button @click="test2(&#39;abc&#39;)">test2</button> <!--可以传参数 -->
        <button @click="test2(msg)">test2</button>
    </div>



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

        })
    </script>
</body>

5. 條件渲染指令

深入淺析Vue中的範本語法：插值和指令

#移除標籤刪除

##v -if
v-else

寫法：

#v-if="表達式"

#v-else-if="表達式"
v-else="表達式"
適用於：切換頻率較低的場景。特點：不展示的DOM元素直接被移除。注意：v-if可以和:v-else-if、v-else一起使用，但要求結構不能被「打斷」。

v-show

寫法：

適用於：切換頻率較高的場景。特點：不展示的DOM元素未被移除，僅是使用樣式隱藏掉

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

比较v-if与v-show

v-if是控制元素是否加载到页面上（有性能开销） v-show是控制元素的显示与隐藏（初始创建时加载一次）

如果需要频繁切换 v-show 较好
当条件不成立时, v-if 的所有子节点不会解析

<body>
    <div id="demo">

        <p v-if="ok">成功了</p> <!-- 移除标签删除 -->
        <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: &#39;#demo&#39;,
            data: {
                ok: false,
            }
        })
    </script>
</body>

深入淺析Vue中的範本語法：插值和指令