揭开vue神秘面纱之v-model
2017-08-22 本文已影响162人
IOneStar
title
带你一步一步走进vue之实现一个简单的v-model
About
1,实现简单的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>实现v-model的绑定</title>
</head>
<body>
<input type="text" id="input" v-model="a"/>
<p>可以打开控制台,然后输入vm.查看view到model的绑定;然后改变input的值,再次在控制台输出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(`你没有定义data`);
return;
}
if(model && data.data.hasOwnProperty(model)){
// 实现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;
},
})
// 实现view到model的绑定
input.addEventListener("oninput", () => {
this[model] = input.value;
});
} else {
console.warn(`你没有定义${model}属性`);
return;
}
}
- 把一个普通 JavaScript 对象传给 Vue 实例的 data
选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。 - 给input添加oninput事件实现view到model的绑定,即在input中输入一个值,vm.a也会跟着发生变化
