使用vue3实现页面和数据的双向绑定

目录

作用

绑定代码

总结

DOM中内容改变影响对象,对象改变影响DOM显示

    改变uname

    // 设置空对象,用于监听

    let a = {};

    proxy = new Proxy(user, {

      set(target, attr, val) {

        target[attr] = val;

        //调用回调函数进行赋值操作

      }

    })

    let user = {};

    let proxy = '';

    + function () {

      proxy = new Proxy(user, {

        // 监听设置和获取操作

        set(target, attr, val) {

          target[attr] = val;

          updateDom(val)

        }

      })

    }

    // 给h1 和 input中中进行值的设置

    let input = document.querySelector('input');

    let h1 = document.querySelector('h1')

    function updateDom(val) {

      h1.innerHTML = val;

      input.value = val;

    }

    // 改变对象,影响页面显示

    let btn = document.querySelector('#btn');

    btn.onclick = function () {

      proxy.uname = '小甜甜'

    }

    let btn =

      // dom发生改变影响对象

      input.oninput = function () {

        proxy.uname = this.value;

      }

    input.oninput = function () {

      proxy.uname = this.value;

    }

利用 vue3实现DOM中内容改变影响对象，对象改变影响DOM显示，以此达到数据双向绑定变化修改的作用，适合新手对于vue的认识。