|
|
@@ -0,0 +1,74 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+ <head>
|
|
|
+ <meta charset="UTF-8" />
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
+ <title>Document</title>
|
|
|
+ </head>
|
|
|
+ <body>
|
|
|
+ <div id="app">
|
|
|
+ <!--
|
|
|
+ 什么叫数据代理？
|
|
|
+ Object.defineProperty
|
|
|
+ 通过一个对象去代理另一个对象并对其属性进行（读/写）的操作；
|
|
|
+ -->
|
|
|
+ <!-- {{newMain}} -->
|
|
|
+ </div>
|
|
|
+ <script src="./vue.js"></script>
|
|
|
+ <script>
|
|
|
+ // let obj = {
|
|
|
+ // name: 'LiLi',
|
|
|
+ // age: 18
|
|
|
+ // }
|
|
|
+ // 参数一：需要设置或添加属性的对象
|
|
|
+ // 参数二： 需要设置或添加属性的值
|
|
|
+ // 参数三：配置对象
|
|
|
+ // Object.defineProperty(obj,'sex',{
|
|
|
+ // value:'女'
|
|
|
+ // })
|
|
|
+ // console.log(obj,'obj')
|
|
|
+ // var app = new Vue({
|
|
|
+ // el:"#app",
|
|
|
+ // data:{
|
|
|
+
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ var app = new Vue({
|
|
|
+ el:"#app",
|
|
|
+ data:{
|
|
|
+ num: 10,
|
|
|
+ obj:{
|
|
|
+ name:"张振博",sex:"男"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // let num = 10;
|
|
|
+ // let obj = {name:"张振博",sex:"男"};
|
|
|
+ // Object.defineProperty(obj,'age',{
|
|
|
+ // get(){
|
|
|
+ // console.log("读取");
|
|
|
+ // return num
|
|
|
+ // },
|
|
|
+ // set(value) {
|
|
|
+ // console.log("设置");
|
|
|
+ // num = value;
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ // let obj = {};
|
|
|
+ // let obj1 = {
|
|
|
+ // name: "李兆龙",
|
|
|
+ // age: 18
|
|
|
+ // }
|
|
|
+ // Object.defineProperty(obj,'age',{
|
|
|
+ // get() {
|
|
|
+ // console.log("走到获取里");
|
|
|
+ // return obj1.age;
|
|
|
+ // },
|
|
|
+ // set(value) {
|
|
|
+ // obj1.age = value
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ // console.log(obj)
|
|
|
+ })
|
|
|
+ </script>
|
|
|
+ </body>
|
|
|
+</html>
|
e