和阿牛一起冲Vue
文章目录
- 和阿牛一起冲Vue
- 前言
- 一、MVVM模型
- 1、MVVM模型是什么？
- 2、观察发现
- 3、代码示例
- 二、属性操作Object.defineProperty
- 什么是Object.defineProperty方法？
- 如何使用这个方法
- 传三个参数：
- pink色的意义
- 代码示例
- 数据代理
- Vue中的数据代理
- 三个连等关系
- 总结
- Vue中的数据代理：
- Vue中数据代理的好处：
- 基本原理：
前言
青春，因为奋斗与奉献更美丽。
一、MVVM模型
1、MVVM模型是什么？
1. M：模型(Model) ：data中的数据
2. V：视图(View) ：模板代码
3. VM：视图模型(ViewModel)：Vue实例
2、观察发现
注意：
1.data中所有的属性，最后都出现在了vm身上。
2.vm身上所有的属性 及 Vue原型上所有属性，在Vue模板中都可以直接使用。
3、代码示例
<h1>学校名称：{{name}}</h1>
<h1>学校地址：{{address}}</h1>
<h1>测试一下1：{{1+1}}</h1>
<h1>测试一下2：{{$options}}</h1>
<h1>测试一下3：{{$emit}}</h1>
<h1>测试一下4：{{_c}}</h1>
二、属性操作Object.defineProperty
什么是Object.defineProperty方法？
是给一个对象添加属性或者修改属性
如何使用这个方法
传三个参数：
- 一是给哪个对象传递属性，
- 二是添加的属性叫什么名字，
- 第三个是配置项
let person = {
name: "张三",
sex: '男'
}
Object.defineProperty(person, 'age', {
value: '18',
})
console.log(person);
pink色的意义
- 不能被枚举等，例如通过
console.log(Object.keys(person));通过数组形式输出对象属性值 - 或者通过
forin循环属性 - get方法获取年龄
- set方法
代码示例
<!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>Document</title>
</head>
<body>
<div id="root">
<h1></h1>
</div>
</body>
<script src='vue.js'></script>
<script>
Vue.config.productionTip = false;
let number = 18;
let person = {
name: "张三",
sex: '男'
}
Object.defineProperty(person, 'age', {
// value: "13",
// enumerable: true,//控制属性书否可以枚举
// writable: true,//控制属性是否可以修改
// configurable: true,//控制属性是否可以被删除
// 当有人读取person的age属性时，get函数就会被调用，且返回的值是age某项需要值
get: function () {
return number;
},
//
set(value) {
console.log('有人修改了age属性值，改为', value);
number = value;
}
})
console.log(person);
// console.log(Object.keys(person));
for (let key in person) {
console.log(person[key]);
}
</script>
</html>
数据代理
也就是通过一个对象代理另一个对象中的属性的操作(读/写)；
代码示例：
简单的效果
Vue.config.productionTip = false;
//数据代理：通过一个对象代理另一个对象中的属性的操作(读/写)
let obj_1 = {
x: 100
}
let obj_2 = {
y: 200
}
Object.defineProperty(obj_2, 'x', {
get() {
return obj_1.x
},
set(value) {
obj_1.x = value
}
})
console.log(obj_1);
Vue中的数据代理
const vm = new Vue({
el: '#root',
data: {
name: 'jack',
message: {
url: 'javascript:void(0)?spm=1000.2115.3001.5343',
name: '勇敢牛牛'
}
}
});
三个连等关系
此中的vm的data属性的方法描述，是三个连等关系（把data定义出去）
总结
Vue中的数据代理：
通过vm对象来代理data对象中属性的操作（读/写）
Vue中数据代理的好处：
更加方便的操作data中的数据
基本原理：
通过Object.defineProperty()把data对象中所有属性添加到vm上。
为每一个添加到vm上的属性，都指定一个getter/setter。
在getter/setter内部去操作（读/写）data中对应的属性。
