二、Vue基礎語法
1.模板語法：
Vue.js 使用了基於 HTML 的模板語法，允許開發者聲明式地將 DOM 綁定至底層 Vue 實例的數據。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循規範的瀏覽器和 HTML 解析器解析。
-
插值
數據綁定最常見的形式就是使用“Mustache”語法 (雙大括號) 的文本插值 e.g：<span>Message: {{ msg }}</span> -
指令
1.v-once指令：執行一次性的插值，當數據改變時候，插值處內容不會更新。 e.g：<span v-once>這個將不會改變: {{ msg }}</span> 2.v-html指令：輸出真正的HTML。 e.g：<div v-html="name"></div> 3.v-text指令：等同插值表達式 e.g：<div v-text="name"></div> -
Demo源碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src="./vue.js"></script> <title>模板語法</title> </head> <body> <div id="app"> <div>{{name}}</div> <div v-text="name"></div> <div v-html="name"></div> </div> <script> var vm = new Vue({ el: "#app", data: { name: "<h1>tom</h1>" } }) </script> </body> </html>- Result
- Result
2.計算屬性、方法與偵聽器：
- 計算屬性：模板內的表達式設計非常便利，並多數用於簡單計算。所以，對於任何複雜的邏輯，都應採用計算屬性來進行處理。
例子：
Html：
<div id="root">
姓：<input v-model="firstName"/>
名：<input v-model="lastName"/>
<div>{{fullName}}</div>
<div>{{count}}</div>
</div>
Js：
<script>
new Vue({
el: "#root",
data: {
firstName: '',
lastName: '',
count: 0
},
// 計算屬性
computed: {
fullName: function () {
return this.firstName + '' + this.lastName
}
}
})
</script>
通過上述例子，我們可以在控制檯中對firstName、lastName進行更改。此時，由於計算屬性fullName依賴於firstName和lastName，也會被響應式的更改。
此外，計算屬性還存在getter、setter方法，針對上述例子進行改造，計算屬性默認的調用方法爲：getter
fullName: {
// 默認方法
get: function() {
return this.firstName + " " + this.lastName
},
// 添加set方法
set: function(val) {
// 對fullName的value進行分割爲數組，分割符：空格
var arr = val.split(" ");
// 對Vue實例中data屬性中的變量進行賦值
this.firstName = arr[0];
this.lastName = arr[arr.length - 1];
console.log(val)
}
}
- 方法：在模板表達式中調用方法也可實現同樣的上述效果。
例子：
Html：
<div id="root">
姓：<input v-model="firstName"/>
名：<input v-model="lastName"/>
<div>{{ fullName() }}</div>
<div>{{count}}</div>
</div>
Js：
<script>
new Vue({
el: "#root",
data: {
firstName: '',
lastName: '',
count: 0
},
// 方法
methods: {
fullName: function () {
return this.firstName + '' + this.lastName
}
}
})
</script>
計算屬性、方法兩種方式實現的最終結果是完全相同的。然而，不同的是：**計算屬性是基於它們的依賴進行緩存的。只有在相關依賴發生改變時它們纔會重新求值。**相比之下，每次觸發重新渲染的時候，調用方法總會再次執行函數。
- 偵聽器：雖然計算屬性在大多數情況下更合適，但有時也需要一個自定義的偵聽器。這就是爲什麼 Vue 通過 watch 選項提供了一個更通用的方法，來響應數據的變化。當需要在數據變化時執行異步或開銷較大的操作時，這個方式是最有用的。
我們來變更下上述例子，加入偵聽器：
Html： 插值表達式中加入：count
<div id="root">
姓：<input v-model="firstName"/>
名：<input v-model="lastName"/>
<div>{{fullName}}</div>
<div>{{count}}</div>
</div>
Js：採用watch加入偵聽器，當fullName該計算屬性發生改變時，count會自增。
<script>
new Vue({
el: "#root",
data: {
firstName: '',
lastName: '',
count: 0
},
// 計算屬性
computed: {
fullName: function () {
return this.firstName + '' + this.lastName
}
},
// 偵聽器 監聽數據變化
watch: {
fullName: function () {
this.count ++
},
}
})
</script>
3.Class、Style綁定：
操作元素的 class 列表和內聯樣式是數據綁定的一個常見需求。我們可以用v-bind(縮寫:)處理此類需求。
例子：分別通過Class、Style綁定實現模板元素內容點擊事件後的樣式更改。
-
綁定HTML Class
-
對象語法
Html：掛載點app，對塊元素div進行Class對象綁定，下述Html代碼標識active這個class的存在與否取決於數據屬性isActive的值。(ture or false)。此外，添加點擊事件，當該塊元素內容被點擊是，進行isActive數據屬性的取反操作。
<div id="app"> <div @Click="handleDivClick" :class="{ active: isActive}"> Hello World </div> </div>Js：聲明掛載點、數據屬性isActive的初始化爲false，添加methods點擊事件邏輯，數據屬性isActive取反操作。
<script> var vm = new Vue({ el: "#app", data: { isActive: false }, methods: { handleDivClick: function() { this.isActive = ! this.isActive } } }) </script>Css：當數據屬性isActive爲true時，該塊元素class=“active”，並實現以下文字樣式。
<style> .active { color: red; } </style> -
數組語法
Html：塊元素div的Class綁定採取了Class列表的方式實現，可以添加多個Class。
<div id="app"> <div @Click="handleDivClick" :class="[ activated ]"> Hello World </div> </div>Js：數據屬性activated默認爲" ",添加點擊事件，實現數據屬性activated的變更。
<script> var vm = new Vue({ el: "#app", data: { activated: "" }, methods: { handleDivClick: function() { // 三元表達式：針對數據屬性activated的值判斷，進行重新賦值。 this.activated = this.activated === "activated" ? "" : "activated" } } }) </script>Css：當點擊事件觸發後，塊元素中class="activated"時，啓用下述樣式。
<style> .activated { color: red; } </style>
-
-
綁定Style
-
對象語法：將內聯樣式綁定至樣式對象上，這樣會使得模板更加清晰。
Html：內聯樣式綁定樣式對象styleObj，點擊事件用來操作樣式對象內樣式屬性。
<div id="app"> <div :style="styleObj" @click="handleDivClick"> Hello World </div> </div>Js：數據屬性中的樣式對象styleObj，其中樣式對象屬性color默認爲black。
<script> var vm = new Vue({ el: "#app", data: { styleObj: { color: "black" } }, methods: { handleDivClick: function() { // 採用三元表達式進行樣式對象屬性的變更 this.styleObj.color = this.styleObj.color === "black" ? "red" : "black" } } }) </script> -
數組語法：
綁定樣式對象(集)，採用{}添加內聯樣式。 CSS屬性名可以用駝峯式(camelCase)或短橫線分隔(kebab-case，記得用單引號括起來)來命名。 :style="[styleObj, {fontSize: '20px'}]"
-