Vue.js前端開發(fā)框架應(yīng)用（微課版） 課件 第二章 數(shù)據(jù)綁定

Vue.js框架應(yīng)用數(shù)據(jù)綁定目

錄模板語法響應(yīng)式聲明渲染機(jī)制Vue.js計(jì)算屬性Vue.js生命周期目

錄模板語法響應(yīng)式聲明渲染機(jī)制Vue.js計(jì)算屬性Vue.js生命周期模板語法一、了解模板語法Vue.js使用模板語法可以將數(shù)據(jù)聲明式地綁定呈現(xiàn)到DOM上。Vue.js使用一種基于HTML的模板語法，所有的Vue.js模板都是語法層面合法的HTML，可以被符合規(guī)范的瀏覽器和HTML解析器解析。在底層機(jī)制中，Vue.js會(huì)將模板編譯成高度優(yōu)化的JavaScript代碼。結(jié)合響應(yīng)式系統(tǒng)，當(dāng)應(yīng)用狀態(tài)變更時(shí)，Vue.js能夠智能地推導(dǎo)出需要重新渲染的組件的最少數(shù)量，并應(yīng)用最少的DOM操作。模板語法包括插值、文本、表達(dá)式、屬性綁定、指令等方面的內(nèi)容。模板語法二、插值最基本的數(shù)據(jù)綁定形式是文本插值，它使用的是“Mustache”語法（即雙大括號(hào)）。注意：雙大括號(hào)會(huì)將數(shù)據(jù)解釋為純文本，而不是HTML。如果需要瀏覽器解析標(biāo)記，需使用v-html指令，該指令將在后面章節(jié)介紹。data(){return{msg:“青春筑夢，強(qiáng)國有我”}}<h2>{{msg}}</h2>模板語法三、表達(dá)式Vue.js模板中除了可以綁定簡單的屬性名，還支持完整的JavaScript表達(dá)式。注意：每個(gè)綁定僅支持單一表達(dá)式，也就是一段能夠被求值的JavaScript代碼。這樣的寫法是無效的：{{varage=20}}、{{if(age){returninfo}}}，因?yàn)殡p大括號(hào)里面是一條語句而不是一個(gè)表達(dá)式。<h2>{{age+2}}</h2><h2>{{info.split(“-”)}}</h2>h2>{{age>=18?“成年人”：“未成年人”}}</h2>目

錄模板語法響應(yīng)式聲明渲染機(jī)制Vue.js計(jì)算屬性Vue.js生命周期響應(yīng)式聲明渲染機(jī)制一、響應(yīng)式聲明渲染機(jī)制簡介Vue.js是一個(gè)響應(yīng)式系統(tǒng)，當(dāng)Vue.js數(shù)據(jù)發(fā)生改變時(shí)，視圖中的數(shù)據(jù)會(huì)自動(dòng)更新。聲明式渲染是Vue.js對數(shù)據(jù)進(jìn)行操作的模式，也叫作響應(yīng)式渲染。模型（Model）層是普通的JavaScript對象，當(dāng)視圖（View）層中的DOM節(jié)點(diǎn)上綁定了Vue.js的對象時(shí)，如果這個(gè)對象的屬性發(fā)生了任何改變，無須進(jìn)行其他操作，頁面上的對應(yīng)的數(shù)據(jù)會(huì)自動(dòng)發(fā)生變化，即更新，所以叫作響應(yīng)式渲染。聲明式渲染主要包括聲明響應(yīng)式狀態(tài)和聲明方法。響應(yīng)式聲明渲染機(jī)制一、響應(yīng)式聲明渲染機(jī)制簡介1.聲明響應(yīng)式狀態(tài)data(){return{msg:“青春筑夢，強(qiáng)國有我”}}<h2>{{msg}}</h2>響應(yīng)式聲明渲染機(jī)制一、響應(yīng)式聲明渲染機(jī)制簡介2.聲明方法data(){return{msg:“青春筑夢，強(qiáng)國有我”}},methods:{showInfo(){returnthis.msg;}}<h2>{{showinfo()}}</h2>響應(yīng)式聲明渲染機(jī)制二、Vue.js屬性綁定Vue.js也可以將數(shù)據(jù)響應(yīng)式地綁定到一個(gè)HTML屬性上。這時(shí)不能使用雙大括號(hào)也不能直接使用數(shù)據(jù)，而應(yīng)該使用v-bind指令，關(guān)于指令的內(nèi)容將在第3章詳細(xì)介紹。data(){return{mytitle:“響應(yīng)式標(biāo)題”}}<h2v-bind:title=“mytitle”>標(biāo)題文本</h2>語法規(guī)則:v-bind:html屬性名=“綁定的數(shù)據(jù)名”響應(yīng)式聲明渲染機(jī)制三、Vue.js雙向數(shù)據(jù)綁定Vue.js可以通過v-model指令實(shí)現(xiàn)雙向數(shù)據(jù)綁定，即當(dāng)數(shù)據(jù)發(fā)生變化時(shí)，視圖隨之更新，同時(shí)，當(dāng)視圖變化時(shí)，數(shù)據(jù)也會(huì)同步變化。雙向綁定是Vue.js的特色之一。data(){return{country:"China",}}<p>{{country}}</p>//單向綁定<inputtype=“text”v-model=“country”/>//雙向綁定語法規(guī)則:v-model=“綁定的數(shù)據(jù)名”目

錄模板語法響應(yīng)式聲明渲染機(jī)制Vue.js計(jì)算屬性Vue.js生命周期Vue.js計(jì)算屬性一、計(jì)算屬性在Vue.js的模板中可以直接通過插值語法顯示一些data中的數(shù)據(jù)，也可以使用表達(dá)式作為值，但是在模板中放入太多的邏輯會(huì)讓模板過重和難以維護(hù)。如果多個(gè)地方都使用到相同的邏輯，還會(huì)產(chǎn)生大量重復(fù)的代碼。解決這個(gè)問題的一種方法是將邏輯抽取到一個(gè)method中，但是這種做法有一個(gè)直觀的弊端，就是所有的data使用過程都會(huì)變成了一個(gè)方法的調(diào)用。Vue.js給我們了另外一種方式是使用計(jì)算屬性computed。computed也是組件實(shí)例的一個(gè)選項(xiàng)。data(){return{books:["美麗中國","建設(shè)新時(shí)代社會(huì)主義文化強(qiáng)國","教育強(qiáng)國戰(zhàn)略"],};},computed:{bookCount(){//`this`指向當(dāng)前組件實(shí)例returnthis.books.length>0?"Yes":"No";}},<h2>書籍是否存在庫存：{{bookCount}}</h2>Vue.js計(jì)算屬性二、計(jì)算屬性與methods的區(qū)別計(jì)算屬性是有緩存的，在其依賴的數(shù)據(jù)不發(fā)生變化時(shí)計(jì)算屬性不需要重新計(jì)算。只有當(dāng)依賴的數(shù)據(jù)發(fā)生變化，計(jì)算屬性才會(huì)重新進(jìn)行計(jì)算。目

錄模板語法響應(yīng)式聲明渲染機(jī)制Vue.js計(jì)算屬性Vue.js生命周期Vue.js生命周期一、Vue.js實(shí)例生命周期圖解在生物學(xué)上，生命周期指的是一個(gè)生物體從生命開始到結(jié)束周而復(fù)始所歷經(jīng)的一系列變化過程。在Vue.js中，每個(gè)組件從創(chuàng)建開始都可能需要經(jīng)歷掛載、更新、卸載等一系列的過程。在這個(gè)過程中的某一個(gè)階段，可能想要添加一些特定的代碼。Vue.js提供了組件的生命周期函數(shù)可以實(shí)現(xiàn)這一需求。生命周期函數(shù)是一些鉤子函數(shù)（回調(diào)函數(shù)），在某個(gè)時(shí)間會(huì)被Vue.js源碼內(nèi)部進(jìn)行回調(diào)，在生命周期函數(shù)中可以編寫屬于自己的邏輯代碼。Vue.js生命周期二、Vue.js各生命周期適合開