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

一、数据绑定

1. 单向绑定（v-bind）：数据只能从data流向页面。
2. 双向绑定（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的两种写法

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

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

2. el的两种写法：
   • new Vue时候配置el属性。
   • 先创建Vue实例，随后再通过vm.$mount("#root")指定el的值。

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

      

3. data有两种写法
• 对象式
• 函数式

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

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

三、数据代理

1. 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
              }
          })

2. 什么是数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）。
3. Vue中的数据代理：Vue中对于data的使用包括了数据代理，知道了原理，具体什么时候会用到在后续博客中标注。