Vue 基礎精講(二)
阿新 • • 發佈：2018-12-03
模板語法
插值可以標籤中的內容替代為對應資料物件上 name 屬性的值。無論何時，繫結的資料物件上 name 屬性發生了改變，插值處的內容都會更新。{{}}會將資料解釋為普通文字，而非 HTML 程式碼。為了輸出真正的 HTML，需要使用 v-html 指令。(v-text等同與{{}})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模板語法</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" 計算屬性和偵聽器
- 計算屬性
在computed內中定義一個fullName的方法用於返回姓和名，計算屬性具有快取功能，即只有 firstName 或者 lastName 發生改變時才會重現渲染DOM，通過計算屬性的get和set也可以實現資料改變時的重現渲染，因為資料改變時set方法會被呼叫
<!DOCTYPE html>
<html lang="en">
<head - 偵聽器
我們通過watch來實現自定義的偵聽器，當firstName或者lastName發生改變時頁面就會重現渲染
...
// 偵聽器
watch: {
firstName: function() {
console.log("計算了一次");
this.fullName = this.firstName + " " + this.lastName;
},
lastName: function() {
console.log("計算了一次");
this.fullName = this.firstName + " " + this.lastName;
}
}
...
- 總結
計算屬性和偵聽器都可以實現快取，減少不必要的效能浪費，但是用偵聽器實現計算屬性可以實現的功能，程式碼會很冗餘，所以在偵聽器和計算屬性都可以解決問題時，一般計算屬性的效果更好