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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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