title
帶你一步一步走進(jìn)vue之實(shí)現(xiàn)一個(gè)簡(jiǎn)單的v-model
About
1,實(shí)現(xiàn)簡(jiǎn)單的v-model的綁定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>實(shí)現(xiàn)v-model的綁定</title>
</head>
<body>
<input type="text" id="input" v-model="a"/>
<p>可以打開(kāi)控制臺(tái),然后輸入vm.查看view到model的綁定;然后改變input的值,再次在控制臺(tái)輸出vm.查看model到view的綁定</p>
<!-- <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script> -->
<script>
window.vm = new Vue({
data: {
b: 10000,
a: 1
},
el: '#input'
});
setInterval(() => {
vm.a++;
}, 1000);
</script>
</body>
</html>
function Vue(data) {
const input = document.querySelector(data.el);
let model = input.getAttribute('v-model');
if(!data.data) {
console.warn(`你沒(méi)有定義data`);
return;
}
if(model && data.data.hasOwnProperty(model)){
// 實(shí)現(xiàn)model到view的綁定
input.value = data.data[model];
Object.defineProperty(this, model, {
configurable: true,
enumerable: true,
get: function() {
return data.data[model];
},
set: function(newVal) {
input.value = data.data[model] = newVal;
},
})
// 實(shí)現(xiàn)view到model的綁定
input.addEventListener("oninput", () => {
this[model] = input.value;
});
} else {
console.warn(`你沒(méi)有定義${model}屬性`);
return;
}
}
- 把一個(gè)普通 JavaScript 對(duì)象傳給 Vue 實(shí)例的 data
選項(xiàng)，Vue 將遍歷此對(duì)象所有的屬性，并使用 Object.defineProperty 把這些屬性全部轉(zhuǎn)為 getter/setter。 - 給input添加oninput事件實(shí)現(xiàn)view到model的綁定,即在input中輸入一個(gè)值,vm.a也會(huì)跟著發(fā)生變化
