該筆記主要記錄vue常用的插值操作和mustache操作，對這些插值操作做一些對比比較，方便參考使用。
將指定的值插入到指定的dom元素中，就叫做插值操作，比如將使用者名稱寫入乙個指定的span中。
mustache語法：在vue中經常看到的}這種形式的表達方式，就是mustache語法。（具體介紹請參考其他文章，這裡不做詳細描述）
計算語法
使用場景
注意事項
普通}顯示簡單的或者固定的值
盡量不要用於顯示需要大量計算的值
v-once
當某乙個值只需要顯示初始狀態值，並且不希望動態被修改的時候就可以使用該指令
v-once指令只需要寫到指定的dom標籤中即可，後面不帶其他表示式
v-html
用於插入需要被瀏覽器渲染的html**塊
v-html指令寫在dom標籤中並且指定對應的變數值
被拋棄的v-text
v-text的作用和}作用相同
因為v-text沒有}靈活，不能進行運算或拼接，所以一般不使用
v-pre
將標籤中的內容原原本本的展示出來，主要用於展示**塊資訊
參考html5的pre標籤
v-cloak
用於處理在vue解析之前的時候做的事情
需要定義v-cloak相關的樣式
這種直接使用mustache語法將某乙個變數值插入到乙個dom中的做法，就是最基本的插值操作。varname是data中的某乙個已經存在的變數名(比較簡單，這裡就不做**演示)。
此外，因為mustache語法中引用的是js的變數，所以在mustache表示式中，也可以做一些js一樣的簡單運算，比如：} 就會按照js的方式進行計算並返回顯示。
說明資訊見總覽表，這給出乙個演示**。
lang
="en"
>
>
charset
="utf-8"
>
name
="viewport"
content
="width=device-width, initial-scale=1.0"
>
>
documenttitle
>
src=
"">
script
>
head
>
>
>
>
}h2>
v-once
>
}h2>
div>
>
newvue(}
)script
>
body
>
html
>
lang
="en"
>
>
charset
="utf-8"
>
name
="viewport"
content
="width=device-width, initial-scale=1.0"
>
>
documenttitle
>
src=
"">
script
>
head
>
>
>
"content"
v-html
='htmlcontent'
>
div>
div>
>
newvue(}
)script
>
body
>
html
>
2. 同v-once一樣，v-pre也不需要引數
lang
="en"
>
>
charset
="utf-8"
>
name
="viewport"
content
="width=device-width, initial-scale=1.0"
>
>
documenttitle
>
src=
"">
script
>
head
>
>
>
v-pre
>
}h2>
div>
>
newvue(}
)script
>
body
>
html
>
vue在渲染後會自動刪除v-cloak指令
實際開發中其實也很少使用，因為實際開發中基本都是元件化開發，元件會被封裝成函式的形式，所以基本不會出現上述情況。
lang
="en"
>
>
charset
="utf-8"
>
name
="viewport"
content
="width=device-width, initial-scale=1.0"
>
>
documenttitle
>
src=
"">
script
>
>
[v-cloak]
style
>
head
>
>
>
v-cloak
>
}h2>
div>
>
/* 為了能達到演示效果，所以在延遲一秒後才開始建立vue例項並解析，而在解析之前v-cloak指令被賦予了display: none的屬性，所以在渲染之前在瀏覽器中看不到h2中的內容。
而在vue渲染後，v-cloak指令被刪除，h2就會顯示出來，但是因為渲染工作已經完成，所以瀏覽器上就看不到**模樣了。想要看到**在頁面中顯示的樣子，只需要刪除v-cloak後重新整理頁面即可，或者修改style中的樣式資訊。
*/settimeout
(function()
})},
1000
)script
>
body
>
html
>
vue 插值操作
mustache語法 雙大括號語法 用於將data中的文字資料插入到html中，可以寫變數，也可以寫簡單的表示式，並且是響應式的。data 2.v once v once後不跟任何表示式，當不想讓資料是響應式的時候使用，表示元素只渲染一次，不會隨著資料的改變而改變 data 3.v html 將內容...
vue 插值操作
vue.js 的核心是乙個允許採用簡潔的模板語法來宣告式地將資料渲染進 dom 的系統 mustache鬍子語法 雙大括號語法 直接用 將data中的值寫入頁面中 data v html 若後台返回的資料為html標籤內容，如，寫成如下 會直接在頁面顯示 data 但其實我們想顯示的為乙個超連結，所...
vue學習筆記 插值操作
指令概述 mustache指令 即大括號語法，其中不僅可以直接寫變數還可以寫簡單的表示式 指令 作用v once 保留第一次的設定 v html 對內容以html 的方式解析 v text 展示文字 v pre 將內容原封不動的展示出來 v cloak 解決螢幕閃動或顯示vue源 問題 v once...