Vue简单实现双向绑定数据

vue data bind demo

vue, data

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 1681
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

class Vue extends EventTarget {
    constructor(option) {
        super();
        this.option = option;
        this._data = this.option.data;
        this.el = document.querySelector(this.option.el);
        this.observe(this._data);
        this.compileNode(this.el);
    }

// 双向绑定
    observe(data) {
        let self = this;
        this._data = new Proxy(data, {
            set(target, prop, newValue) {
                // 自定义事件
                let event = new CustomEvent(prop, {
                    detail: newValue
                });
                self.dispatchEvent(event);
                return Reflect.set(...arguments);
            }
        });
    }

// 渲染数据
    compileNode(el) {
        let self = this;
        let child = el.childNodes;

// nodeType：1元素节点，2属性节点，3文本节点
        [...child].forEach(node => {
            if (node.nodeType === 3) {
                let text = node.textContent;
                if (text == '') return;
                let reg = /\{\{(.*?)\}\}/g;
                let res = text.match(reg);
                let tempText = text;

res && res.forEach(function(value) {
                    let arr = reg.exec(tempText);

text = text.replace(value, self._data[arr[1]]);
                    self.addEventListener(arr[1], e => {
                        text = tempText.replace(value, e.detail);
                        node.textContent = text;
                    });
                });
                node.textContent = text;
            } else if (node.nodeType === 1) {
                let attr = node.attributes;
                if (attr.hasOwnProperty('v-model')) {
                    let keyName = attr['v-model'].nodeValue;
                    this._data[keyName] && (node.value = this._data[keyName]);
                    node.addEventListener('input', e => {
                        this._data[keyName] = node.value;
                    })
                }
                this.compileNode(node);
            }
        });
    }
}

let vm = new Vue({
    el: '#app',
    data: {
        name: '小明',
        message: '测试数据',
        test: '双向绑定数据'
    }
});

编译

CSS

HTML

vue data bind demo

vue, data

编辑器支持Emmet

快捷键

vue data bind demo

vue, data

Vue.js双向数据绑定在线演示实例

Vue.js 存储分类表单数据

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：