揭开vue神秘面纱之v-model

title

带你一步一步走进vue之实现一个简单的v-model

About

源码
aboutme
github
blog

1,实现简单的v-model的绑定

    
    
    
    


    
    
可以打开控制台,然后输入vm.查看view到model的绑定;然后改变input的值,再次在控制台输出vm.查看model到view的绑定
    
    

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