第一、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,obj2
obj1可以代理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>
1656
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
