插值：

文本：

數據綁定最常見的形式就是使用 “Mustache” 語法（雙大括號）的文本插值，雙大括號會將數據解析成純文本

Mustache 標簽將會被替代為對應數據對象上 msg 屬性的值。無論何時，綁定的數據對象上 msg 屬性發生了改變，插值處的內容都會更新

純HTML:

雙大括號會將數據解釋為純文本，而非 HTML 。為了輸出真正的 HTML ，你需要使用 v-html 指令

被插入的內容都會被當做 HTML —— 數據綁定會被忽略

使用 JavaScript 表達式：

除了綁定簡單的鍵值，Vue.js 都提供了完全的 JavaScript 表達式支持

這些表達式會在所屬 Vue 實例的數據作用域下作為 JavaScript 被解析。有個限制就是，每個綁定都只能包含單個表達式，所以下面的例子都不會生效

過濾器：

Vue.js 允許你自定義過濾器，來實現一些常見的文本格式化功能。過濾器應該被添加在 mustache 插值的尾部，由“管道符”標識出來

過濾器可以串聯

過濾器是 JavaScript 函數，因此可以接受參數

指令：

指令（Directives）是帶有 v- 前綴的特殊屬性。指令屬性的值預期是單一 JavaScript 表達式（除了 v-for，之后再討論）。指令的職責就是當其表達式的值改變時相應地將某些行為應用到 DOM 上

參數：

一些指令能接受一個“參數”，在指令后以冒號指明。例如， v-bind 指令被用來響應地更新 HTML 屬性

在這里 href 是參數，告知 v-bind 指令將該元素的 href 屬性與表達式 url 的值綁定

修飾符：

修飾符（Modifiers）是以半角句號 . 指明的特殊后綴，用于指出一個指定應該以特殊方式綁定

v-bind：

v-bind就是用來給屬性動態綁定屬性值的指令，可以是一個或多個特性，或一個組件的prop到表達式，縮寫為”:”

<div v-bind:src="imageSrc"></div>就是將div的src屬性動態的和imageSrc綁定在了一起

v-model:

v-model就是用來在表單控件或者組件控件上創建數據雙向綁定的指令

總結

以上是生活随笔為你收集整理的Vue基础之Vue模板语法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。