學習要點:
1.簡單事件
2.計算屬性
本節課我們來開始學習 Vue3.x 的事件的入門和計算屬性的用法;
一.簡單事件
1. 上節課,我們最后談到了一個新指令:v-on:click,點擊觸發事件;
<button v-on:click="counter++">+counterbutton>
<button v-on:click="counter+=2">+counterbutton>
PS:當我們點擊了按鈕即可實現累加 1,或累加 2 的操作;
2. 如果觸發的事件業務邏輯較多,那么行內表達式是不夠的,需要觸發固定方法;
<button v-on:click="addCounter">counter+methodsbutton>
const App = {
// 初始數據
data() {},
// 事件處理方法
methods : {
// 累加方法
addCounter() {
// 這里的 this 就是 vue 代理對象
this.counter++
}
}
}
PS:所有的方法均可放在 methods 屬性對象里,提供給 v-on 觸發;
二.計算屬性
1. 對于插值可以進行簡單運算,可一旦過于復雜,則模版維護將變得異常困難;
{{firstName + lastName}}
firstName : 'Mr.',
lastName : 'Lee'
2. 上面的例子出現要使用兩個插值,如果假設插值內部還要各種運算,極不方便;
3. 此時,我們可以用第二套方案,就是使用方法進行返回,把運算和顯示整合起來;
{{fullName()}}
methods : {
// 連接兩個屬性字符串
fullName() {
return this.firstName + this.lastName
}
}
PS:第二套方案在復雜性高的情況下優于第一種,并且插值只調用一次即可;
PS:缺點也很明顯,插值調用必須方法模式(有括號),和屬性方式容易混淆;
PS:其次,每次都必須執行方法,沒有緩存會在復雜的情況下影響性能;
4. 那么,系統提供了第三種方法解決了這兩個問題,就是計算屬性;
{{fullName2}}
const App = {
// 初始數據
data() {},
// 事件處理方法
methods : {},
// 計算屬性
computed : {
// 連接三個屬性字符串
fullName2() {
return this.firstName + this.LastName
}
}
}
PS:計算屬性和屬性一樣的調用方式,而方法調用卻需要括號,所以推薦用計算屬性;
PS:計算屬性具有緩存,當值沒有改變時,不會重新執行方法,而去使用緩存;
PS:可以參考手冊去了解一下計算屬性緩存的相關細節,本人推薦需要在實戰中體會更好;
本文由:蘭州啟點網絡(
www.syzhibo.net)整理發布!