傳智播客上海校區知識點解析：簡單模擬vue中的雙向資料繫結

胖影發表於2018-04-04
Vue


 

很多同學在開發過程中都會遇到雙向資料繫結的知識點，那麼什麼是雙向資料繫結呢？今天傳智播客上海校區趙老師就帶領大家來學習關於雙向資料繫結。


vue是一個mvvm框架，即資料雙向繫結，即當資料發生變化的時候，檢視也就發生變化，當檢視發生變化的時候，資料也會跟著同步變化，這也算是vue的精髓之處了。傳智播客上海校區趙老師提醒大家值得注意的是，我們所說的資料雙向繫結，一定是對於UI控制元件來說的，非UI控制元件不會涉及到資料雙向繫結。

 

對此，傳智播客上海校區趙老師給大家總結出了以下兩點：


一、訪問器屬性  

在實現雙向資料繫結之前，我們必須要理解訪問器屬性Object.defineProperty()這個概念：
Object.defineProperty()函式可以定義物件的屬性相關描述符， 其中的set和get函式對於完成資料雙向繫結起到了至關重要的作用，下面，傳智播客上海校區趙老師將帶領大家學習下這個函式的基本使用方式。

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

var obj = {

foo: 'foo'

}

 

Object.defineProperty(obj, 'foo', {

get: function () {

console.log('將要讀取obj.foo屬性');

},

set: function (newVal) {

console.log('當前值為', newVal);

}

});

 

obj.foo; // 將要讀取obj.foo屬性

obj.foo = 'name'; // 當前值為 name

可以看到，get即為我們訪問屬性時呼叫，set為我們設定屬性值時呼叫。


二、簡單的資料雙向繫結實現方法

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

<!DOCTYPE html><html lang="en">

<head>

    <meta charset="UTF-8">

    <title>forvue</title>

</head>

<body>

<input type="text" id="textInput">

輸入：<span id="textSpan"></span>

<script>

    var obj = {},

        textInput = document.querySelector('#textInput'),

        textSpan = document.querySelector('#textSpan');

 

    Object.defineProperty(obj, 'foo', {

        set: function (newValue) {

            textInput.value = newValue;

            textSpan.innerHTML = newValue;

        }

    });

 

    textInput.addEventListener('keyup', function (e) {

        obj.foo = e.target.value;

    });

 

</script>

</body>

</html>

 

在瀏覽器中測試，發現實現了雙向繫結的功能： 使用Object.defineProperty()來定義屬性的set函式，屬性被賦值的時候，修改Input的value值以及span中的innerHTML；然後監聽input的keyup事件，修改物件的屬性值。即可實現這樣的一個簡單的資料雙向繫結。

 

以上就是傳智播客上海校區趙老師為大家分享的關於雙向資料繫結的知識點解析，希望大家在工作中能靈活運用，並在工作中不斷進步和提高。

 

相關文章