js簡單雙向綁定案例代碼（js如何實現雙向綁定）

本文目錄一覽：

• 1、實現雙向數據綁定
• 2、js實現數據雙向綁定
• 3、vuejs怎樣實現列表中checkbox的雙向綁定及初始化渲
• 4、Vue.js入門教程（三）雙向綁定和數據渲染
• 5、vuejs怎樣實現列表中checkbox的雙向綁定及初始化渲染
• 6、AngularJS的數據雙向綁定是怎麼實現的

實現雙向數據綁定

MVVM框架主要包含3個部分: model 、 view 和 viewmodel 。

簡單的來說，就是框架的控制器層（這裡的控制器層是一個泛指，可以理解為控制view行為和聯繫model層的中間件）和UI展示層（view層）建立一個雙向的數據通道。當這兩層中的任何一方發生變化時，另一層將會自動作出相應的變化。

一般來說要實現這種雙向數據綁定，在前端我目前了解的有三種形式：

目前angular,regular的實現都是基於臟檢查。當發生某些特定的事情的時候，框架會調用相關的digest方法。內部邏輯就是遍歷所有的 watcher ,對監控的屬性做對比。如果值發生了變化，則執行相應的 handler 。

當系統進入臟檢查階段，遍歷所有的 $watch 綁定的 watcher ,然後對比 watcher.get() 與 watcher.last ,如果不同則運行對應的 watcher.fn(newvalue, oldvalue) 。然後再進入下一個watcher的檢查。

何時進行臟檢查？

由於regularjs是基於臟檢查，所以當不是由regularjs本身控制的操作(如事件、指令)引起的數據操作，可能需要你手動的去同步data與view的數據. $update方法即幫助將你的data同步到view層.

]( )元素來控制你的觀察者數量。

使用ES7中的 Object.observe 方法對對象（或者其屬性）進行監控觀察，一旦其發生變化時，將會執行相應的handler。這是目前監控屬性數據變更最完美的一種方法，語言（瀏覽器）原生支持，沒有什麼比這個更好了。唯一的遺憾就是目前支持廣度還不行，有待全面推廣。

vue.js和avalon.js實現數據雙向綁定的原理就是屬性訪問器。

它使用了ES5中的定義標準屬性的Object.defineProperty 方法。

Object.defineProperty 使用示例：

首先，vuejs在實例化的過程中，會對遍歷傳給實例化對象選項中的data 選項，遍歷其所有屬性並使用 Object.defineProperty 把這些屬性全部轉為 getter/setter。

同時每一個實例對象都有一個watcher實例對象，他會在模板編譯的過程中,用getter去訪問data的屬性，watcher此時就會把用到的data屬性記為依賴，這樣就建立了視圖與數據之間的聯繫。當之後我們渲染視圖的數據依賴發生改變（即數據的setter被調用）的時候，watcher會對比前後兩個的數值是否發生變化，然後確定是否通知視圖進行重新渲染。這樣就實現了所謂的雙向數據綁定。

js實現數據雙向綁定

我們主要通過ES5中的 Object.defineProperty 實現，主要是利用裡面的 get 和 set 來實現數據雙向綁定

以上沒滿足知識量的可查看詳情 : 雙向綁定原理詳情

以上就是對ES5中Object.defineProperty實現雙向數據綁定的理解

vuejs怎樣實現列表中checkbox的雙向綁定及初始化渲

1.雙向綁定可以綁定到同一個數組

input type=”checkbox” value=”Jack” v-model=”checkedNames”

label for=”jack”Jack/label

input type=”checkbox” value=”John” v-model=”checkedNames”

label for=”john”John/label

input type=”checkbox” value=”Mike” v-model=”checkedNames”

label for=”mike”Mike/label

br

spanChecked names: {{ checkedNames | json }}/span

這樣可以不做任何處理，獲得所有checked的checkbox。

2.可是如果需要初始化渲染，一部分checkbox被預選中，v-model需要綁定一個boolen值checked:

tr v-for=”item in list”

td

input type=”checkbox” :value=”item.value” v-model=”item.checked” /

/td

/tr

new Vue({

el: ‘body’,

data: {

list: [{checked:true,value:’a’},{checked:false,value:’b’}]

}

});

Vue.js（讀音 /vjuː/, 類似於 view）是一個構建數據驅動的 web 界面的漸進式框架。Vue.js 的目標是通過儘可能簡單的 API 實現響應的數據綁定和組合的視圖組件。它不僅易於上手，還便於與第三方庫或既有項目整合。

另一方面，當與單文件組件和 Vue 生態系統支持的庫結合使用時，Vue 也完全能夠為複雜的單頁應用程序提供驅動。

Vue.js入門教程（三）雙向綁定和數據渲染

既然清楚了原理，那麼，接下來進入正題——我知道了vue怎麼安裝，那麼我怎麼使用呢？

在告訴你基礎用法之前，我還是要先告訴你一個情況。

可能要令你有點失望。vue主要是側重於數據端的。他的目的就是渲染數據和在前端調整一下數據邏輯。

他不是像jquery那樣讓你用來做特技的。就算你要做特技。你也應該通過css3/canvas而不是dom。

所謂的雙向綁定，你可以理解就是把view。（你還不清楚mvc的話，請看第一章）

和model綁定到一起。說白了，就是你js中的綁定值變了。你dom中的內容就跟著一塊變了。

vue是通過解析{{文字..}}來生成內容的。後面綁定方法，輸出內容的時候都會講到。

列表輸出使用 v-for，這些v開頭加橫杠的叫做命令

這些命令是可以自定義的。但是那都屬於高級操作，我們不用它也完全足夠支撐做一個大型項目了。

其實你回發現，這裡無論是v-for或者是v-什麼其他玩意

它都深刻的遵循了es6的語法。這裡不就是一個典型的for in 循環嗎。不過我們現在都用for of了。

你記住這個用法，它就長這樣。

前後端分離開發的關鍵在於：後台只提供介面。

我們獲得的數據多數情況下，僅僅是一個json，而mvvm的關鍵就再於解析數據在前端完成了。如果你了解jsp或者php你會了解，數據的解析在mvc中，

是由後端完成的，而html只負責顯示。

所以，當你了解了數據綁定和渲染以後，你可以第一時間先把數據輸出到頁面了。

我們前端最厲害的地方不就是處理能看得見的東西嗎？

vuejs怎樣實現列表中checkbox的雙向綁定及初始化渲染

雙向綁定可以綁定到同一個數組

input type=”checkbox” id=”jack” value=”Jack” v-model=”checkedNames”

label for=”jack”Jack/label

input type=”checkbox” id=”john” value=”John” v-model=”checkedNames”

label for=”john”John/label

input type=”checkbox” id=”mike” value=”Mike” v-model=”checkedNames”

label for=”mike”Mike/label

br

spanChecked names: {{ checkedNames | json }}/span

這樣可以不做任何處理，獲得所有checked的checkbox。

可是如果需要初始化渲染，一部分checkbox被預選中，v-model需要綁定一個boolen值checked:

tr v-for=”item in list”

td

input type=”checkbox” :value=”item.value” v-model=”item.checked” /

/td

/tr

new Vue({

el: ‘body’,

data: {

list: [{checked:true,value:’a’},{checked:false,value:’b’}]

}

});

利用 filter ， map 來完成

methods: {

getChecked: function() {

// 先透過 filter 篩選出 checked 為 true 的 item

// 在透過 map 只回傳 item 的 value

return this.list.filter(item = item.checked).map(item = item.value)

}

}

AngularJS的數據雙向綁定是怎麼實現的

AngularJS的數據雙向綁定的實現思路：$scope變數中使用臟檢測來實現了數據雙向綁定。

Scope作用：

通過數據共享連接Controller和View

事件的監聽和響應

臟檢測和數據綁定 雙向數據綁定最經常的應用場景就是表單了，這樣當用戶在前端頁面完成輸入後，不用任何操作。

在該作用域內可以做到數據和視圖的相互綁定，同時又能與其他$scope對象的作用域隔離開來。 當然，$scope也可以實現繼承， 在一個controller裡面的作用域可以繼承它上一級的scope這樣就不是獨立存在了。

核心angular代碼：

.module(‘mymodule’, []);

mymodule.controller(‘CartController’, [‘$scope’,

function CartController($scope) {

     // scope範圍內的數據雙向綁定

       $scope.items = [

           {name: “Angular應用”, quantity: 1, price: 199.00},

           {name: “Angular入門”, quantity: 1, price: 139.00},

           {name: “AngularJS權威教程”, quantity: 2, price: 84.20}

       ];

      //直接綁定事件remove

       $scope.remove = function (index) {

           $scope.items.splice(index, 1);

       }

   }

])