Vueday02

1.el和data的两种书写方式

 // el的两种写法
        const vm = new Vue({
            // el: '#root',//el第一种写法
            data() {
                return {
                    name: '尚硅谷',
                };
            },
        })
        console.log(vm);
        vm.$mount('#root') //el第一种写法

        // data的两种写法：

        new Vue({
            el: '#root',
            // 第一种写法：对象式
            /*  data:{
                name:'zhangzhang'
            } */

            // 第二种写法:函数式
            data() {
                console.log(this);//this指的是vue实例
                return {
                    name: 'xinxin',
                };
            },
        })

2. MVVM模型

M指的是model：对应data中的数据； V指的是view: 模板代码；VM指的是viewmodel:Vue实例对象。
VM身上所有的属性及vue原型上所有属性，在Vue模板中都可以直接使用。

        const vm = new Vue({
            el: '#root',
            data() {
                return {
                    name: '尚硅谷',
                    address: '北京'
                };
            },
        })

        console.log(vm);

3.Object.defineProperty方法

 let number = 18

        let person = {
            name: 'zs',
            sex: '男'
        }

        // 给person对象添加属性age=18,但是该属性是不可遍历的，要想可以遍历添加属性enumerable:true
        Object.defineProperty(person, 'age', {
            // value:18,
            // enumerable:true,//控制属性是否可以枚举，默认值是false
            // writable:true, //控制属性的值是否可以被修改，默认值是false
            // configurable:true, //控制属性是否可以被删除，默认值是false

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

        })

4.数据代理

数据代理：通过一个对象代理另一个对象中属性的操作(读、写)。

 let obj = {
            name: 'zhangzhang'
        }
        let obj2 = {
            age: 20
        }

        Object.defineProperty(obj2, 'name', {
            get() {
                return obj.name
            },
            set(value) {
                obj.name = value
            }
        })

5.Vue中的数据代理

Vue中的数据代理：通过vm实例对象来代理data对象中属性的操作，更加方便的操作data中的数据
基本原理：通过object.defineproperty()把data对象中所有属性添加到vm上，为每一个添加到vm上的属性都指定一个getter和setter，在getter和setter内部去操作(读/写)data中对应的属性。

 <div id="root">
        <h1>学校名称：{{name}}</h1>
        <h1>学校地址：{{address}}</h1>
    </div>

    <script type="text/javascript">
        Vue.config.productionTipt = false //阻止Vue在启动时生成生产提示。

        // Vue中的数据代理：通过vm实例对象来代理data对象中属性的操作，更加方便的操作data中的数据
        // 基本原理：通过object.defineproperty()把data对象中所有属性添加到vm上，为每一个添加到vm上
        // 的属性都指定一个getter和setter，在getter和setter内部去操作(读/写)data中对应的属性。
        const vm = new Vue({
            el: '#root',
            data() {
                return {
                    name: '尚硅谷',
                    address:'北京'
                };
            },
        })
    </script>