vue教材-數(shù)據(jù)綁定與生命周期

1、第二章數(shù)據(jù)綁定與生命周期本章要點(diǎn)：模板語(yǔ)法Vue屬性綁定Vue雙向數(shù)據(jù)綁定Vue計(jì)算屬性Computed計(jì)算屬性與methods的區(qū)別Vue生命周期Vue是一個(gè)MVVM1架，核心功能就是實(shí)現(xiàn)雙向的數(shù)據(jù)綁定。雙向是指：HTML標(biāo)簽數(shù)據(jù)綁定到Vue對(duì)象，另外反方向數(shù)據(jù)也是綁定的。通俗點(diǎn)說(shuō)就是，Vue對(duì)象的改變會(huì)直接影響到HTML的標(biāo)簽的變化，而且標(biāo)簽的變化也會(huì)反過(guò)來(lái)影響Vue對(duì)象的屬性的變化。Vue數(shù)據(jù)雙向綁定是通過(guò)數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式來(lái)實(shí)現(xiàn)的。這樣一來(lái)，就徹底變革了之前DOM的開(kāi)發(fā)方式，之前DOM驅(qū)動(dòng)的開(kāi)發(fā)方式尤其是以jQuery為主的開(kāi)發(fā)時(shí)代，都是 DOMe化后，觸發(fā)js事件，

2、然后在事件中通過(guò) js代碼取得 標(biāo)簽的變化，再跟后臺(tái)進(jìn)行交互，然后根據(jù)后臺(tái)返回的結(jié)果再更新HTML標(biāo)簽，異常的繁瑣。有了 Vue這種雙向綁定，讓開(kāi)發(fā)人員只需要關(guān)心 json數(shù)據(jù)的變化即可，Vue自動(dòng)映射到HTML 上，而且HTML的變化也會(huì)映射回js對(duì)象上，開(kāi)發(fā)方式直接變革成了前端由數(shù)據(jù)驅(qū)動(dòng)的開(kāi)發(fā) 時(shí)代，遠(yuǎn)遠(yuǎn)拋棄了 DOMF發(fā)主導(dǎo)的時(shí)代了。DOMViewTPlain JavaScriptObjectsVue圖2-1 MVVM模型Vue模板語(yǔ)法Vue.js 使用了基于HTML的模版語(yǔ)法，允許開(kāi)發(fā)者聲明式地將DOM綁定至底層Vue實(shí)例的數(shù)據(jù)。Vue.js的核心是一個(gè)允許你采用簡(jiǎn)潔的模板語(yǔ)法來(lái)聲明式

3、的將數(shù)據(jù)渲染進(jìn) DOM的系統(tǒng)。數(shù)據(jù)綁定最常見(jiàn)的形式就是使用“Mustache”語(yǔ)法 （雙大括號(hào)）的文本插值。下面主要從文本插值，HTML JavaScript 表達(dá)式，屬性綁定，樣式綁定，雙向數(shù)據(jù)綁定這幾個(gè)方面來(lái)介紹模板語(yǔ)法。文本插值Vue支持動(dòng)態(tài)渲染文本，即在修改屬性的同時(shí)，實(shí)時(shí)渲染文本內(nèi)容。文本插值以 和v-html指令形式插入，然后輸出純文本?！纠?-1 插值messagenew Vue（el: #app,data: message: 用戶(hù)名 + 密碼 /這里不支持換行，如果要換行用單引號(hào)括起來(lái)用+號(hào)連接。）;運(yùn)行結(jié)果如圖2-2 :B【例27】插值X +6 0 00 localhatt6

4、3543/Vu&/112-1 %20g.用戶(hù)名input type=text pl;xch。1cle二尚俞人用戶(hù)名4 密碼4input type-pas sv/o rtf1 placeholde r=請(qǐng)輸入密科，。用戶(hù)名請(qǐng)輸入用戶(hù)名密碼請(qǐng)輸入密碼圖2-2插值表達(dá)式綁定對(duì)于所有的數(shù)據(jù)綁定，Vue支持JavaScript的所有表達(dá)式，當(dāng)然Vue還可以支持表達(dá)例如:中的任何計(jì)算、函數(shù)處理等。 number + 1 ok ? YES : NO message.split().reverse().join() 每個(gè)綁定只能包含單個(gè)表達(dá)式，下面代碼都不會(huì)生效11. var a = 1 if (ok) re

5、turn message 【例2-2 使用JavaScript表達(dá)式綁定 msg + - + name isOk ? 我已經(jīng) OTC上市:還未上市我的年齡是： age *2 歲var app = new Vue( /創(chuàng)建Vue對(duì)象。Vue的核心對(duì)象。el: #app, / el屬性：把當(dāng)前 Vue對(duì)象掛載到div標(biāo)簽上，#app是id選擇器data: / data:是Vue對(duì)象中綁定的數(shù)據(jù)msg: Hi,name:融創(chuàng)軟通,isOk: true,age: 5)；運(yùn)行結(jié)果如圖2-3所示L0 【例2】使用J加瓷口ip【表達(dá)式 xHi-融創(chuàng)軟通上市 我的年齡是：10歲圖2-3使用JavaScript

6、 表達(dá)式綁定對(duì)于JavaScript表達(dá)式在模板中的使用，只適用于簡(jiǎn)單表達(dá)式，復(fù)雜的可以用后面要學(xué)習(xí)的計(jì)算屬性computed實(shí)現(xiàn)。屬性綁定v-Vue中不能直接使用 expression 語(yǔ)法進(jìn)行綁定html的標(biāo)簽，而是用它特有的bind指令。綁定的語(yǔ)法結(jié)構(gòu)：|例如： menuName 【例2-3 演示Vue屬性綁定苜頁(yè) 產(chǎn)品 服務(wù) Vue提供了簡(jiǎn)單的寫(xiě)法，可以去掉v-bind直接使關(guān)于 var app = new Vue(el: #app,data: /下面使用LayUI樣式MenuClass: layui-nav-item,MenuContainer: layui-nav)運(yùn)行結(jié)果如圖2-

7、4所示【例2 T】屬性綁定C O l0Cdlhost.63343/Vue/tri2-3/L20Vu.首頁(yè)產(chǎn)品關(guān)于圖2-4屬性綁定專(zhuān)家提示:等價(jià)于輸由純 HTML由于Vue對(duì)于輸出綁定的內(nèi)容提前做了encode編碼，保障在綁定到頁(yè)面上顯示的時(shí)候不至于被xss攻擊。但某些場(chǎng)景下，我們確保后臺(tái)數(shù)據(jù)是安全的，那么我們就要在網(wǎng)頁(yè)中顯 示原生的HTMlfe簽。Vue提供了 v-html指令?！纠?-4 輸出純HTMLvar app = new Vue(el: #app,data: MenuContaineId: menu,MenuBody: 這里是菜單的內(nèi)容 )運(yùn)行結(jié)果如圖2-5這里是菜單的內(nèi)容圖2-5輸

8、出純 HTML樣式綁定對(duì)于普通的屬性的綁定，只能用上面講的綁定屬性的方法。而Vue專(zhuān)門(mén)加強(qiáng)了 class和style的屬性的綁定，可以進(jìn)行更復(fù)雜的對(duì)象綁定、數(shù)組綁定、樣式綁定和類(lèi)綁定等。1綁定樣式對(duì)象項(xiàng)目中經(jīng)常我們需要對(duì)樣式進(jìn)行切換，比如： div的顯示和隱藏，某些標(biāo)簽active（激活）等。Vue提供的對(duì)象綁定樣式的方式就很容易做這些事情。 2混合普通的HTML標(biāo)簽樣式類(lèi)及綁定樣式對(duì)象v-bind:class指令可以與普通的 class 屬性共存。|/C_=act-:hasError 3綁定data中的樣式對(duì)象直接在html屬性中的雙引號(hào)內(nèi)寫(xiě)對(duì)象，還是很不爽，也沒(méi)有智能提示，很容易寫(xiě)錯(cuò)。Vu

9、e可以讓我們直接把綁定的class字符串指向data的一個(gè)對(duì)象，這樣就非常方便了，既可以有智能提示，又可以很復(fù)雜進(jìn)行編輯。var app = new Vue(el: #app,data: classObject: active: true,.d”e4綁定樣式數(shù)組其實(shí)綁定數(shù)組，就是綁定樣式對(duì)象的延續(xù)。|data: activeClass: active, i當(dāng)然還有很多其他很有趣的支持，就不贅述了。|5內(nèi)聯(lián)樣式綁定內(nèi)聯(lián)樣式的綁定，非常類(lèi)似于樣式類(lèi)的操作。v-bind:style的對(duì)象語(yǔ)法十分直觀，看 著非常像 CSS ,其實(shí)它是一個(gè) JavaScript 對(duì)象。CSS屬性名可以用駝峰式 (cam

10、elCase)或短橫分隔命名(kebab-case )。size + px, backgroundColor: bgcolor, width:內(nèi)聯(lián)樣式綁定var app = new Vue(el: #app,data: size: 19,width: 200, bgcolor: red);當(dāng)v-bind:style使用需要特定前綴的CSS屬性時(shí)，如transform , Vue.js 會(huì)自動(dòng)偵測(cè)并添加相應(yīng)的前綴。6綁定的數(shù)據(jù)過(guò)濾器過(guò)濾器本質(zhì)就是數(shù)據(jù)在呈現(xiàn)之前先進(jìn)行過(guò)濾和篩選。官網(wǎng)上寫(xiě)的不錯(cuò)，我就不再贅述，下面是官網(wǎng)的描述:Vue.js允許你自定義過(guò)濾器，被用作一些常見(jiàn)的文本格式化。過(guò)濾器應(yīng)該被

11、添加在 mustache插值的尾部，由“管道符”指示：| message | capitalize Vue 2.x中，過(guò)濾器只能在mustache綁定和v-bind 表達(dá)式(從2.1.0 開(kāi)始支持)中使用，因?yàn)檫^(guò)濾器設(shè)計(jì)目的就是用于文本轉(zhuǎn)換。如果在其他指令中實(shí)現(xiàn)更復(fù)雜的數(shù)據(jù)變 換，應(yīng)該使用計(jì)算屬性。過(guò)濾器函數(shù)總接受表達(dá)式的值作為第一個(gè)參數(shù)。 message | capitalize new Vue( / .filters: capitalize: function (value) if (!value) return value = value.toString()return value.c

12、harAt(0).toUpperCase() + value.slice(1)過(guò)濾器可以串聯(lián)： message | filterA | filterB 過(guò)濾器是JavaScript 函數(shù)，因此可以接受參數(shù)：| message | filterA(arg1, arg2) 這里，字符串a(chǎn)rg1將傳給過(guò)濾器作為第二個(gè)參數(shù)，arg2表達(dá)式的值將被求值然后傳給過(guò)濾器作為第三個(gè)參數(shù)。2.1.6數(shù)據(jù)雙向綁定上面的例子我們大多講的是單向的js對(duì)象向HTML數(shù)據(jù)進(jìn)行綁定，那 HTMlLg樣向js進(jìn)行反饋數(shù)據(jù)呢？HTML中只有表達(dá)能接受用戶(hù)的輸入，最簡(jiǎn)單的演示雙向綁定的就是文本框了。Vue提供了一個(gè)新的指令：v-

13、model進(jìn)行雙向數(shù)據(jù)的綁定，注意不是v-bind ?！纠?-5】數(shù)據(jù)雙向綁定，請(qǐng)輸入信息：，您輸入的信息是： msg var app = new Vue( el: #app, data: ，msg:雙向數(shù)據(jù)綁定的例子運(yùn)行結(jié)果如圖2-6所示【例2-5】效惘雙向綁定+T O localhost:63343/Vue/!2-5%20請(qǐng)輸入信息：音峋欽通夕魏人的信息是：富蛇U軟通圖2-6雙向數(shù)據(jù)綁定最終的結(jié)果就是：你改變input文本框的內(nèi)容的時(shí)候，p標(biāo)簽中的內(nèi)容會(huì)跟著進(jìn)行改變，是不是很神奇呢！關(guān)于其他表單的綁定的語(yǔ)法我就不贅述了，還是參考官網(wǎng)吧。vue提供了大量的綁定的語(yǔ)法和方法，非常方便我們進(jìn)行數(shù)

14、據(jù)的綁定，尤其它是雙向的數(shù)據(jù)綁定，極大白減少了我們DO謙作的麻煩程度。2.2計(jì)算屬性計(jì)算屬性在做數(shù)據(jù)綁定時(shí)候，數(shù)據(jù)要進(jìn)行處理之后才能展示到 html頁(yè)面上，雖然vue提供了非 常好的表達(dá)式綁定的方法，但是只能應(yīng)對(duì)低強(qiáng)度的需求。比如：把一個(gè)日期按照規(guī)定格式進(jìn)行輸出，可能就需要我們對(duì)日期對(duì)象做一些格式化，如使用表達(dá)式可能就捉襟見(jiàn)肘了。模板內(nèi)的表達(dá)式非常便利，但是設(shè)計(jì)它們的初衷是用于簡(jiǎn)單運(yùn)算的。在模板中放入太多的邏輯會(huì)讓模板過(guò)重且難以維護(hù)。例如：| message.split().reverse().join() 這里的表達(dá)式包含 3個(gè)操作，并不是很清晰，所以遇到復(fù)雜邏輯時(shí)應(yīng)該使用Vue特帶的計(jì)算屬

15、性computed來(lái)進(jìn)行處理。Vue對(duì)象提供了 computed屬性，可以讓我們開(kāi)發(fā)者在里面可以放置一些方法，協(xié)助我 們綁定數(shù)據(jù)操作，這些方法可以跟data中的屬性一樣用，但注意這些方法用的時(shí)候不要加()。我們把上面的例子用計(jì)算屬性的方式重寫(xiě)一下，如下示例：【例2-6 computed計(jì)算屬性的使用 顯示信息： message 顯示翻轉(zhuǎn)信息： reversedMessage var vm = new Vue(el: #app, data: message:融創(chuàng)軟通, ), computed: reversedMessage: function () / this指向vm實(shí)例return thi

16、s.message.split().reverse().join()；運(yùn)行結(jié)果如圖2-7所示標(biāo)例計(jì)直尾性的使 x +6 6 0 G local host:63343/Vue/15!|2-6%20co.,顯示信息融創(chuàng)歐通”顯示翻轉(zhuǎn)信息一通軟創(chuàng)融圖2-7 computed計(jì)算屬性的使用除了上例簡(jiǎn)單的用法，計(jì)算屬性還可以依賴(lài)多個(gè)Vue實(shí)例的數(shù)據(jù)，只要其中任一數(shù)據(jù)變化，計(jì)算屬性就會(huì)重新執(zhí)行，視圖也會(huì)更新?！纠?-7 computed計(jì)算屬性和 methods的多數(shù)據(jù)使用 商品計(jì)價(jià)系統(tǒng) 商品 1 價(jià)格 商品 1 數(shù)量 商品1的總價(jià)為： package1.count*package1.price元，商品

17、2的總價(jià)為： package2.count*package2.price元，匯總價(jià)格為： price元 補(bǔ)充商品 1 的數(shù)量var app = new Vue(el: #app,data: package1: count:,price:,package2:count: 5,price: 10,computed: price: function () return this.package1.count * this.package1.price + this.package2.count * this.package2.price/總價(jià)隨著貨物或價(jià)格的改變會(huì)重新計(jì)算,methods: /對(duì)象的

18、方法add: function () this.package1.count+)；運(yùn)行結(jié)果如圖2-8所示學(xué)瀏上c om pu tedLm r 乂 +- C I ocal hostb S43/V ue/2 - /%20cocn puteditSHumettio., 由商品計(jì)f介系統(tǒng)商品1伯格20盲品1數(shù)量10商品1的總價(jià)為；200元,商品2的總價(jià)為：50元，匯總價(jià)格為；250元補(bǔ)充商品1時(shí)星圖2-8 computed 計(jì)算屬性和 methods的多數(shù)據(jù)使用2.2.2 getter 和 setter每一個(gè)計(jì)算屬性都包含一個(gè)getter和一個(gè)setter ,上面的示例都是計(jì)算屬性的默認(rèn)用法，只是利用

19、了getter 來(lái)讀取。在你需要時(shí)，也可以提供一個(gè)setter 函數(shù)，當(dāng)手動(dòng)修改計(jì)算屬性的值就像修改一個(gè)普通數(shù)據(jù)那樣時(shí)，就會(huì)觸發(fā)setter函數(shù)，執(zhí)行一些自定義的操作，例如：【例2-8 getter和setter的使用 姓 名 您的姓名：fullNamevar vm = new Vue(el: #app,data: firstName:,lastName:,computed: fullName: / getterget: function () return this.firstName + + this.lastName,/ setterset: function (newValue) va

20、r names = newValue.split()this.firstName = names0this.lastName = namesnames.length - 1)運(yùn)行結(jié)果如圖2-9所示一-ax例*8 quit以和的使用x +C 。local host 6 3 343/Vue/*|5i|2 -8%20get. 二 3姓張名建軍 您的姓名：張建軍圖2-9 getter 和setter 的使用絕大多數(shù)情況下，我們只會(huì)用默認(rèn)的getter方法來(lái)讀取一個(gè)計(jì)算屬性，在業(yè)務(wù)中很少用到setter,所以在聲明一個(gè)計(jì)算屬性時(shí)，可以直接使用默認(rèn)的寫(xiě)法，不必將 getter和 setter 都聲明。2.

21、2.3計(jì)算屬性緩存除了使用計(jì)算屬性外，我們也可以通過(guò)在表達(dá)式中調(diào)用方法來(lái)達(dá)到同樣的效果，如:I/HTML 中：reverseTitle()/在組件中methods: reverseTitle: function () return this.title.split().reverse().join();我們可以將同一函數(shù)定義為一個(gè)方法而不是一個(gè)計(jì)算屬性，兩種方式的最終結(jié)果確實(shí)是完全相同的。只是一個(gè)使用reverseTitle() 取值，一個(gè)使用reverseTitle 取值。然而，不同的是計(jì)算屬性是基于它們的依賴(lài)進(jìn)行緩存的。計(jì)算屬性只有在它的相關(guān)依賴(lài)發(fā) 生改變時(shí)才會(huì)重新求值。2.2.4 計(jì)算屬

22、性與methods的區(qū)別computed可以完成各種復(fù)雜的邏輯，包括運(yùn)算、函數(shù)調(diào)用等，只要最終返回一個(gè)結(jié)果 就可以。computed 和 methods 的區(qū)另U：| reversedText computed: reversedText: function。return this.text.split(,).reverse().join(,); reversedText() methods: reversedText: function() Ireturn this.text.split（,）.reverse（）.join（,）;11兩個(gè)結(jié)果輸出的結(jié)果是一樣的，但兩者之間的差別就是在計(jì)算結(jié)果

23、不發(fā)生改變的情況下，computed的方法只被調(diào)用了一次，即便是多處多次調(diào)用，computed也只被調(diào)用一次，這就是computed緩存的優(yōu)勢(shì)。computed 一般使用簡(jiǎn)單的表達(dá)式對(duì)內(nèi)容進(jìn)行簡(jiǎn)單的轉(zhuǎn)換與使用 過(guò)濾器對(duì)內(nèi)容進(jìn)行簡(jiǎn)單的轉(zhuǎn)換用的比較多。2.3生命周期每個(gè)Vue實(shí)例在被創(chuàng)建之前都要經(jīng)過(guò)一系列的初始化過(guò)程，這個(gè)過(guò)程就Vue的生命周期。Vue生命周期Vue實(shí)例有一個(gè)完整的生命周期，也就是從開(kāi)始創(chuàng)建、初始化數(shù)據(jù)、編譯模 板、掛載Dom渲染、更新一渲染、卸載等一系列過(guò)程，我們稱(chēng)這是Vue的生命周期。通俗說(shuō)就是 Vue實(shí)例從創(chuàng)建到銷(xiāo)毀的過(guò)程，就是生命周期。Vue生命周期共分為8個(gè)階段：befo

24、reCreate （創(chuàng)建前）- created（創(chuàng)建后）-beforeMount（載入前）-mounted（載入后）-beforeUpdate （更新前）-updated （更新后）-beforeDestroy（銷(xiāo)毀前）-destroyed （銷(xiāo)毀后）鉤子函數(shù)他們分別是:Vue提供的可以注冊(cè)的 8鉤子函數(shù)都在上圖片的有標(biāo)注。1 beforeCreate在實(shí)例初始化之后，數(shù)據(jù)觀測(cè)(data observer) 和event/watcher事件配置之前被調(diào)用。created實(shí)例已經(jīng)創(chuàng)建完成之后被調(diào)用。在這一步，實(shí)例已完成以下的配置：數(shù)據(jù)觀測(cè)(dataobserver),屬性和方法的運(yùn)算，watch

25、/event 事件回調(diào)。然而，掛載階段還沒(méi)開(kāi)始，$el屬性目前不可見(jiàn)。beforeMount在掛載開(kāi)始之前被調(diào)用：相關(guān)的render函數(shù)首次被調(diào)用。mountedel被新創(chuàng)建的vm.$el替換，并掛載到實(shí)例上去之后調(diào)用該鉤子。如果 root實(shí)例掛 載了一個(gè)文檔內(nèi)元素，當(dāng) mounted被調(diào)用時(shí)vm.$el也在文檔內(nèi)。beforeUpdate數(shù)據(jù)更新時(shí)調(diào)用，發(fā)生在虛擬DOM重新渲染和打補(bǔ)丁之前。你可以在這個(gè)鉤子中進(jìn)一步地更改狀態(tài)，這不會(huì)觸發(fā)附加的重渲染過(guò)程。updated由于數(shù)據(jù)更改導(dǎo)致的虛擬 DOM重新渲染和打補(bǔ)丁，在這之后會(huì)調(diào)用該鉤子。當(dāng)這個(gè)鉤子被調(diào)用時(shí)，組件DOM已經(jīng)更新，所以你現(xiàn)在可以執(zhí)

26、行依賴(lài)于DOM的操作。然而在大多數(shù)情況下，你應(yīng)該避免在此期間更改狀態(tài)，因?yàn)檫@可能會(huì)導(dǎo)致更新無(wú)限循 環(huán)O該鉤子在服務(wù)器端渲染期間不被調(diào)用。beforeDestroy實(shí)例銷(xiāo)毀之前調(diào)用。在這一步，實(shí)例仍然完全可用。destroyedVue實(shí)例銷(xiāo)毀后調(diào)用。調(diào)用后，Vue實(shí)例指示的所有東西都會(huì)解綁定，所有的事件監(jiān)聽(tīng)器會(huì)被移除，所有的子實(shí)例也會(huì)被銷(xiāo)毀。該鉤子在服務(wù)器端渲染期間不被調(diào)用。Vue生命周期詳解2.3.3 Vue生命周期示例對(duì)于執(zhí)行順序和什么時(shí)間執(zhí)行，下面將結(jié)合代碼看看鉤子函數(shù)的執(zhí)行情況：【例2-9】 Vue生命周期詳解| number . Ivar app = new Vue(el: #app,data: number: 1,beforeCreate: function () console.log(beforeCreate 鉤子執(zhí)行.);console.log(this.number),cteated: function () console.l