Vue:理解MVVM模型

1.理解

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

2.V:视图(View):模板

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

可以理解为data中的数据通过VM视图模型监听绑定,最终在V视图中展示出来

2.示例

<div id="root">
        <h1>姓名:{{name}} </h1>
        <h1>地址:{{address}} </h1>
    </div>

 var vm = new Vue({
        el:'#root',
        data:{
            name:'张振明',
            address:'湖南省'
        }
    })

在上述示例中,M就是data中的数据，VM是Vue实例对象也就是vm，V是模板也就是‘{{}}’

M通过VM监听并绑定在V上，这就是vue中的MVVM模型