6、VM的属性
<!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()
<!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 tempObject.defineProperty(phone, 'color', {//value : '灰色',//writable : trueget : function(){console.log('getter执行了');//return this.colorreturn temp},set : function(val){console.log('setter执行了');//this.color = valtemp = val}})</script></body>
</html>
8、数据代理机制的实现
<!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、数据代理对属性名的要求
<!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框架数据代理的实现
<!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>
