這篇文章帶大家了解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中有很多的指令，且形式都是：
v-????
【相關推薦：《

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

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

完整寫法

v-bind:xxx='yyy' // yyy会作为表达式解析执行

簡潔寫法

:xxx='yyy'

單向資料綁定

語法：
• v-bind:href ="xxx"

  或簡寫為:href ="xxx"#

特點：資料只能從data 流向頁面
雙向資料綁定指令

語法：
• v-mode:value="xxx"### 或簡稱為

  v -model="xxx"

  特點：資料不僅能從data 流向頁面，還能從頁面流向data

• 3 . 指令語法：綁定事件監聽
v-on:

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

完整寫法

v-on:click='xxx' v-on:keyup='xxx(参数)' v-on:keyup.enter='xxx'

登入後複製

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

#v-text

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

• 與內插語法的差異：

  v-text
會替換掉節點中的內容，
• {{xx}}

  則不會。

  v-html

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

v-html

{{ xx}}
• 則不會。(2).v-html可以辨識html結構。
• 3、嚴重註意：v-html
有安全性問題！ ！ ！ ！

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

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

•  
   
  1. 大括号表达式
   
  {{msg}}
    
  {{msg.toUpperCase()}}
   
    
    
   
  2. 指令一： 强制数据绑定
        
  3. 指令二： 绑定事件监听
   test1 test1 test2  test2 
     

  登入後複製

##v -if

v-else

• 寫法：

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

v-show

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

比较v-if与v-show

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

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

 
 
成功了
  
失败了
 
又成功了
  
又失败了
 切换 
   

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中文網其他相關文章！