简单模拟vue实现数据劫持-视图更新双向绑定-1

上帝喜欢糖

已于 2023-01-31 21:25:44 修改

阅读量171

点赞数

文章标签： javascript 前端 html vue.js

于 2023-01-30 00:51:51 首次发布

本文链接：https://blog.csdn.net/qq_20623665/article/details/128796013

版权

今日实现数据劫持-绑定数据显示

// 语法 dataset 也可以取自定义属性值,但是标签绑定固定语法 data-自定义名="值",取出标签元素.dataset.自定义名,返回自定义属性值

getAttribute和hasAttribute-----记录(使用较少)

// 语法getAttribute,返回自定义属性值

元素.hasAttribute('自定义属性名'),返回自定义属性值

// 语法hasAttribute,返回布尔值,

元素.hasAttribute('自定义属性'),判断元素是是否存在此自定义属性名

<body>
    <div id="app">
        <h1 v-html="name"></h1>
       <input v-model="name" type="text">
        <h2 v-html="name" data-html="name"></h2>
    </div>
    <script>
        function MVVM(options) {
            const { el, data } = options
            console.log(el);
            console.log(data);
            for (let key in data) {
                console.log(key);
                Object.defineProperty(this, key, {
                    get: function () {
                        return data[key]
                    },
                    set: function (newVal) {
                        console.log(newVal, '修改了值');
                        // 修改值和原先值不同才会触发
                        if (data.name !== newVal) {
                            data.name = newVal
                        }
                    }
                })
            }
            // 显示数据//挂载的节点,下的所有元素---得到伪数组
           const domArr = document.querySelector(el).children
        //    转换为真数组
           console.log(Array.from(domArr),'转换');
           Array.from(domArr).forEach(domNode =>{
            console.log(domNode);
            console.log(domNode.dataset.html,'dataset取自定义属性值');
            // console.log(domNode.hasAttribute('v-html'));
            if(domNode.hasAttribute('v-html')){
                console.log(domNode.getAttribute('v-html'));
                const key = domNode.getAttribute('v-html')
                domNode.innerHTML = this[key]//this指向实例化对象
            }

            if(domNode.hasAttribute('v-model')){
                // console.log(domNode.getAttribute('v-html'));
                const key = domNode.getAttribute('v-model')
                domNode.value = this[key]//this指向实例化对象
            }
            
           })

        }
        // 语法 dataset 也可以取自定义属性值,但是标签绑定固定语法 data-自定义名="值",取出标签元素.dataset.自定义名,返回自定义属性值
        // 语法getAttribute,返回自定义属性值,元素.hasAttribute('自定义属性名'),返回自定义属性值
        // 语法hasAttribute,返回布尔值,元素.hasAttribute('自定义属性'),判断节点是是否存在此自定义属性
        const vm = new MVVM({
            el: '#app',
            data: {
                name: "张三"
            },
        })

        console.dir(vm)
    </script>
</body>

搭建一个基本结构,并使用Object.defineProperty的get 和set 拦截数据,在set里判断新值和旧值是否相同

获取挂载元素下的所有子元素,得到伪数组-使用Array.from转换为真数组,使用遍历拿到每个dom元素

hasAttribute判断元素知否有自定义属性v-html

进行数据的回填

加入一个input输入框绑定v-model-后面想实现双向绑定 --先进行数据的回填

方法相同

------今天先写到这里了-后面实现v-model的双向绑定,并更改数据视图变化

上帝喜欢糖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单模拟vue实现数据劫持-视图更新双向绑定-1

body>},console.log(newVal, '修改了值');// 修改值和原先值不同才会触发})// 显示数据//挂载的节点,下的所有元素---得到伪数组// 转换为真数组console.log(Array.from(domArr),'转换');console.log(domNode.dataset.html,'dataset取自定义属性值');domNode.innerHTML = this[key]//this指向实例化对象。
复制链接

扫一扫