vue實現簡單資料雙向繫結
阿新 • • 發佈：2021-04-29
本文例項為大家分享了vue實現簡單資料雙向繫結的具體程式碼，供大家參考，具體內容如下
這裡是簡單的實現，有助於新手理解消化，當然vue要實現雙向資料代理不可缺少，期待後續在更新
vue雙向資料繫結
-> Object.defineProperty() //2.0核心語法
-> 資料代理
-> 雙向繫結
-> 訂閱釋出模式
compile->程式設計客棧 模版解析 (template模版 html 指令 {{表示式}})
observer-> 觀察者(訂閱釋出) data裡的所有的屬性進行 資料劫持 資料代理
watcher-> 監聽 data裡的所有的屬性被改變之後觸發
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewporwww.cppcns.comt" content="width=device-width,initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<input type="text" id="ipt" />
<p id="lc"></p>
</bFddSuiU
<script>
//獲取頁面元素
var ipt = document.getElementById("ipt");
var ps = document.getElementById("lc");
var obj = { name: "" };
//vue雙向資料繫結的核心原理應用
Object.defineProperty(obj,"name",{
get() {
return ipt.value;
},set(newval) {
ipt.value = newval;
ps.innerHTML = newval;
},});
//監聽input中的資料變化並賦值www.cppcns.com
效果展示：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。