二、插值操作
01-Mustache語法
1.1程式碼實戰
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01-Mustache語法</title>
</head>
<body>
<div id="app">
<!-- mustache語法中,不僅僅可以直接寫變數,也可以寫簡單的表示式-->
<h2>{{message}}</h2>
<h2>{{message}}</br>Long time no see!</h2>
<h2>{{firstName+lastName}}</h2>
<h2>{{firstName+"_"+lastName}}</h2>
<h2>{{firstName}} {{lastName}}</h2>
<h2>{{counter * 2}}</h2>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<!--如果沒有安裝vue.js,就用下面的程式碼-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script type="text/javascript">
const vm = new Vue({
el: '#app',
data: {
message: 'hello world!',
firstName: 'lin',
lastName: 'willen',
counter: 100
}
})
</script>
</body>
</html>
1.2執行結果
02-v-once指令的使用
2.1v-once
- 該指令後面不需要跟任何表示式
- 該指令表示元素和元件只渲染一次,不會隨著資料的改變而改變
2.2程式碼實戰
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02-v-once指令的使用</title>
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
<h2 v-once>{{message}}</h2>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<!--如果沒有安裝vue.js,就用下面的程式碼-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script type="text/javascript">
const vm = new Vue({
el: '#app',
data: {
message: 'hello world!'
}
})
</script>
</body>
</html>
2.3執行結果
2.4Console修改message值
03-v-html指令的使用
3.1v-html
1、 某些情況下,我們從伺服器請求到的資料本身就是一個HTML程式碼
- 如果我們直接通過{{}}來輸出,會將HTML程式碼也一起輸出
- 但是我們可能希望的是按照HTML格式進行解析,並且顯示對應的內容
2、 如果我們希望解析出HTML展示,可以使用v-html指令
- 該指令後面往往會跟上一個string型別
- 會將string的html解析出來並且進行
3.2程式碼實戰
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>03-v-html指令的使用</title>
</head>
<body>
<div id="app">
<!-- 可檢視執行效果,區別兩種效果,很顯然第二種是我們真正需要的-->
<h2>{{url}}</h2>
<h2 v-html="url"></h2>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<!--如果沒有安裝vue.js,就用下面的程式碼-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script type="text/javascript">
const vm = new Vue({
el: '#app',
data: {
//伺服器返回url時,可能不止返回url,可能會把整個a標籤返回,如下
url:'<a href="http://www.baidu.com">百度一下</a>'
}
})
</script>
</body>
</html>
3.3執行結果
04-v-text指令的使用
4.1v-text
- v-text作用和Mustache比較相似:都是用於資料顯示在介面中
- v-text通常情況下,接受一個string型別,原先在標籤內的值會被覆蓋
- v-text不夠靈活,一般開發中,就是用Mustache語法插值
4.2程式碼實戰
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>04-v-text指令的使用</title>
</head>
<body>
<div id="app">
<h2>{{message}} world!</h2>
<h2 v-text="message"> world!</h2>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<!--如果沒有安裝vue.js,就用下面的程式碼-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script type="text/javascript">
const vm = new Vue({
el: '#app',
data: {
message: 'hello'
}
})
</script>
</body>
</html>
4.3執行結果
05-v-pre指令的使用
5.1v-pre
- v-pre用於跳過這個元素和它子元素的編譯過程,用於顯示原來的Mustache語法
5.2程式碼實戰
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>05-v-pre指令的使用</title>
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
<h2 v-pre>{{message}}</h2>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<!--如果沒有安裝vue.js,就用下面的程式碼-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script type="text/javascript">
const vm = new Vue({
el: '#app',
data: {
message: 'hello world!'
}
})
</script>
</body>
</html>
5.3執行結果
06-v-cloak指令的使用
6.1v-cloak
- cloak:斗篷
- 某些情況下,瀏覽器可能會直接顯示出未編譯的Mustache標籤
6.2程式碼實戰
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>06-v-cloak指令的使用</title>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<h2>{{message}}</h2>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<!--如果沒有安裝vue.js,就用下面的程式碼-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script type="text/javascript">
setTimeout(function () {
const vm = new Vue({
el: '#app',
data: {
message: 'hello world!'
}
})
},1000)
</script>
</body>
</html>
6.3執行結果
如果沒有加v-cloak以及style內容,那麼此時顯示{{message}},使用者體驗極差
加了v-cloak以及style內容後會先顯示空白,等待1秒後Vue例項建立出來後把文字顯示出來
相關文章
- MATLAB一維插值和二維插值 比較Matlab
- 九種常見二維插值方法及雙線性插值的理解
- SCSS #{} 插值CSS
- 【Android 動畫】動畫詳解之插值器(二)Android動畫
- 求插值係數
- 插值技術研究
- c#-string 插值C#
- 【java】【插值查詢】Java
- 介紹一種二維線性插值計算方法
- 拉格朗日插值
- B樣條插值加速
- 2. Vue語法--插值操作&動態繫結屬性 詳解Vue
- 洛谷P4781 【模板】拉格朗日插值(拉格朗日插值)
- Swift 5 字串插值之美Swift字串
- scala實現球面插值(Slerp)
- 2.Vue插值表示式Vue
- 插值查詢演算法演算法
- Swift 5 字串插值-簡介Swift字串
- 演算法-查詢(線性、二分、插值、斐波那契)演算法
- vue.js插值與表示式Vue.js
- MemoryCache 的原生插值方式淺談
- 插值查詢的簡單理解
- 查詢演算法__插值查詢演算法
- Qt自定義動畫插值函式QT動畫函式
- 常用演算法 插值演算法演算法
- 拉格朗日插值學習筆記筆記
- webgl centroid質心插值的一點理解Web
- Vue 模板語法第一式 —— 插值Vue
- opencv中自定義的雙線性二次插值的影像旋轉及縮放OpenCV
- 數值分析Python實現系列—— 一、拉格朗日插值法Python
- BZOJ2655: calc(dp 拉格朗日插值)
- mapboxgl 中插值表示式的應用場景
- 資料分析缺失值處理(Missing Values)——刪除法、填充法、插值法
- [work] 影象縮放——雙線性插值演算法演算法
- 學習筆記:FFT與拉格朗日插值筆記FFT
- 《計算方法 》 - 第2章 插值法 - 解題套路
- 【影像縮放】雙立方(三次)卷積插值卷積
- 深入探索編譯插樁技術(二、AspectJ)編譯