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

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

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

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

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

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

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

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

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

9、e可以讓我們直接把綁定的class字符串指向data的一個對象，這樣就非常方便了，既可以有智能提示，又可以很復(fù)雜進行編輯。var app = new Vue(el: #app,data: classObject: active: true,.d”e4綁定樣式數(shù)組其實綁定數(shù)組，就是綁定樣式對象的延續(xù)。|data: activeClass: active, i當然還有很多其他很有趣的支持，就不贅述了。|5內(nèi)聯(lián)樣式綁定內(nèi)聯(lián)樣式的綁定，非常類似于樣式類的操作。v-bind:style的對象語法十分直觀，看 著非常像 CSS ,其實它是一個 JavaScript 對象。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);當v-bind:style使用需要特定前綴的CSS屬性時，如transform , Vue.js 會自動偵測并添加相應(yīng)的前綴。6綁定的數(shù)據(jù)過濾器過濾器本質(zhì)就是數(shù)據(jù)在呈現(xiàn)之前先進行過濾和篩選。官網(wǎng)上寫的不錯，我就不再贅述，下面是官網(wǎng)的描述:Vue.js允許你自定義過濾器，被用作一些常見的文本格式化。過濾器應(yīng)該被

11、添加在 mustache插值的尾部，由“管道符”指示：| message | capitalize Vue 2.x中，過濾器只能在mustache綁定和v-bind 表達式(從2.1.0 開始支持)中使用，因為過濾器設(shè)計目的就是用于文本轉(zhuǎn)換。如果在其他指令中實現(xiàn)更復(fù)雜的數(shù)據(jù)變 換，應(yīng)該使用計算屬性。過濾器函數(shù)總接受表達式的值作為第一個參數(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)過濾器可以串聯(lián)： message | filterA | filterB 過濾器是JavaScript 函數(shù)，因此可以接受參數(shù)：| message | filterA(arg1, arg2) 這里，字符串a(chǎn)rg1將傳給過濾器作為第二個參數(shù)，arg2表達式的值將被求值然后傳給過濾器作為第三個參數(shù)。2.1.6數(shù)據(jù)雙向綁定上面的例子我們大多講的是單向的js對象向HTML數(shù)據(jù)進行綁定，那 HTMlLg樣向js進行反饋數(shù)據(jù)呢？HTML中只有表達能接受用戶的輸入，最簡單的演示雙向綁定的就是文本框了。Vue提供了一個新的指令：v-

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

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

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

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

17、2的總價為： package2.count*package2.price元，匯總價格為： price元 補充商品 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/總價隨著貨物或價格的改變會重新計算,methods: /對象的

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

19、了getter 來讀取。在你需要時，也可以提供一個setter 函數(shù)，當手動修改計算屬性的值就像修改一個普通數(shù)據(jù)那樣時，就會觸發(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)運行結(jié)果如圖2-9所示一-ax例*8 quit以和的使用x +C 。local host 6 3 343/Vue/*|5i|2 -8%20get. 二 3姓張名建軍 您的姓名：張建軍圖2-9 getter 和setter 的使用絕大多數(shù)情況下，我們只會用默認的getter方法來讀取一個計算屬性，在業(yè)務(wù)中很少用到setter,所以在聲明一個計算屬性時，可以直接使用默認的寫法，不必將 getter和 setter 都聲明。2.

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

22、性與methods的區(qū)別computed可以完成各種復(fù)雜的邏輯，包括運算、函數(shù)調(diào)用等，只要最終返回一個結(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兩個結(jié)果輸出的結(jié)果是一樣的，但兩者之間的差別就是在計算結(jié)果

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

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

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

26、行依賴于DOM的操作。然而在大多數(shù)情況下，你應(yīng)該避免在此期間更改狀態(tài)，因為這可能會導(dǎo)致更新無限循 環(huán)O該鉤子在服務(wù)器端渲染期間不被調(diào)用。beforeDestroy實例銷毀之前調(diào)用。在這一步，實例仍然完全可用。destroyedVue實例銷毀后調(diào)用。調(diào)用后，Vue實例指示的所有東西都會解綁定，所有的事件監(jiān)聽器會被移除，所有的子實例也會被銷毀。該鉤子在服務(wù)器端渲染期間不被調(diào)用。Vue生命周期詳解2.3.3 Vue生命周期示例對于執(zhí)行順序和什么時間執(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