前端框架VUE——資料繫結及模板語法

前端人發表於2021-09-18

一、資料繫結

Vue.js 的核心是一個允許採用簡潔的模板語法來宣告式地將資料渲染進 DOM 的系統:

<div id="app">
 {{ msg }}
</div>

//例項化程式碼
var app = new Vue({
 el: '#app',
 data: {
  msg:  '歡迎學習Vue'
 }
})

{{ msg }} 為什麼會變成 msg 的值?vue 使用基本 html 的模板語法,允許開發者宣告式地將DOM 繫結至底層 vue 例項的資料,所有 vue 模板都是合法的 html,所以能被遵循規範的瀏覽器和 html 解析器解析。

二、模板語法

2.1、mustache語法

mustache 翻譯為中文,是鬍子/鬍鬚。由於 {{ msg }} 兩邊都有對稱的大括號,就像人的鬍鬚一樣,所以就叫做 mustache 語法。

特點:不僅可以直接寫成變數,也可以新增簡單的表示式。

//寫法多樣,使用便捷
<h2> {{ msg }} <h2>
<h2> {{ fir+'  '+sed }} <h2>  
<h2> {{ fir }}   {{sed}} <h2>  
<h2> {{ number + 1 }} <h2>  
<h2> {{ message.split('').reverse().join('')  }} <h2> 

 

2.2、v-once

上邊的資料繫結中,頁面展示 msg 的值,如果我們在瀏覽器除錯中,修改 msg 的值,頁面立馬會更新,始終保持最新的值為頁面內容。

除錯模式,輸入如下內容觀察:

app.msg="你不愛我了" //回車

vue 支援動態渲染文字,在修改屬性的同時,實時渲染文字。為了提高渲染效率,只需第一次渲染出文字之後,後期屬性再修改不會影響文字內容。

此時就需要使用 v-once 解決問題。

//使用語法
<span v-once>{{msg}}</span>

特點:該指令後面不需要任何表示式,表示元素或元件只渲染一次,不會隨資料的改變而改變文字。

2.3、v-html

在某些特殊情況下,頁面需要動態地插入一段 html 程式碼,比如編輯器,動態傳入的就是一段html 程式碼,使用時我們需要原樣輸出,如:

<div>{{url}}</div>

data(){
 return{
  url:'<a href="http://www.baidu.com">百度首頁</a>'
 }
}

直接這麼寫並不能滿足我們的要求,我們需要展示成帶有超連結的百度首頁,此時 v-html 登場。

// v-html 使用語法
<div v-html="url"></div>

給元素新增 v-html 指令後,元素就展示成一個帶有超連結的百度首頁文字。

v-html 特點:可以解析欄位內的標籤,把內容當作 html 標籤來處理。

2.4、v-text

// 使用語法
<span v-text="msg"></span>

特點:與 mustache 語法類似,用於展示文字的。使用沒有 mustache 靈活,所以使用較少。

注意點:<span v-text="msg">新內容</text> 標籤中又新增內容時,會把原來 msg 中的內容覆蓋掉。

2.5、v-pre

v-pre 與 html 中的 pre 標籤有些類似,html 中的 pre 會原樣輸入空格、換行、縮排和文字內容。v-pre 也是原樣輸出內容,不會解析。

// 使用語法
<div v-pre> {{ msg }} </div>
頁面直接輸出 {{ msg }}

2.6、v-cloak

cloak 翻譯成中文,是斗篷。那麼 v-cloak是用來幹什麼的呢?

html頁面執行的時候,會閃現 {{ msg }} ,如圖:

前端框架VUE——資料繫結及模板語法

 

v-locak 就是用來解決這個問題的。

// 使用語法
<div v-cloak> {{ msg }} </div>

特點:在 vue 解析之前,元素有 v-cloak 屬性,vue 解析之後,元素沒有 v-cloak 屬性。

利用 v-cloak 的特點,我們在 css 中新增

[v-cloak]{
 display:'none'
}

此時再執行網頁的時候,解析之前會被隱藏掉,解析之後才展示內容,就不會再閃現 {{msg}}。

相關文章