揭开vue神秘面纱之v-model

作者: IOneStar | 来源:发表于2017-08-22 16:48 被阅读162次

揭开vue神秘面纱之v-model
上课无聊看看vue 源码
为您揭开runtime的神秘面纱 <一>
独家个人原创，独家分享
面纱(一)
✍揭开神秘的面纱 ✍
揭开吴哥窟神秘面纱
神秘面纱终于揭开！
揭开习惯神秘面纱
揭开中医神秘面纱

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也会跟着发生变化