Vue-理解MVVM模型

MVVM模型

1. M： 模型（model）——》data中的数据。
2. V： 视图（view）——》 模板代码。
3. VM： 视图模型（ViewModel）——》 Vue实例。

 

 plain JavaScript Objects（一般js对象）

Dom （由Vue模板经过解析形成的页面，生成Dom结构）

理清两条主线：Data Bindings（数据绑定）和 Dom Listeners（页面侦听）

1、data里的数据（js对象或函数返回的形式）都存储在蓝色区的Model中，然后经过中间绿色Vue实例（VM）进行数据绑定，最后挂载到页面上。

2、应用于页面上的表单元素，依靠页面侦听，将页面（View）输入数据和data中的数据进行双向绑定，也就是能映射Model里数据的改变。

 其实不难发现，VM在一些要处理的数据和一堆页面结构之间扮演着交流媒介的作用，巧妙地联系起来。现在前端主流框架都是采用这种思想，你把数据放在我（框架）要求的位置，然后往模板里插入值，具体做法需根据不同框架所规定的语法进行对应学习，最后使用我这个框架实例，就能将两者建立连接，data里数据做了改动，页面上也会自动地更新。

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：

var vm = new Vue({
  // 选项
})

虽然没有完全遵循 MVVM 模型，但是 Vue 的设计也受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的缩写) 这个变量名表示 Vue 实例。

因此我们开发过程中可以使用vm来接收Vue实例对象。

 这是打印vm输出的信息，为什么数据不显示，牵扯到用户代理（Object.defineProperty方法）。另外带$符号的属性和方法是提供给程序猿用的，不带的是Vue底层的原型链上的属性和方法（也能用）。

• data中定义的所有属性和方法，最后都会出现在vm里。
• vm中所有属性及Vue原型上所有属性，在Vue模板中都可以直接使用。

学习文档：Vue 实例 — Vue.js