教程介紹coderwhy介紹

nn我們知道，在模板中可以直接通過(guò)插值語(yǔ)法顯示一些data中的數(shù)據(jù)n但是在某些情況，我們可能需要對(duì)數(shù)據(jù)進(jìn)行一些轉(zhuǎn)化后再顯示，或者需要將多個(gè)數(shù)據(jù)結(jié)合起來(lái)p比如我們需要對(duì)多個(gè)data數(shù)據(jù)進(jìn)行運(yùn)算、三元運(yùn)算符來(lái)決定結(jié)果、數(shù)據(jù)進(jìn)行某種轉(zhuǎn)化p在模板中使用表達(dá)式，可以非常方便的實(shí)現(xiàn)，但是設(shè)計(jì)它們的初衷是用于簡(jiǎn)單的運(yùn)算p在模板中放入太多的邏輯會(huì)讓模板過(guò)重和難以維護(hù)np可以，其中一種方式就是將邏輯抽取到一個(gè)method中，放到methods的optionsp但是，這種做法有一個(gè)直觀的弊端，就是所有的data使用過(guò)程都會(huì)變成了一個(gè)方法的調(diào)用p另外一種方式就是使用計(jì)算屬性npnpp而是說(shuō)：對(duì)于任何包含響應(yīng)式數(shù)據(jù)的復(fù)雜邏輯，你都應(yīng)該使用計(jì)算屬性p計(jì)算屬性getter和setter的thisnp選項(xiàng)p類(lèi)型：[key:string]:Function|{get:Function,set:Functionnnn我們來(lái)看三個(gè)案例n案例一：我們有兩個(gè)變量：firstName和lastName，希望它們拼接之后在界面上顯示n案例二：我們有一個(gè)分?jǐn)?shù)p當(dāng)score大于60的時(shí)候，在界面上顯示及格p當(dāng)score小于60的時(shí)候，在界面上顯示不及格n案例三：我們有一個(gè)變量message，記錄一段文字：比如Hellop某些情況下我們需要對(duì)這段文字進(jìn)行反轉(zhuǎn)n我們可以有三種實(shí)現(xiàn)思路p思路二：使用method對(duì)邏輯進(jìn)行抽取p思路三：使用計(jì)算屬性nnp缺點(diǎn)一：模板中存在大量的復(fù)雜邏輯，不便于維護(hù)（模板中表達(dá)式的初衷是用于簡(jiǎn)單的計(jì)算pn思路二的實(shí)現(xiàn)：methodn思路二的實(shí)現(xiàn)：methodn思路三的實(shí)現(xiàn)：computedn思路三的實(shí)現(xiàn)：computedpvsnvsn在上面的實(shí)現(xiàn)思路中，我們會(huì)發(fā)現(xiàn)計(jì)算屬性和methods性有緩存的n接下來(lái)我們來(lái)看一下同一個(gè)計(jì)算多次使用，計(jì)算屬性和methodsnnp這是因?yàn)橛?jì)算屬性會(huì)基于它們的依賴(lài)關(guān)系進(jìn)行緩存p在數(shù)據(jù)不發(fā)生變化時(shí)，計(jì)算屬性是不需要重新計(jì)算p但是如果依賴(lài)的數(shù)據(jù)發(fā)生變化，在使用時(shí)，計(jì)算屬性依然會(huì)重新進(jìn)行計(jì)算n計(jì)算屬性在大多數(shù)情況下，只需要一個(gè)n計(jì)算屬性在大多數(shù)情況下，只需要一個(gè)getter方法即可，所以我們會(huì)將計(jì)算屬性直接寫(xiě)成一個(gè)函數(shù)n但是，如果我們確實(shí)想設(shè)置計(jì)算屬性的值p這個(gè)時(shí)候我們也可以給計(jì)算屬性設(shè)置一個(gè)setter的方法nn你可能覺(jué)得很奇怪，Vue內(nèi)部是如何對(duì)我們傳入的是一個(gè)getter，還是說(shuō)是一個(gè)包含setter和getternnp當(dāng)數(shù)據(jù)變化時(shí)，templatep但是在某些情況下，我們希望在代碼邏輯中監(jiān)聽(tīng)某個(gè)數(shù)據(jù)的變化，這個(gè)時(shí)候就需要用偵聽(tīng)器watchnp選項(xiàng)p類(lèi)型：[key:string]:string|Function|Object|n舉個(gè)栗子（例子n舉個(gè)栗子（例子p比如現(xiàn)在我們希望用戶在input中輸入一個(gè)問(wèn)題p每當(dāng)用戶輸入了最新的內(nèi)容，我們就獲取到最新的內(nèi)容，并且使用該問(wèn)題去服務(wù)器查詢(xún)pnnp當(dāng)我們點(diǎn)擊按鈕的時(shí)候會(huì)修改p這個(gè)時(shí)候我們使用watch來(lái)偵聽(tīng)info，可以偵聽(tīng)到嗎？答案是不可以n這是因?yàn)槟J(rèn)情況下，watch只是在偵聽(tīng)info的引用變化，對(duì)于內(nèi)部屬性的變化是不會(huì)做出響應(yīng)p這個(gè)時(shí)候我們可以使用一個(gè)選項(xiàng)deepp注意前面我們說(shuō)過(guò)watch里面?zhèn)陕?tīng)的屬性對(duì)應(yīng)的也可以是一個(gè)n還有另外一個(gè)屬性，是希望一開(kāi)始的就會(huì)立即執(zhí)行一次p這個(gè)時(shí)候我們使用immediate選項(xiàng)nn還有另外一種方式就是使用$watch的n我們可以在created的生命周期（后續(xù)會(huì)講到）中，使用this.$watchspn現(xiàn)在我們來(lái)做一個(gè)相對(duì)綜合一點(diǎn)的練習(xí)：n現(xiàn)在我們來(lái)做一個(gè)相對(duì)綜合一點(diǎn)的練習(xí)：np2.p3.點(diǎn)擊+或者-可以增加或減少書(shū)籍?dāng)?shù)量（如果為1，那么不能繼續(xù)-p4.點(diǎn)擊移除按鈕，可以將書(shū)籍移除（當(dāng)所有的書(shū)籍移除完畢時(shí)，顯示：購(gòu)物車(chē)為空p比如用戶在登錄、注冊(cè)p比如用戶在檢索、創(chuàng)建、更新n這些都要求我們可以在代碼邏輯中獲取到用戶提交的數(shù)據(jù)，我們通常會(huì)使用v-model指令pv-model指令可以在表單input、textarea以及select元素上創(chuàng)建雙向數(shù)據(jù)綁定p它會(huì)根據(jù)控件類(lèi)型p盡管有些神奇，v-model，它負(fù)責(zé)監(jiān)聽(tīng)用戶的輸入事件來(lái)更新數(shù)據(jù)，并在某種極端場(chǎng)景nn官方有說(shuō)到，v-model的原理pv-bind綁定valuen我們?cè)賮?lái)綁定一下n我們?cè)賮?lái)綁定一下其他的表單類(lèi)型：textarea、checkbox、radio、n我們來(lái)看一下綁定n我們來(lái)看一下v-model綁定checkboxn我們來(lái)看一下v-model綁定checkboxnpv-modelp此時(shí)input的value并不影響v-modelnp當(dāng)是多個(gè)復(fù)選框時(shí)，因?yàn)榭梢赃x中多個(gè)，所以對(duì)應(yīng)的datap當(dāng)選中某一個(gè)時(shí)，就會(huì)將input的valuenv-model綁定nv-model綁定radion和checkbox一樣，selectnn和checkbox一樣，selectnpv-modelp當(dāng)我們選中option中的一個(gè)時(shí)，會(huì)將它對(duì)應(yīng)的value賦值到fruitnpv-modelp當(dāng)選中多個(gè)值時(shí)，就會(huì)將選中的option對(duì)應(yīng)的value添加到數(shù)組fruitnn目前我們?cè)谇懊娴陌咐写蟛糠值闹刀际窃趖emplate中固定好的p比如gender的兩個(gè)輸入框值male、n在真實(shí)開(kāi)發(fā)中，我們的數(shù)據(jù)可能是來(lái)自服務(wù)器的，那么我們就可以先將值請(qǐng)求下來(lái)，綁定到data返回的對(duì)象中，v-modelnv-modelnlazyp如果我們?cè)趘-model后跟上lazychange事件，只有在提交時(shí)（比如回車(chē)）v-modeln我們先來(lái)看一下v-modelpv-modeln我們先來(lái)看一下v-modelpmessage總是string類(lèi)型，即使在我們?cè)O(shè)置type為number也是string類(lèi)型n如果我們希望轉(zhuǎn)換為數(shù)字類(lèi)型.number修飾符n另外，在我們進(jìn)行邏輯判斷時(shí)，如果是一個(gè)string類(lèi)型，在可以轉(zhuǎn)化的情況下會(huì)