1200字范文 > VUE的el和data的写法以及MVVM模型 VUE的数据代理

VUE的el和data的写法以及MVVM模型 VUE的数据代理

时间：2018-11-29 10:52:12

第一、VUE的el和data的两种写法：

el的两种写法如下：

第一个形式如下：

const v = new Vue({//第一种el的写法el:'#demo',data: {name: '三清祖师'}});

第二个形式如下：

const v = new Vue({data: {name: '三清祖师'}});console.log("这是" + v);setInterval(() => {v.$mount("#demo");//第二种el写法}, 1000);

data的两种写法：

第一个形式如下：

const v1 = new Vue({//第一种写法/*data:{bookName:'《道德经》'}*///第二种写法/*data:function(){return{bookName:'《道德经》'}}*///这和第二种的基础上的基础上修改，本质还是一样。data() {return {bookName: '《道德经》'}}});

具体代码如下：

第二、MVVM模型以及VUE的数据代理

（1） M：模型(Model) ：对应 data 中的数据

（2） V：视图(View) ：模板

（3） VM：视图模型(ViewModel) ： Vue 实例对象

现在我们再看下，在看数据代理之前，先要了解下Object.defineProperty这个方法。这个方法就是给一个对象增加属性的。

（1）如果给添加的属性赋值，可以直接这样例如，value = 10；

（2）enumerable:控制属性是否可以枚举，默认值是false

（3）writable：控制属性是否可以被修改，默认值是false

（4）configurable：控制属性是否可以被删除，默认值是false

（5）get()::当有人读取对象的属性时，get函数(getter)就会被调用，且返回值就是属性的值

（6）set():当有人修改对象的属性时，set函数(setter)就会被调用，且会收到修改的具体值

现在我们看一下代理的含义：我们可以定义两个对象obj1,obj2，obj1可以代理obj2去处理obj2的属性，也就是说，通过一个对象代理对另一个对象中属性的操作（读/写）

例如这样：

let obj = {objValue:50};let obj2 = {obj2Value:60};Object.defineProperty(obj,'obj2value',{get(){console.log("obj1通过obj2来获取obj2的属性值");return obj2.obj2Value;},set(value){console.log("obj1通过obj2来设置obj2的属性值");obj2.obj2Value = value;}});

现在，我们有了数据代理的基本概念，我们现在来理解一下VUE中的数据代理。1.Vue中的数据代理：通过vm对象来代理data对象中属性的操作（读/写），2.Vue中数据代理的好处主要是更加方便的操作data中的数据，3.基本原理：通过Object.defineProperty()把data对象中所有属性添加到vm上。为每一个添加到vm上的属性，都指定一个getter/setter。在getter/setter内部去操作（读/写）data中对应的属性。

Vue对象里面，有一个_data,在这个_data里面就是我们代码里面data里的东西，之后，我们通过Object.defineProperty()把_data的属性赋给Vue对象，我们可以直接用，不需要要通过_data调用。

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>MVVM模型</title><script type="text/javascript" src="../vue_js/vue.js"></script></head><body><div id="d1"><h1>四大名著：</h1><p>{{book1}}</p><p>{{book2}}</p><p>{{book3}}</p><p>{{book4}}</p><h1>测试：</h1><p>测试1,{{1+1}}</p><p>测试2,{{$options}}</p><p>测试3,{{$createElement}}</p><p>测试4,{{_c}}</p><p>测试5,{{$emit}}</p><p>中国的首都：{{city1}}</p><p>湖北的省会：{{city2}}</p></div><script>Vue.config.productionTip = false;const vm = new Vue({el:'#d1',data:{book1:'《西游记》',book2:'《三国演义》',book3:'《水浒传》',book4:'《红楼梦》',city1:'北京',city2:'武汉'}});//vm.$mount(document.getElementsByTagName("div")[0]);console.log(vm);var obj1 = {};obj1.name = "Jack";obj1["age"] = 18;obj1.sex = "男";var arry = ["name","age","sex"];console.log(obj1);arry.forEach((value,index,arry) => {console.log(obj1[value]); },obj1);let num = 20;let student = {studentName:"小明",schoolName:"北京大学",address:"北京市"};console.log(student);Object.defineProperty(student,'age',{//value:18,//enumerable:true, //控制属性是否可以枚举，默认值是false//writable:true, //控制属性是否可以被修改，默认值是false//configurable:true, //控制属性是否可以被删除，默认值是false/* get:function(){console.log("我们现在读取age属性的值");return num;}*//*上面那个可以简写为下面这个形式*///当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值get(){console.log("我们现在读取age属性的值");return num;},//当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值set(value){console.log("我们现在正在修改年龄的这个属性");num = value;}});/*对象的enumerable当设置为true,就可以遍历，如果为false就不能遍历出用defineProperty增加的属性*/console.log(Object.keys(student));//这个可以遍历对象的属性名console.log(Object.values(student));//这个可以遍历的值/*下面我们看一下数据代理我们可以定义两个对象obj1,obj2obj1可以代理obj2去处理obj2的属性*/console.log("-----------------分割线--------------------");let obj = {objValue:50};let obj2 = {obj2Value:60};Object.defineProperty(obj,'obj2value',{get(){console.log("obj1通过obj2来获取obj2的属性值");return obj2.obj2Value;},set(value){console.log("obj1通过obj2来设置obj2的属性值");obj2.obj2Value = value;}});console.log(obj);console.log(obj2);</script></html>

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。