Vue MVVM模型

流程分析

1. M：模型（Model）：对应data中的数据
2. V：视图（View）：模版
3. VM：视图模型（ViewModel）：Vue实例对象 （因此我们用变量vm来声明实例）

image.png

这个ViewModel是一个Vue的实例对象。

Data Bindings：数据绑定，数据都存在Model中，无论是data的对象式写法还是函数式写法，data都是对象，都是一组一组的key value。Data Bindings就是把数据放到对应的视图位置。

DOM Listeners：输入框的内容改变驱动data中对应值的改变。也就是View中的内容改变，使Model中的内容改变。这个过程中一直存在着对DOM的监听。

对应Vue代码

image.png

通常使用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实例上了。

image.png

我们的 {{}}中可以写任何vm身上的内容，比如$options

   <h1>Hello,{{$options}}</h1>

image.png

出现在实例原型上的内容也可以在 {{}}中使用

    <h1>Hello,{{_b}}</h1>

image.png