忘記的總是比記住的還多,那麼記下來至少白紙黑字。
從昨天的範例我們可以看到表達式{{}}
雙花括號和「Vue 實例」的關聯,那麼這個我們定義的 Vue 實例裡有會有什麼呢?
我們是透過使用 Vue()建構式來建立的實例(instance)物件,在創建時至少需要傳入不同屬性和方法,之前已經介紹了最基本的兩個屬性el
和Data
,以下介紹最常見的五項,除了這五項還有不同的時間週期鉤子,這部分之後才會提到。
在 vm 的實例裡,我們需要準備我們想對組件操控的方法和顯示的資料,當然不只這些,實例有點像是控制中心,在這裏控制 V:viem 和 M:model ,我們也常會給這個實例的變數名稱為 VM 也就是 ViewModel 的簡寫。
我們來看看 Vue 實例最常用到的五項屬性與方法簡介:
el 是 element 的簡寫,用來指定 vue 管理頁面的範圍,也就是說只有包裹在#app
內部的元素,才會受到這個 Vue 實例的管理。
data 物件的屬性大多為初始化的屬性字面值。所有這個容器(組件)的資料來源,是初始化資料狀態的物件,vm 會自動擁有 data 中所有屬性,在頁面中也可以以{{}}
直接調用這些屬性。
methods 裡面包含多個方法的物件,來提供給頁面中的v-on
事件指令來綁定 callback 回調函式,
callback 函式預設有 event 參數, 但也可以指定自己的參數。所有的方法由 vue 物件來呼叫, 調用 data 中的屬性直接使用 this.xxx
。
computed 計算屬性在處理一些複雜邏輯時是很有用,computed 計算屬性什麼時候執行呢?它會在初始化時顯示,以及相關的 data 屬性資料發生變化時,計算並回傳目前屬性的值,也因為是透過回傳值拿到屬性值,所以 computed 計算屬性的方法也一定要有回傳 return 值才行。
因為 computed 計算屬性可以幫我們處理一些計算與邏輯,所以{{ }}
雙花括號 Mustache 語法裡也不要放入太多的邏輯,否則會讓模板過重、難以理解和維護。把這些邏輯放到 computed 來會讓程式較為易讀。除此之外,computed 中的屬性不能與 data 中的屬性同名,否則是會出現錯誤的。
watch 是一個類似「監聽器」的物件,物件裡的鍵 kay 是需要觀察的表達式,值 value 是對應的回調函數,它的作用是當表達式的值發生變化後,會調用對應的回調函數完成相對應的監視操作。有沒發現和剛剛的 computed 計算屬性很像,其實利用watch
也可以做到和 computed 一樣的效果。
需要特別注意的是,在 Vue 的實例中,如果需要寫方法,請務必避免以[箭頭函式]的語法來寫方法,因為箭頭函數沒有它自己的 this,所綁定到的是其定義時所在的物件,而不是使用時所在的物件,所以 this 不會指向 Vue 實例。
我們先來看看以下的例子:
Codepen
<div id="app">
First Name :
<input type="text" placeholder="FirstName" v-model="firstName" /><br />
Last Name :
<input type="text" placeholder="LastName" v-model="lastName" /><br />
<!--fullName1是根據fistName和lastName計算產生出來的-->
Full Name1 (computed, sens unique ) :
<input type="text" placeholder="full Name1" v-model="fullName1" /><br />
<!--fullName2是根據watch監看產生出來的-->
Full Name2 (watch, deux sens) :
<input type="text" placeholder="full Name" v-model="fullName2" /><br />
Full Name3 (computed, deux sens) :
<input type="text" placeholder="full Name2" v-model="fullName3" /><br />
<!-- 顯示觀察用 -->
<p>firstName : {{ firstName }}</p>
<p>lastName : {{ lastName }}</p>
<p>使用 computed -> fullName1 : {{ fullName1 }}</p>
<p>使用 watch 監聽 ->fullName2 : {{ fullName2 }}</p>
<p> computed -> fullName3 : {{ fullName3 }}</p>
</div>
const vm = new Vue({
el: '#app',
data: {
firstName: 'A',
lastName: 'B',
fullName2: 'A-B',
},
// 計算屬性配置:值為物件
computed: {
// 什麼時候執行:初始化顯示/ 相關的data屬性資料發生變化
// 計算並回傳目前屬性的值
fullName1() {
// 計算屬性中的一個方法,方法的回傳值作為屬性值
return this.firstName + '-' + this.lastName;
},
fullName3: {
// 自定義物件,有兩個callback 函式 get, set(value)
// 什麼時候用? 當需要讀取當前屬性時呼叫。
// 用來做什麼? 根據相關的資料計算並傳回當前屬性的值
get() {
return this.firstName + '-' + this.lastName;
},
// 什麼時候用? 監視當前屬性的變化,當屬性值發生變化時呼叫。更新相關的資料屬性
// 用來做什麼? 根據相關的資料計算並傳回當前屬性的值
set(value) {
// value 是 fullName3 輸入的最新屬性值
console.log('fullName3 set()', value);
// 更新firstName和lastName
const names = value.split('-');
this.firstName = names[0];
this.lastName = names[1];
},
},
},
// 寫在vm 實例的監聽,叫配置監聽,另一種監聽方法使用vm的方法
watch: {
// 要監聽哪個屬性? 監聽變動時通知我們,使用callback 給我們最新的值
// 也可以同時監聽未變化的與變化後的值,以參數帶入 callback
firstName: function (value) {
// firstName 發生了變化
console.log('watch firstName', value);
// 更新 fullName2
this.fullName2 = value + '-' + this.lastName;
},
// 這段和下面用 vm.$watch() 寫的效果是一樣的。
// lastName: function (value) {
// this.fullName2 = this.firstName + '-' + value
// }
},
});
// 實例的方法都是以 $ 開頭 第一參數監聽對象 第二參數callback函式
vm.$watch('lastName', function (value) {
console.log('watch lastName', value);
// 更新 fullName2
this.fullName2 = this.firstName + ' ' + value;
});
每日一句法文有益身心:Bon appétit ! 繃.那.杯踢! 祝你有好胃口(吃飯開動前說)