怎麼理解vue的資料雙向繫結

2021-08-09 23:56:23 字數 1032 閱讀 6252

指的是我們先把模板寫好,然後把模板和資料(資料可能來自後台)整合到一起形成html**,然後把這段html**插入到文件流裡面。

單向資料繫結缺點:html**一旦生成完以後,就沒有辦法再變了,如果有新的資料來了,那就必須把之前的html**去掉,再重新把新的資料和模板一起整合後插入到文件流中。簡單的來說就是dom操作直接改變

資料模型(module)和檢視(view)之間的雙向繫結。

使用者在檢視上的修改會自動同步到資料模型中去,同樣的,如果資料模型中的值發生了變化,也會立刻同步到檢視中去。雙向資料繫結的優點是無需進行和單向資料繫結的那crud(create,retrieve,update,delete)操作雙向資料繫結最經常的應用場景就是表單了,這樣當使用者在前端頁面完成輸入後,不用任何操作,我們就已經拿到了使用者的資料存放到資料模型中了。

lang="en">

charset="utf-8">

titletitle>

head>

type="text"

id="username">

id ="uname">

span>

var obj=;

//主要使用到了get和set方法,最為關鍵

object.defineproperty(obj,"username",,

set:function

(val)

});document.getelementbyid("username").addeventlistener("keyup",function

(event)

)script>

body>

html>

執行上述的dome,可以使用控制台,obj.username=123賦值,會自動觸發set方法。若我們在控制台使用obj.username拿值可以觸發get方法,這也就是vue的雙向資料繫結的核心點。

vue資料的雙向繫結的理解

資料 observer.對資料的屬性進行監聽,如果發生變化,會告訴發布者。發布者 通知訂閱者資料發生變了。發布者會通知訂閱者更新檢視 訂閱者 檢視元素訂閱的資料資訊。data下面的每乙個資料,都會有多個訂閱者。訂閱者的職責 當資料發生變化時,會將與資料相關的元素屬性進行更新 更新檢視 訂閱者與資料的...

輕鬆理解vue的雙向資料繫結問題

vue介紹 vue是當前很火的一款mvvm的輕量級框架,它是以資料驅動和元件化的思想構建的。因為它提供了簡潔易於理解的api,使得我們很容易上手。vue與mvvm 如果你之前已經習慣了用jquery操作dom,學習vue.js時請先拋開手動操作dom的思維,因為vue.js是資料驅動的,你無需手動操...

vue雙向資料繫結

話術 vue中v model可以實現雙向繫結,其核心思想通過object.definepropery來對vue的資料進行資料劫持。主要分為四部分 第一部分observer主要是負責對vue資料進行資料劫持,使其資料擁有get和set方法 第二部分指令解析器負責繫結資料和指令,繫結試圖更新方法 第三部...