前端框架VUE——數據綁定及模板語法

前端人_倩倩 2021-09-18 13:57:56 阅读数:944

前端 框架 vue 模板

一、數據綁定

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 靈活,所以使用較少。

注意點:新內容 標簽中又新增內容時,會把原來 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}}。

版权声明:本文为[前端人_倩倩]所创,转载请带上原文链接,感谢。 https://gsmany.com/2021/09/20210918135756188A.html