6、VM的属性
html
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vm的属性</title>
<script src="../js/vue.js"></script>
</head>
<body>
<!--
通过Vue实例都可以访问哪些属性？
Vue实例中的属性很多，有的以$开始，有的以_开始
所有以$开始的属性，可以看做是公开的属性，这些属性是供程序员使用的。
所有以_开始的属性，可以看做是私有的属性，这些属性是Vue框架底层使用的。
通过vm也可以访问Vue实例对象的原型对象上的属性
-->
<div id="app">
<h1>{{msg}}</h1>
</div>
<script>
let dataObj = {
msg : 'Heool Vue'
}
const vm = new Vue({
el : '#app',
data : dataObj
})
console.log(dataObj.msg);
console.log(vm.msg);
</script>
</body>
</html>
7、Object.defineProerty()
html
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Object.defineProerty()</title>
<script src="../js/vue.js"></script>
</head>
<body>
<!--
Object.defineProerty()
1、这个方法是ES5新增的
2、作用：给对象新增属性，或者设置对象原有的属性。
3、object.defineProperty(给哪个对象新增属性, '新增的属性名',{给新增属性设置相关的配置项key:value})
4、第三个参数是属性相关的配置项，配置项都有哪些？每个配置项的作用是啥？
value配置项：给属性指定值
writable配置项：设置该属性的值师范可以被修改
getter方法 配置项：不需要我们手动调用，当读取属性值的时候，getter方法被自动调用
getter方法的返回值非常重要，这个返回值就代表这个属性它的值
setter方法 配置项：不需要我们手动调用的。当修改属性值的时候，setter方法被自动调用
setter方法上是有一个参数的，这个参数可以接收传过来的值
注意：当配置项当中有setter和getter的时候，value和writable配置项都不能存在
-->
<script>
let phone = {}
let temp
Object.defineProperty(phone, 'color', {
//value : '灰色',
//writable : true
get : function(){
console.log('getter执行了');
//return this.color
return temp
},
set : function(val){
console.log('setter执行了');
//this.color = val
temp = val
}
})
</script>
</body>
</html>
8、数据代理机制的实现
html
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数据代理机制的实现</title>
</head>
<body>
<!--
1、什么是数据代理机制？
通过访问 代理对象的属性 来间接访问 目标对象的属性
数据代理机制的实现需要依靠：Object.defineProperty()方法
2、ES6新特性：
在对象中的函数/方法：function是可以省略的
-->
<script>
let target = {
name : 'zhangsan'
}
let proxy = {}
Object.defineProperty(proxy,'name',{
get(){
return target.name
},
set(val){
target.name = val
}
})
</script>
</body>
</html>
9、数据代理对属性名的要求
html
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数据代理对属性名的要求</title>
<script src="../js/vue.js"></script>
</head>
<body>
<!--
1、Vue实例不会给以_和$开始的属性名做数据代理
2、为什么？
如果允许给_或$开始的属性名做数据代理的话
vm这个Vue实例上可能会出现_xxx或$xxx属性
而这个属性名可能会和Vue框架自身的属性名冲突
3、在Vue当中，给data对象的属性名命名的时候，不能以_或$开始
-->
<div id="app">
<h1>{{msg}}</h1>
</div>
<script>
const vm = new Vue({
el : '#app',
data : {
msg : 'bjpowernode',
$name : 'zhangsan',
_age : 20
}
})
</script>
</body>
</html>
10、手写Vue框架数据代理的实现
html
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数据代理对属性名的要求</title>
<script src="../js/vue.js"></script>
</head>
<body>
<!--
1、Vue实例不会给以_和$开始的属性名做数据代理
2、为什么？
如果允许给_或$开始的属性名做数据代理的话
vm这个Vue实例上可能会出现_xxx或$xxx属性
而这个属性名可能会和Vue框架自身的属性名冲突
3、在Vue当中，给data对象的属性名命名的时候，不能以_或$开始
-->
<div id="app">
<h1>{{msg}}</h1>
</div>
<script>
const vm = new Vue({
el : '#app',
data : {
msg : 'bjpowernode',
$name : 'zhangsan',
_age : 20
}
})
</script>
</body>
</html>