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)，有助于新手理解消化，當然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標簽
ipt.addEventListener("keyup", function() {
ps.innerHTML = ipt.value;
});
</script>
效果展示：
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue3中element Plus插槽,#default=scope定義了一個名為 default 的插槽,并將當前行的數(shù)據(jù)傳遞給一個名為 scope 的變量,本文結(jié)合示例代碼介紹的非常詳細,需要的朋友可以參考下2024-05-05
vue2.x版本中computed和watch的使用及關(guān)聯(lián)和區(qū)別
這篇文章主要介紹了vue2.x版本中computed和watch的使用及關(guān)聯(lián)和區(qū)別，文章圍繞主題展開詳細的內(nèi)容介紹，需要的小伙伴可以參考一下2022-07-07
這篇文章主要介紹了vue和uniapp頁面實現(xiàn)自動滾動到最底部方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-05-05
這篇文章主要給大家介紹了關(guān)于Vue表格組件Vxe-table使用技巧的相關(guān)資料,文中還介紹了VXEtable展示指定行所遇到得問題,對大家學習或者使用Vxe-table具有一定的參考學習價值,需要的朋友可以參考下2022-09-09
今天小編就為大家分享一篇關(guān)于實例講解v-if和v-show的區(qū)別，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-01-01
這篇文章主要介紹了Vue.js 中制作自定義選擇組件的代碼附演示demo,通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2020-02-02
vue?el-table中使用el-select選中后無效的解決
這篇文章主要介紹了vue?el-table中使用el-select選中后無效的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了vue中$refs的三種用法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
今天小編就為大家分享一篇Vue通過ref父子組件拿值方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
electron-vite工具打包后如何通過內(nèi)置配置文件動態(tài)修改接口地址
使用electron-vite?工具開發(fā)項目打包完后每次要改接口地址都要重新打包,對于多環(huán)境切換或者頻繁變更接口地址就顯得麻煩,這篇文章主要介紹了electron-vite工具打包后通過內(nèi)置配置文件動態(tài)修改接口地址實現(xiàn)方法,需要的朋友可以參考下2024-05-05