1. 模板的理解

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

#v-text

1. 大括号表达式

2. 指令一：强制数据绑定

3. 指令二：绑定事件监听

比较v-if与v-show

6. 总结

首頁

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/imghw/default1.png"  data-src="imgUrl"  class="lazy"   alt="Vue">  <!--无法显示图片，没有识别成js表达式 -->
        <img src="/static/imghw/default1.png"  data-src="imgUrl"  class="lazy"  v-bind: alt="Vue"> <!--属性值识别成js表达式 -->
        <img src="/static/imghw/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中的範本語法：插值和指令

6. 总结

一些常用的指令

v-text : 更新元素的 textContent
v-html : 更新元素的 innerHTML
v-if : 如果为true, 当前标签才会输出到页面
v-else: 如果为false, 当前标签才会输出到页面
v-show : 通过控制display样式来控制显示/隐藏
v-for : 遍历数组/对象
v-on : 绑定事件监听, 一般简写为@
v-bind : 强制绑定解析表达式, 可以省略v-bind
v-model : 双向数据绑定
ref : 为某个元素注册一个唯一标识, vue对象通过$refs属性访问这个元素对象
v-cloak : 使用它防止闪现表达式, 与css配合: [v-cloak] { display: none }

更多编程相关知识，请访问：编程入门！！

以上是深入淺析Vue中的範本語法：插值和指令的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

gmail信箱登陸入口在哪裡

7804

Java教學

1645

CakePHP 教程

1402

Laravel 教程

1300

PHP教程

1236

Related knowledge

vue中怎麼用bootstrap Apr 07, 2025 pm 11:33 PM

在 Vue.js 中使用 Bootstrap 分為五個步驟：安裝 Bootstrap。在 main.js 中導入 Bootstrap。直接在模板中使用 Bootstrap 組件。可選：自定義樣式。可選：使用插件。

vue怎麼給按鈕添加函數 Apr 08, 2025 am 08:51 AM

可以通過以下步驟為 Vue 按鈕添加函數：將 HTML 模板中的按鈕綁定到一個方法。在 Vue 實例中定義該方法並編寫函數邏輯。

vue中的watch怎麼用 Apr 07, 2025 pm 11:36 PM

Vue.js 中的 watch 選項允許開發者監聽特定數據的變化。當數據發生變化時，watch 會觸發一個回調函數，用於執行更新視圖或其他任務。其配置選項包括 immediate，用於指定是否立即執行回調，以及 deep，用於指定是否遞歸監聽對像或數組的更改。

vue多頁面開發是啥意思 Apr 07, 2025 pm 11:57 PM

Vue 多頁面開發是一種使用 Vue.js 框架構建應用程序的方法，其中應用程序被劃分為獨立的頁面：代碼維護性：將應用程序拆分為多個頁面可以使代碼更易於管理和維護。模塊化：每個頁面都可以作為獨立的模塊，便於重用和替換。路由簡單：頁面之間的導航可以通過簡單的路由配置來管理。 SEO 優化：每個頁面都有自己的 URL，這有助於搜索引擎優化。