MVVM模型

 M:模型(Model):对应data中的数据

V:视图(view): 模板

VM:视图模型(ViewModel):Vue实例对象

 观察发现:

        1.data中所有的属性,最后都出现在了vm身上

        2.vm身上所有的属性 及 Vue原型上所有的属性 在Vue模板中都可以直接使用

                          vue数据代理

数据代理:通过一个对象代理对另一个对象中的属性的操作

let obj = {x:100}

let obj2 = {y:200}

Object.defineProperty(obj2,'x',{

    get(){

        return obj.x

    },

    set(value){

     obj.x=value

    }

})

Object.defineProperty(Person,'age',{

    value:18,

    enumerable:true,//控制属性是否可以被枚举

    writable:true,//控制属性是否可以被修改

    configurable:true,//控制属性是否可以被删除

})

  1.Vue中的数据代理

        通过vm对象来代理data对象中属性的操作(读、写)

  2.Vue中数据代理的好处

        更加方便的操作data中的数据

 3.基本原理:

        通过Object.defineProperty()把data对象中的所有属性添加到vm上

        为每一个添加到vm上的属性，都指定一个getter/setter

        在getter/setter内部去操作(读/写)data中对应的属性

const vm = new Vue({

    el:"#root",

    data:{

        name:'尚硅谷',

      address:'北京'

    }

})

console.log(vm);        //vm._data = options.data = data

                             事件处理

 事件的基本使用

        1.使用v-on:xxx  或 @xxx 绑定事件 其中xxx是事件名

        2.事件的回调需要配置在methods对象中，最终会在vm上

        3.methods中配置的函数 不要用箭头函数 否则this就不是vm 了

        4.methods中配置的函数 都是被Vue所管理的函数 this的指向是vm 或 组件实例对象

        5.@click="demo" 和 @click="demo($event)" 效果一致 但后者可以传参

 methods: {

        showInfo1(event){

           alert('同学你好')

        //    console.log(event.target.innerText);

        console.log(this);

        },

        showInfo2(number,a){

           alert('同学你好6666')

        //    console.log(event.target.innerText);

        console.log(number,a);

        }

    },