和js雙向綁定實例相關的問題,vuejs雙向綁定原理

本文目錄一覽：

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

AngularJS雙向綁定的選擇，解決方法？

AngularJS的雙向綁定特性的確很好用，但是在實際使用中遇到了一些問題：

首先使用ng-repeat將數據重複展示出來（item in datas），然後在關聯的modal對話框中提供修改功能（將item的對應項使用ng-model綁在modal的form上），但是由於雙向綁定的原因，即便未點擊保存按鈕，在對話框中的修改也會實時影響到頁面上的展示數據，這樣有些影響體驗。

相關代碼

html:

div ng-repeat=”item in data”

{{item.name}}

{{item.age}}

/div

a data-toggle=”modal” data-target=”#mySettingModal{{item.id}}” ng-click=”fresh(item)”modify/a

div class=”modal fade” id=”mySettingModal{{item.id}}” tabindex=”-1″ role=”dialog” aria-labelledby=”myModalLabel” aria-hidden=”true”

div class=”modal-dialog” style=”z-index: 1050″

form name=”form”

div class=”form-group”

label for=”name” class=”control-label”名稱:/label

input type=”text” class=”form-control” id=”name” ng-model=”item.name” /

/div

/form

button type=”button” class=”btn btn-default” data-dismiss=”modal” ng-click=”reset()”Close/button

button type=”button” class=”btn btn-primary” ng-click=”updateSetting(item)”Save changes/button

/div

/div

js的寫法：

$http.get(“/”).success(function(data) {

$scope.data = data;

var interItem;

$scope.fresh = function(item) {

interItem = item;

console.log(interItem);

};

$scope.reset = function() {

console.log(interItem);

}

});

實現雙向數據綁定

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會對比前後兩個的數值是否發生變化，然後確定是否通知視圖進行重新渲染。這樣就實現了所謂的雙向數據綁定。

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

在js的很多支持數據雙向綁定的框架中，其主要實現原理為同時監聽頁面view和model的變數然後進行雙向更新：

視圖層的變化主要就是表單控制項的用戶輸入行為造成的，比如input，select，textarea等。那麼只需要監聽一些事件，比如keypress，keydown，keyup，change。然後在事件回調函數中，將變化的值更新到Model中。當然同時，由於Model發生了變化，就得再次更新一下View。

而Model的變化監聽方式可以有多種，主要有以下幾種： 發布訂閱模式（Backbone），數據劫持（VueJS，AvalonJS），數據臟檢查（Angularjs，RegularJS）， View抽象的臟檢查（ReactJS）。

下面就來說一說Angularjs用到的數據臟檢查方式的實現原理：

數據臟檢查大體意思上來說，就是記錄所有變數的當前值，當發生某些操作之後，通過$apply或者$digest進入臟檢查環節。對比最近的一次值和現在的值是否一致，不一致則實現頁面的更新，然後再執行一次直到數據不再發生變化。

詳細一點就是首先angularJS將它自定義的html頁面轉化為正常的dom，相對來說就是要解析那些angularJS專有的指令。頁面上的指令有compile和link階段，compile的時候搜索匹配，然後執行指令定義時寫的compile函數，link階段將那些變數插入watch隊列。觸發臟檢查時全部遍歷一次watch隊列，實現視圖的更新。

而觸發臟檢查會有以下幾種情況：

DOM事件，譬如用戶輸入文本，點擊按鈕(ng-click)等

XHR響應事件 ($http)

瀏覽器Location變更事件 ($location)

Timer事件($timeout, $interval)

執行$digest()或$apply()

最後一種情況應該是統一的入口，只不過前幾種情況會自動調用這個入口而已。其他情況下，用戶需要手動進入臟檢查的話，就要執行$digest()或$apply()了。

js中的雙向數據綁定是什麼意思

雙向數據綁定指的就是，綁定對象屬性的改變到用戶界面的變化的能力，反之亦然。換種說法，如果我們有一個user對象和一個name屬性，一旦我們賦了一個新值給user.name,在UI上就會顯示新的姓名了。同樣地，如果UI包含了一個輸入用戶姓名的輸入框，輸入一個新值就應該會使user對象的name屬性做出相應的改變。

詳細的解釋和例子可以看下這篇文章，，希望對你有幫助

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的雙向綁定及初始化渲？

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 也完全能夠為複雜的單頁應用程序提供驅動。