2. 程式人生 > >怎麼理解vue的資料雙向繫結

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

阿新 • • 發佈：2019-01-01

單向資料繫結

指的是我們先把模板寫好，然後把模板和資料（資料可能來自後臺）整合到一起形成HTML程式碼，然後把這段HTML程式碼插入到文件流裡面。
單向資料繫結缺點：HTML程式碼一旦生成完以後，就沒有辦法再變了，如果有新的資料來了，那就必須把之前的HTML程式碼去掉，再重新把新的資料和模板一起整合後插入到文件流中。 簡單的來說就是DOM操作直接改變

資料資料雙向

資料模型（Module）和檢視（View）之間的雙向繫結。
使用者在檢視上的修改會自動同步到資料模型中去，同樣的，如果資料模型中的值發生了變化，也會立刻同步到檢視中去。雙向資料繫結的優點是無需進行和單向資料繫結的那CRUD（Create，Retrieve，Update，Delete）操作雙向資料繫結最經常的應用場景就是表單了，這樣當用戶在前端頁面完成輸入後，不用任何操作，我們就已經拿到了使用者的資料存放到資料模型中了。

如何使用js達到雙向資料繫結

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" id="userName">
<br>
<span id ="uName"></span>
<script>
    var obj={
        pwd:"1234"
 

    };
    //主要使用到了get和set方法，最為關鍵
    Object.defineProperty(obj,"userName",{
        get:function(){
            console.log('get init');
        },
        set:function(val){
            console.log("set init");
            document.getElementById("uName").innerText=val;
            document.getElementById("userNmae"
 
).value=val;
        }
    });
    document.getElementById("userName").addEventListener("keyup",function(event){
        obj.userName=event.target.value;
    }
    )
</script>
</body>
</html>

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

相關推薦

Vue資料雙向繫結探究

使用過vue的小夥伴都會感覺，哇，這個框架對開發者這麼友好，簡直都要笑出聲了。 確實，使用過vue的框架做開發的人都會感覺到，以前寫一大堆操作dom，bom的東西，現在用不著了，對開發者來說更容易去注重對操作邏輯的思考和實現，省了不少事兒呢！！！ 我是直接從原生js，jq的開發用過度到使用v

Vue資料雙向繫結的原理

vue資料雙向繫結是通過資料劫持結合釋出者-訂閱者模式的方式來實現的。 雙向繫結就是檢視上的變化能夠反映到資料上，資料上的變化也能反映到檢視上。如下圖所示： 關鍵點在於data如何更新view，因為view更新data其實可以通過事件監聽即可，比如input

vue資料雙向繫結的原理和vue-router路由的實現原理

vue實現雙向資料繫結的原理就是利用了 Object.defineProperty() 這個方法重新定義了物件獲取屬性值(get)和設定屬性值(set)的操作來實現的。 在MDN上對該方法的說明是：Object.defineProperty() 方法會直接在一個物件上定義一

談談Vue資料雙向繫結原理，看看你的回答能打幾分

面試官的這個問題也可以理解成為“你是怎麼理解Vue資料繫結，知道它背後實現的原理麼”。一般剛畢業的前端新人可能會說，用v-model。（當然，這可能是句廢話） 如果簡單說下v-model指令，是Vue的語法糖之類的，可能不會讓面試官滿意，也看不出你對Vue的熟練程度。只能說

理解前端資料雙向繫結原理——Object.defineProperty()

理解前端資料雙向繫結原理:Object.defineProperty() Object.definedProperty方法可以在一個物件上直接定義一個新的屬性、或修改一個物件已經存在的屬性，最終返回這個物件。 語法 Object.definePrope

Vue資料雙向繫結原理

先看效果圖 //程式碼： <div id="app"> <input v-model="name" type="text"> <h1>{{name}}</h1> </div&g

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

單向資料繫結 指的是我們先把模板寫好，然後把模板和資料（資料可能來自後臺）整合到一起形成HTML程式碼，然後把這段HTML程式碼插入到文件流裡面。 單向資料繫結缺點：HTML程式碼一旦生成完以後，就沒有辦法再變了，如果有新的資料來了，那就必須把之前的HTML

vue原始碼學習——資料雙向繫結的Object.defineProperty

情景：vue雙向繫結，這應該是多數講vue優勢脫口而出的名詞，然後你就會接觸到一個方法 Object.defineProperty(a,"b",{}) 這個方法該怎麼用 簡單例子敲一下 var a = {} Object.defineProperty(a,"b

React學習之旅----實現類似vue的資料雙向繫結

react沒有資料的雙向繫結，但可以用過一些方法實現： import React from 'react'; class TodoList extends React.Component { constructor(props) { super(props) this.sta

轉 vue實現雙向資料繫結之原理及實現篇 vue的雙向繫結原理及實現

轉自：canfoo#! vue的雙向繫結原理及實現 前言 先上個成果圖來吸引各位： 程式碼：                          &nb

Vue-事件資料雙向繫結

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>事件處理, 雙向資料繫結</title> <script src="js/v

vue中v-model的資料雙向繫結(重要)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body&

Vue 建構函式、生命週期與資料雙向繫結

Vue2 建構函式、生命週期與資料雙向繫結 Vue是一個響應式的、漸進式的JavaScript框架，它在設計上採用MVVM模式，將檢視與資料兩部分分離。下面就是一個簡單的Vue例項： <!DOCTYPE html> <html lang="en"> <h

vue的資料雙向繫結

1.在data中設定的資料才會進行雙向繫結 2.陣列 2.1.data中的陣列，觸發陣列更新的方式有：pop、push、shift、unshift、splice、sort、reverse 2.2.而filter、slice、cancat等方式並不會改變原陣

Vue學習日誌第二天 v-model 資料雙向繫結 eval函式用法

<div id="app"> <p> {{msg}}</p> <p><input type="text" v-b

vue之選單新增選擇，知識：資料雙向繫結、迴圈渲染、事件點選以及按鍵的點選

要求： 1.可以增加菜名 2.可以刪除菜名 3.點選選擇菜名後自動增加到已選選單中 4.可以在已選選單中取消選擇   程式碼： <template> <div> <input type="text" ref="add"> &

vue 2.0 資料雙向繫結

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <script src="js/vue.js"></script

面試總結：vue實現資料雙向繫結的原理

vue實現資料雙向繫結的原理就是用Object.defineproperty()重新定義（set方法）物件設定屬性值和（get方法）獲取屬性值的操縱來實現的 Object.property()方法的解釋：Object.property(引數1，引數2，引數3)   返回值為

vue響應式原理（資料雙向繫結的原理）

先來了解一下幾個相關概念 1、漸進式框架 下面是摘自知乎的一個解答（個人認為講述比較好的回答）： 在我看來，漸進式代表的含義是：主張最少。 每個框架都不可避免會有自己的一些特點，從而會對使用者有一定的要求，這些要求就是主張，主張有強有弱，它的強勢程度會影響在業務開發中的

Vue父子元件資料雙向繫結，子元件可修改props

父元件 => props[parent-data] => 子元件 => watch[parent-data] => children-data = parent-data // 子元件監聽父元件的改變 子元件 => $emit[children