vue實現(xiàn)簡單數(shù)據(jù)雙向綁定

更新時間：2021年04月28日 14:33:12 作者：Frazier_梁超

這篇文章主要為大家詳細介紹了vue實現(xiàn)簡單數(shù)據(jù)雙向綁定，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue實現(xiàn)簡單數(shù)據(jù)雙向綁定的具體代碼，供大家參考，具體內(nèi)容如下

這里是簡單的實現(xiàn)，有助于新手理解消化，當(dāng)然vue要實現(xiàn)雙向數(shù)據(jù)代理不可缺少，期待后續(xù)在更新

vue雙向數(shù)據(jù)綁定

-> Object.defineProperty() //2.0核心語法
-> 數(shù)據(jù)代理
-> 雙向綁定
-> 訂閱發(fā)布模式
compile-> 模版解析 (template模版 html 指令 {{表達式}})
observer-> 觀察者(訂閱發(fā)布) data里的所有的屬性進行數(shù)據(jù)劫持數(shù)據(jù)代理
watcher-> 監(jiān)聽 data里的所有的屬性被改變之后觸發(fā)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="text" id="ipt" />
    <p id="lc"></p>
  </body>
</html>

<script>
  //獲取頁面元素
  var ipt = document.getElementById("ipt");
  var ps = document.getElementById("lc");

  var obj = { name: "" };

  //vue雙向數(shù)據(jù)綁定的核心原理應(yīng)用
  Object.defineProperty(obj, "name", {
    get() {
      return ipt.value;
    },
    set(newval) {
      ipt.value = newval;
      ps.innerHTML = newval;
    },
  });

  //監(jiān)聽input中的數(shù)據(jù)變化并賦值p標(biāo)簽
  ipt.addEventListener("keyup", function() {
    ps.innerHTML = ipt.value;
  });
</script>

效果展示：

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue使用Element的Tree樹形控件實現(xiàn)拖動改變節(jié)點順序方式
這篇文章主要介紹了vue使用Element的Tree樹形控件實現(xiàn)拖動改變節(jié)點順序方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-12-12
webpack4+express+mongodb+vue實現(xiàn)增刪改查的示例
這篇文章主要介紹了webpack4+express+mongodb+vue 實現(xiàn)增刪改查的示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-11-11
關(guān)于Vue中的watch監(jiān)視屬性
這篇文章主要介紹了關(guān)于Vue中的watch監(jiān)視屬性,Vue中的watch默認(rèn)不監(jiān)視對象內(nèi)部值的改變,當(dāng)被監(jiān)視的屬性變化時，回調(diào)函數(shù)自動調(diào)用，進行相關(guān)操作,需要的朋友可以參考下
2023-04-04
Vue實現(xiàn)添加數(shù)據(jù)到二維數(shù)組并顯示
這篇文章主要介紹了Vue實現(xiàn)添加數(shù)據(jù)到二維數(shù)組并顯示方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04
vue3雙向綁定實現(xiàn)原理解讀
這篇文章主要介紹了vue3雙向綁定實現(xiàn)原理解讀,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-10-10
vue使用recorder-core.js實現(xiàn)錄音功能
這篇文章主要介紹了vue如何使用recorder-core.js實現(xiàn)錄音功能,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2023-07-07
Vue 實現(xiàn)前進刷新后退不刷新的效果
這篇文章主要介紹了Vue 實現(xiàn)前進刷新后退不刷新的效果,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-06-06
詳解Vue與VueComponent的關(guān)系
這篇文章主要為大家介紹了Vue與VueComponent的關(guān)系，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2021-12-12
vue元素樣式實現(xiàn)動態(tài)改變方法介紹
vue通過js動態(tài)修改元素的樣式，如果是固定的幾個樣式，我常用的是綁定元素的calss,給不同的class寫好需要的樣式，js控制是否使用這個class
2022-09-09
Vue.js學(xué)習(xí)教程之列表渲染詳解
這篇文章主要給大家介紹了關(guān)于Vue.js列表渲染的相關(guān)資料，文中介紹的非常詳細，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。
2017-05-05