第3章Vue數據綁定課件V1.0

教學內容第一節

Vue中數據綁定原理第二節單向數據綁定第三節

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

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

數據綁定方法1、文本插值2、JavaScript表達式和HTML插值

所謂數據鏈，它是一種數據關聯的形式，在這種形式中，有一到多個的起始數據點，稱之為元數據，而由這些元數據因某種關系衍生出的數據，稱之為衍生數據。元數據與衍生數據通過數據節點交織在一起，形成數據結構網，而這種結構網，我們稱之為數據鏈。

Vue中數據鏈

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

嚴格來說，MVC框架是一種設計思想。它的結構與后端語言的MVC一樣，由Model、View、Controller三部分組成，它們三者的關系如圖所示。MVC框架演變過程ViewControllerModeluseractionupdatenotifyupdate

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

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

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

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

<div>{{name}}</div>使用這種方式插值后，如果name值發生了改變，插值處元素的內容也會隨之改變，也可以在這個元素上添加一個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語法不僅可以向元素內容插入文本字符，同時，還可以在語法中插入簡單的JavaScri