Vue学习笔记1

1:new一个vue实例

2：将组件与vue实例对应

3：通过el对英

4：引用data的数据有些不能直接引用我们需要用v-bind:

 

v-model双向数据绑定：一般用于输入框，下拉框等

 

 

 数据代理：

 

       <!--数据代理 通过一个对象代理对另一个对象中属性的操作-->
        <!-- <script>
            let obj={x:100}
            let obj2={y:500}
            Object.defineProperty(obj2,'x',{
                //获取obj的x
                get(){
                    return obj.x
                },
                //obj的x值设置为obj2的value
                set(value)
                {
                    obj.x=value
                }
            })
        </script> -->
        <!---->
        <!-- <script>
            let number=18;
            let person={
                name:'crq',
                sex:'男',
                age:number
            }
            Object.defineProperty(person,'age',{
                //value:18,
                // enumerable:true,//控制属性是否可以枚举
                // writable:true,//控制属性可以修改
                // configurable:true,

                //当有人读取person的数据时，set会被调用，且返回值就是age的值
                get:function(){
                    return number;
                },
                set (value){
                    number=value
                }
            
            })
            console.log(person)
        </script> -->
        <!-- 数据绑定
        <div id="root">
         单项数据绑定<input v-bind:value="name"><br>
         双向数据绑定<input v-model:value="name">
        </div>
        <script>
              const v=new Vue({
                 el:'#root',//第一种写法
                   //data的第一种写法，对象式
                    // data:{
                    //     name:"crq"
                    // }
                    //data的第二种写法函数式
                    data:function()
                    {
                        return{
                        name:'crqww'
                        }

                    }
                })
                //第二种写法
                //v.$mount('#root')
        </script> -->

        <!-- <div id="root">