一、資料繫結
Vue。js 的核心是一個允許採用簡潔的模板語法來宣告式地將資料渲染進 DOM 的系統:
{{ msg }} 為什麼會變成 msg 的值?vue 使用基本 html 的模板語法,允許開發者宣告式地將DOM 繫結至底層 vue 例項的資料,所有 vue 模板都是合法的 html,所以能被遵循規範的瀏覽器和 html 解析器解析。
二、模板語法
2.1、mustache語法
mustache 翻譯為中文,是鬍子/鬍鬚。由於 {{ msg }} 兩邊都有對稱的大括號,就像人的鬍鬚一樣,所以就叫做 mustache 語法。
特點:不僅可以直接寫成變數,也可以新增簡單的表示式。
//寫法多樣,使用便捷
{{ msg }} {{ fir+‘ ’+sed }} {{ fir }} {{sed}} {{ number + 1 }} {{ message。split(‘’)。reverse()。join(‘’) }}
{{ fir+‘ ’+sed }} {{ fir }} {{sed}} {{ number + 1 }} {{ message。split(‘’)。reverse()。join(‘’) }}
{{ fir }} {{sed}} {{ number + 1 }} {{ message。split(‘’)。reverse()。join(‘’) }}
{{ number + 1 }} {{ message。split(‘’)。reverse()。join(‘’) }}
{{ message。split(‘’)。reverse()。join(‘’) }}
2.2、v-once
上邊的資料繫結中,頁面展示 msg 的值,如果我們在瀏覽器除錯中,修改 msg 的值,頁面立馬會更新,始終保持最新的值為頁面內容。
除錯模式,輸入如下內容觀察:
app。msg=“你不愛我了” //回車
vue 支援動態渲染文字,在修改屬性的同時,實時渲染文字。為了提高渲染效率,只需第一次渲染出文本之後,後期屬性再修改不會影響文字內容。
此時就需要使用 v-once 解決問題。
//使用語法{{msg}}
特點:該指令後面不需要任何表示式,表示元素或元件只渲染一次,不會隨資料的改變而改變文字。
2.3、v-html
在某些特殊情況下,頁面需要動態地插入一段 html 程式碼,比如編輯器,動態傳入的就是一段html 程式碼,使用時我們需要原樣輸出,如:
直接這麼寫並不能滿足我們的要求,我們需要展示成帶有超連結的百度首頁,此時 v-html 登場。
// v-html 使用語法
給元素新增 v-html 指令後,元素就展示成一個帶有超連結的百度首頁文字。
v-html 特點:可以解析欄位內的標籤,把內容當作 html 標籤來處理。
2.4、v-text
// 使用語法
特點:與 mustache 語法類似,用於展示文字的。使用沒有 mustache 靈活,所以使用較少。
注意點:新內容 標籤中又新增內容時,會把原來 msg 中的內容覆蓋掉。
2.5、v-pre
v-pre 與 html 中的 pre 標籤有些類似,html 中的 pre 會原樣輸入空格、換行、縮排和文字內容。v-pre 也是原樣輸出內容,不會解析。
// 使用語法
2.6、v-cloak
cloak 翻譯成中文,是斗篷。那麼 v-cloak是用來幹什麼的呢?
html頁面執行的時候,會閃現 {{ msg }} ,如圖:
v-locak 就是用來解決這個問題的。
// 使用語法
特點:在 vue 解析之前,元素有 v-cloak 屬性,vue 解析之後,元素沒有 v-cloak 屬性。
利用 v-cloak 的特點,我們在 css 中新增
[v-cloak]{ display:‘none’}
此時再執行網頁的時候,解析之前會被隱藏掉,解析之後才展示內容,就不會再閃現 {{msg}}。