第2章 Vue數(shù)據(jù)綁定_第1頁
第2章 Vue數(shù)據(jù)綁定_第2頁
第2章 Vue數(shù)據(jù)綁定_第3頁
第2章 Vue數(shù)據(jù)綁定_第4頁
第2章 Vue數(shù)據(jù)綁定_第5頁
已閱讀5頁，還剩17頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

第2章Vue數(shù)據(jù)綁定課程內(nèi)容模板語法響應(yīng)式聲明渲染機(jī)制Vue屬性綁定Vue雙向數(shù)據(jù)綁定Vue計(jì)算屬性Computed計(jì)算屬性與methods的區(qū)別Vue生命周期2

Vue模板語法3Vue將模板中的文本數(shù)據(jù)放入DOM中。Vue支持動(dòng)態(tài)渲染文本，以{{}}形式插入，輸出純文本。如果要解析為HTML，需要使用v-html指令主要從文本，HTML，JavaScript表達(dá)式這幾個(gè)方面來介紹模板語法。演示模板語法

4<divid="app"><divv-html="message"></div></div><script>newVue({el:'#app',data:{message:'用戶名<inputtype="text"value="中文名"/>'+'密碼<inputtype="password"/>'//這里不支持換行，如果要換行用單引號括起來用+號連接。}})</script>

表達(dá)式5Vue支持JavaScript的所有表達(dá)式。每個(gè)綁定只能包含單個(gè)表達(dá)式，此例都不會生效{{number+1}}{{ok?'YES':'NO'}}{{message.split('').reverse().join('')}}<divv-bind:id="'list-'+id"></div><!--這是語句，不是表達(dá)式-->{{vara=1}}<!--流控制也不會生效，請使用三元表達(dá)式-->{{if(ok){returnmessage}}}響應(yīng)式聲明渲染機(jī)制Vue是一個(gè)響應(yīng)式系統(tǒng)。Vue.js用模板語法聲明式將數(shù)據(jù)渲染進(jìn)DOM系統(tǒng)。視圖是來自狀態(tài)聲明映射，狀態(tài)發(fā)生變化，數(shù)據(jù)自動(dòng)渲染。6演示響應(yīng)式聲明渲染7<head><metacharset="UTF-8"><title>hello,world!</title></head><body><divid="myApp"><p>{{message}}</p></div><scriptsrc="lib/Vue.js"></script><script>varmyData={message:'HelloVue'}varapp=newVue({el:'#myApp',data:myData})</script></body></html>數(shù)據(jù)和DOM已經(jīng)綁定在一起，所有元素都是響應(yīng)式的，頁面中的<p>標(biāo)簽中的數(shù)據(jù)自動(dòng)更新。8使用v-model綁定文本框使用Vue中v-on:click來綁定事件，縮寫形式@click（在上示例基礎(chǔ)的<div>標(biāo)簽中添加）響應(yīng)式聲明渲染<divid="myApp"><p>{{message}}</p><inputv-model="message"></input><buttonv-on:click="alert('message='+app.message);">點(diǎn)擊看看</button><button@click="alert('message='+app.message);">點(diǎn)擊看看</button></div>9如果頁面需要超鏈接，初學(xué)者會寫如下的代碼，運(yùn)行后會發(fā)現(xiàn)并沒有生成超鏈接Vue屬性綁定<divid="myApp"><ahref={{url}}></a><!--<ahref=url></a>-->//初學(xué)者可能會這樣寫這是一個(gè)錯(cuò)誤演示</div><script>varapp=newVue({el:'#myApp',data:{bookName:'Vue.js編程入門',url:'/'}})</script>10這時(shí)需要用v-bind，修改代碼再次運(yùn)行后發(fā)現(xiàn)超鏈接可以跳轉(zhuǎn)

v-bind主要用于屬性綁定，Vue官方提供了一個(gè)簡寫方式例如Vue屬性綁定<av-bind:href="url"></a><!—完整語法--><av-bind:href="url"></a><!—縮寫--><a:href="url"></a>11v-bind主要用于屬性綁定，綁定到文本框中。

綁定一段HTML，可使用v-html來綁定,運(yùn)行后發(fā)現(xiàn)<p>標(biāo)簽中有一個(gè)完整的<a>標(biāo)簽Vue屬性綁定<inputtype="text"v-bind:value="bookName"></a><pv-html="urlTag"></p>varapp=newVue({el:'#myApp',data:{urlTag:'<ahref=/>Vue.js</a>'}})Vue雙向數(shù)據(jù)綁定Vue是一個(gè)MVVM框架，即數(shù)據(jù)雙向綁定，當(dāng)數(shù)據(jù)發(fā)生變化的時(shí)，視圖也發(fā)生變化，當(dāng)視圖發(fā)生變化時(shí)，數(shù)據(jù)也會同步變化。綁定的方式有兩種方式表達(dá)式{{}}屬性名也是一種指令1213模板語法只用于簡單運(yùn)算，當(dāng)表達(dá)式過于復(fù)雜時(shí)，Vue提供了計(jì)算屬性computed。引用計(jì)算屬性computed，同時(shí)computed有緩存功能，防止復(fù)雜計(jì)算邏輯多次調(diào)用引起的性能問題。Vue計(jì)算屬性14演示計(jì)算屬性<divid="app"><h2>圖書</h2><div>您購買了{(lán){}}共{{book.count}}本===￥{{book.price}}/本</div><div>總價(jià)：{{totalPrice}}</div></div><sciprt>varvm=newVue({el:'#app',data:{book:{id:1,price:10,name:'Vue入門',count:1},discount:0.8,deliver:12},computed:{totalPrice(){return(this.book.price*this.book.count)*this.discount+this.deliver;}}})</sciprt>計(jì)算屬性的setter和getter默認(rèn)是getter需要時(shí)可提供setter15Vue計(jì)算屬性setter和getter的區(qū)別在于，setter是當(dāng)computed這個(gè)屬性的值變化時(shí)所觸發(fā)的。16Vue計(jì)算屬性<divid="app"><inputv-model="firstName"/><inputv-model="lastName"/><inputv-model="fullName"/></div><script>varvm=newVue({el:'#app',data:{firstName:'Foo',lastName:'Bar'},computed:{fullName:{get:function(){returnthis.firstName+''+this.lastName},set:function(newValue){

varnames=newValue.split('')this.firstName=names[0]this.lastName=names[names.length-1]}}}})</script>//getter//setter

17計(jì)算屬性與methods的區(qū)別methods將被混入Vue實(shí)例中通過VM實(shí)例訪問在指令表達(dá)式中使用方法中的this自動(dòng)綁定為Vue實(shí)例18計(jì)算屬性與methods的區(qū)別<divid="app"><h2>圖書</h2><div>您購買了{(lán){}}共{{book.count}}本===￥{{book.price}}/本</div><div>總價(jià)：{{totalPrice()}}</div>//注意括號</div><sciprt>varvm=newVue({el:'#app',data:{book:{id:1,price:10,name:'Vue入門',count:1},discount:0.8,deliver:12},methods:{totalPrice:function(){return(this.book.price*this.book.count)*this.discount+this.deliver;}}})</sciprt>//methods

兩種方式的最終結(jié)果確實(shí)是完全相同的。19數(shù)據(jù)處理結(jié)構(gòu)清晰依賴于數(shù)據(jù)，處理結(jié)果自動(dòng)更新計(jì)算屬性內(nèi)部this指向vm實(shí)例在模板調(diào)用時(shí)，直接寫計(jì)算屬性名即可常用getter方法獲取數(shù)據(jù)；也可用setter方法改變數(shù)據(jù)依賴數(shù)據(jù)不變時(shí)，compute

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論