VUE之MVVM

xiaoxiao2022-06-24 190

文章参考关于Vue的MVVM

MVVM简介

概念介绍 MVVM分为三个部分：分别是M（Model，模型层），V（View，视图层），VM（ViewModel，V与M连接的桥梁，也可以看作为控制器） 1、 M：模型层，主要负责业务数据相关； 2、 V：视图层，顾名思义，负责视图相关，细分下来就是html+css层； 3、 VM：V与M沟通的桥梁，负责监听M或者V的修改，是实现MVVM双向绑定的要点；MVVM支持双向绑定，意思就是当M层数据进行修改时，VM层会监测到变化，并且通知V层进行相应的修改，反之修改V层则会通知M层数据进行修改，以此也实现了视图与模型层的相互解耦；关系图

使用Object.defineProperty+addEventListener实现MVVM的表单数据双向绑定

Object.defineProperty用于实现数据劫持，在对象数据改变的时候去改变DOM的值 addEventListener用于DOM监听，当DOM值发生改变的时候，动态改变对象的值这样就可以简单的实现MVVM数据双向绑定代码如下

<html> <body> <form id="form"> 姓名：<input type="text" id="name"><br/> 年齡：<input type="text" id="age"> </form> <script> let person = { _data : { name : "", age : "" } }; let form = document.querySelector("#form"); for(let key in person._data){ bind(person,key) } function bind(object,key){ let dom = document.querySelector("#"+key) Object.defineProperty(object,key,{ get() { console.log(key + "備獲取了"); return object._data[key] }, set(v) { console.log(key + "被修改為"+v,person); dom.value = v; object._data[key] = v; } }) } form.addEventListener("input",(e) =>{ let value = e.target.value; let name = e.target.getAttribute("id"); person[name] = value; }); function init(){ person["name"] = "zzq"; person["age"] = "100"; } init(); </script> </body> </html>

专利

最新回复(0)