【Vue】基础系列（二）数据绑定 - el和data - 数据代理

一、数据绑定

单向绑定（v-bind）：数据只能从data流向页面。
双向绑定（v-model）：数据不仅能从data流向页码，还可以从页面流向data。
```
单向数据绑定：<input type="text" v-bind:value="name"><br>
双向数据绑定：<input type="text" v-model:value="name"><br>
```
注意：v-model只能应用在表单类元素（输入类元素）上，不是什么元素可以用v-model的。且v-model:value可以简写为v-model，因为v-model默认收集的就是value值。
```

单向数据绑定：<input type="text" :value="name"><br>
双向数据绑定：<input type="text" v-model="name"><br>
```

二、el和data的两种写法

代码片段：用于自定义快捷输入。通过设置->用户代码片段->编写代码的方式生成。

{
    "newVue":{
        "prefix": "vue",
        "body": [
            "new Vue({",
            "    el:'$1',",
            "    data:{",
            "        name:'$2'",
            "    }",
            "})"
        ],
        "description": "vue"
    }
}

el的两种写法：

new Vue时候配置el属性。

先创建Vue实例，随后再通过vm.$mount("#root")指定el的值。

const v =  new Vue({
            // el:"#root",      
            data:{
                name:"饭啊饭"
            }
        })
        console.log(v);
        v.$mount("#root")

data有两种写法

对象式

函数式

new Vue({
            el:'#root',
            // data:{
            //     name:'饭啊饭'
            // }
            data:function(){
                return{
                    name:"饭啊饭"
                }
            }
        })

目前写哪种都可以，但以后学习了组件时，data必须使用函数式，且函数一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。

三、数据代理

Object.defineProperty相关知识
Object.defineProperty()的作用就是直接在一个对象上定义一个新属性，或者修改一个已经存在的属性。

value：控制属性的值。
enumerable：控制属性是否可枚举。
writable：控制属性是否可修改。
configurable：控制属性是否可以被删除。
get()：当有人读取person的age属性时，get函数就会被调用，且返回值就是age的值。

set()：当有人修改person的age属性时，set函数就会被调用，且会收到修改的具体值。

Object.defineProperty(person,'age',{
            value:"18",
            enumerable:true, //控制属性是否枚举
            writable:true,//控制属性是否可修改
            configurable:true;//控制属性是否可以被删除

            //当有人读取person的age属性时，get函数就会被调用，且返回值就是age的值
            get(){
                return number
            },
            //当有人修改person的age属性时，set函数就会被调用，且会收到修改的具体值
            set(value){
                console.log('有人修改了age属性，且值是value');
                number = value
            }
        })