Vue.js 超詳細(xì)入門與項(xiàng)目實(shí)戰(zhàn)（微課視頻版）課件 第03章 Vue 數(shù)據(jù)綁定

第3章Vue數(shù)據(jù)綁定課件V1.0

教學(xué)內(nèi)容第一節(jié)

Vue中數(shù)據(jù)綁定原理第二節(jié)單向數(shù)據(jù)綁定第三節(jié)

雙向數(shù)據(jù)綁定第四節(jié)數(shù)據(jù)綁定方法知識(shí)目標(biāo)教學(xué)目標(biāo)理解和掌握Vue中數(shù)據(jù)綁定原理理解單向和雙向數(shù)據(jù)綁定工作過(guò)程和原理掌握綁定文本和指令綁定數(shù)據(jù)的方法知識(shí)點(diǎn)預(yù)覽#節(jié)知識(shí)點(diǎn)難點(diǎn)重點(diǎn)應(yīng)用３C0３-01Vue中數(shù)據(jù)綁定原理1、Vue中數(shù)據(jù)鏈

2、數(shù)據(jù)綁定視圖C0３-02單向數(shù)據(jù)綁定1、MVC框架演變過(guò)程2、單向綁定C0３-03雙向數(shù)據(jù)綁定1、指令v-model2、v-model與修飾符C0３-0４

數(shù)據(jù)綁定方法1、文本插值2、JavaScript表達(dá)式和HTML插值

所謂數(shù)據(jù)鏈，它是一種數(shù)據(jù)關(guān)聯(lián)的形式，在這種形式中，有一到多個(gè)的起始數(shù)據(jù)點(diǎn)，稱之為元數(shù)據(jù)，而由這些元數(shù)據(jù)因某種關(guān)系衍生出的數(shù)據(jù)，稱之為衍生數(shù)據(jù)。元數(shù)據(jù)與衍生數(shù)據(jù)通過(guò)數(shù)據(jù)節(jié)點(diǎn)交織在一起，形成數(shù)據(jù)結(jié)構(gòu)網(wǎng)，而這種結(jié)構(gòu)網(wǎng)，我們稱之為數(shù)據(jù)鏈。

Vue中數(shù)據(jù)鏈

一般而言，一個(gè)對(duì)象是由多個(gè)key/value值對(duì)組成的無(wú)序集合，并且對(duì)象中的每個(gè)屬性值可以是任意類型的，向?qū)ο筇砑訉傩詴r(shí)，可以是字面量或構(gòu)建函數(shù)，如下代碼：varobj=newObject;//等價(jià)于obj={}="張三";//添加描述obj.say=function(){};//添加行為除上述方式之外，還可以使用Object.defineProperty方法定義新屬性或修改原有的屬性值；在設(shè)置和獲取屬性時(shí)，可以使用setter和getter方法，前者用于設(shè)置對(duì)象的屬性值，后者用于獲取對(duì)象的屬性值。數(shù)據(jù)綁定方法

嚴(yán)格來(lái)說(shuō)，MVC框架是一種設(shè)計(jì)思想。它的結(jié)構(gòu)與后端語(yǔ)言的MVC一樣，由Model、View、Controller三部分組成，它們?nèi)叩年P(guān)系如圖所示。MVC框架演變過(guò)程ViewControllerModeluseractionupdatenotifyupdate

但隨著業(yè)務(wù)邏輯越來(lái)越復(fù)雜，使得Controller層代碼量也越來(lái)越多。這時(shí)，就從Controller層抽離出ViewModel對(duì)象進(jìn)行管理和維護(hù)。ViewModel負(fù)責(zé)處理視圖和數(shù)據(jù)邏輯關(guān)系，并雙向綁定View和Model，使得ViewModel對(duì)象更象一座橋梁，用于銜接View和Model層兩端，它們的關(guān)系如圖所示。MVC框架演變過(guò)程ViewControllerModeluseractionupdatenotifyupdateData

所謂“單向”是針對(duì)“雙向”而言的，也就是一個(gè)方向。即從數(shù)據(jù)源獲取數(shù)據(jù)，到視圖層中顯示數(shù)據(jù)一個(gè)方向，在顯示時(shí)并不會(huì)改變?cè)磾?shù)據(jù)，這種單向綁定的方式常用于綁定視圖層中元素固定顯示的內(nèi)容、元素屬性中。單向綁定

在Vue中，v-model指令常用于表單的各元素中，它可以實(shí)現(xiàn)數(shù)據(jù)的雙向綁定效果。即指令中元素的值綁定于數(shù)據(jù)源，數(shù)據(jù)源變化后，元素的值也會(huì)跟隨變化。但同時(shí)，如果元素的值發(fā)生變化，綁定的數(shù)據(jù)源也會(huì)同步變化的值，實(shí)現(xiàn)雙向同步數(shù)據(jù)的效果。指令v-model

當(dāng)表單中的元素與v-model指令綁定時(shí)，還可以通過(guò)“.”語(yǔ)法的方式添加修飾符，如lazy、number和trim。lazy用于延遲元素值與屬性值更新的時(shí)機(jī)。number用于將更新的元素值轉(zhuǎn)成數(shù)字型。trim用于刪除元素值的首尾空格，使字符長(zhǎng)度就是字符的內(nèi)容。v-model與修飾符所謂的“文本插值”是指使用Mustache語(yǔ)法綁定元素中顯示的內(nèi)容，如下代碼：

<div>{{name}}</div>使用這種方式插值后，如果name值發(fā)生了改變，插值處元素的內(nèi)容也會(huì)隨之改變，也可以在這個(gè)元素上添加一個(gè)v-once指令不讓它改變，如下代碼：

<divv-once>{{name}}</div>如果想綁定元素的屬性，必須使用v-bind指令，并使用冒號(hào)“：”，指定綁定屬性的名稱，如下代碼所示：

<divv-bind:class="red">{{name}}</div>上述代碼也等價(jià)于代碼：<div:class="red">{{name}}</div>上述兩行代碼在瀏覽器中編譯后，最終都為相同的一行代碼，如下所示：

<divclass="red"data-v-160690f0="">123</div>文本插值Mustache語(yǔ)法不僅可以向元素內(nèi)容插入文本字符，同時(shí)，還可以在語(yǔ)法中插入簡(jiǎn)單的JavaScri