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

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

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

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

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

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

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