Vue MVVM模型
分类:vue
流程分析
- M:模型(Model):对应data中的数据
- V:视图(View):模版
- VM:视图模型(ViewModel):Vue实例对象 (因此我们用变量vm来声明实例)
这个ViewModel是一个Vue的实例对象。
Data Bindings:数据绑定,数据都存在Model中,无论是data的对象式写法还是函数式写法,data都是对象,都是一组一组的key value。Data Bindings就是把数据放到对应的视图位置。
DOM Listeners:输入框的内容改变驱动data中对应值的改变。也就是View中的内容改变,使Model中的内容改变。这个过程中一直存在着对DOM的监听。
对应Vue代码
通常使用vm来声明实例对象
<div id="root">
<h1>Hello,{{name}}</h1>
</div>
<script>
const vm = new Vue({
el: '#root',
data: function () {
return {
name: '孙尚香',
}
}
})
console.log(vm)
我们可以看到我们data中的name已经在vm实例上了。
我们的 {{}}
中可以写任何vm身上的内容,比如$options
<h1>Hello,{{$options}}</h1>
出现在实例原型上的内容也可以在 {{}}
中使用
<h1>Hello,{{_b}}</h1>