angularJs的雙向資料繫結,簡單實用

2021-07-30 09:28:22 字數 571 閱讀 1443

angularjs最大的特點就是雙向資料繫結。所謂雙向資料繫結,簡單的理解就是當js裡的變數被改變時,前端頁面就會立即同步顯示出來,且這個過程類似於ajax的區域性重新整理,瀏覽器的位址列看不到一點變化;反過來,當在前端頁面改變了變數的值,那麼js裡該變數的值也會跟著改變,所以說這是雙向的。它的原理就是髒資料檢查。

請看下面乙個簡單的例子,三步走:

(1)在頁面的頭部引入angularjs,保險起見,一般在頭部引入,如:

(2)定義模組和控制器,如:

m.controller("ctrl",["$scope",function($scope)])

(3)在頁面裡寫上剛剛定義的模組和控制器,如:

結果:剛剛進入:

輸入值後:

可以看到只要輸入框的值發生改變,框外的值也會同步改變。

雙向資料繫結 AngularJS的基本原理學習

angular js angular.js 是一組用來開發web頁面的框架 模板以及資料繫結和豐富ui元件。它支援整個開發程序,提供web應用的架構,無需進行手工dom操作。angularjs很小,只有60k,相容主流瀏覽器,與 jquery 配合良好。雙向資料繫結可能是angularjs最酷最實用...

1120 MVVM框架是如何實現雙向資料繫結剖析。

思路 1.model影響檢視 編譯時註冊watcher,在註冊watcher,呼叫get,通過observer資料劫持get方法,將多個觀察者統一管理起來。當改變資料時,呼叫set方法,將收攏的對應觀察者的upadte方法更新。2.檢視影響model 編譯時註冊wather,node節點繫結對應的事...

vue專案 父元件和子元件之間資料的雙向繫結

vue裡面子元件通過props可以獲取父元件的資料,但是我們在子元件裡無法直接修改props裡傳遞的父元件變數。當然你可以使用vue的子元件事件機制,通過emit來實現反向傳遞資料的能力。但是我自個用的時候總感覺寫好乙個元件之後,用的時候還要在父元件裡加上對應的事件處理很不爽。所以我一般是用下面的方...