快捷導(dǎo)航

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

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

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

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

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

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

-> Object.defineProperty() //2.0核心語(yǔ)法
-> 數(shù)據(jù)代理
-> 雙向綁定
-> 訂閱發(fā)布模式
compile-> 模版解析 (template模版 html 指令 {{表達(dá)式}})
observer-> 觀(guān)察者(訂閱發(fā)布) data里的所有的屬性進(jìn)行數(shù)據(jù)劫持數(shù)據(jù)代理
watcher-> 監(jiān)聽(tīng) 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>
  //獲取頁(yè)面元素
  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)聽(tīng)input中的數(shù)據(jù)變化并賦值p標(biāo)簽
  ipt.addEventListener("keyup", function() {
    ps.innerHTML = ipt.value;
  });
</script>

效果展示：

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

您可能感興趣的文章:

相關(guān)文章

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