第一、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: '《道德经》'}}});
具体代码如下:
<!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>el和data的两种写法</title><script type="text/javascript" src="../vue_js/vue.js"></script></head><body><div id="demo"><h1>您好,{{name}}</h1><h1 id="book">老子的著作是{{bookName}}</h1></div><script>Vue.config.productionTip = false;const v = new Vue({//第一种el的写法//el:'#demo',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: '《道德经》'}}});v1.$mount("#book")</script></body></html>
第二、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>
<!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>VUE的数据代理</title><script type="text/javascript" src="../vue_js/vue.js"></script></head><body><div id="demo"><h1>VUE的数据代理</h1><p>中国有很多城市,如{{city1}},{{city2}},{{city3}},{{city4}},{{city5}}等等。</p></div> <script>Vue.config.productionTip = false;let data = {city1:'北京',city2:'上海',city3:'武汉',city4:'成都',city5:'杭州'}const vm = new Vue({el:'#demo',data})</script> </body></html>