【二】vue的相关概念

一、vue中MVVM

1、什么是MVVM
- MVVM（Model–view–view-model）是一种软件架构模式
2、vue的MVVM

• 将model里的数据绑定到view中，view中显示的永远都是model的最新数据
• view层：
  • 视图层
  • 在前端开发，通常就是DOM
  • 主要的作用是给用户展示各种信息
• model层：
  • 数据层
  • 数据可能是我们固定的死数据，更多的是来自我们服务器，从网络上请求下来的数据
  • 在我们计数器的案例中就是后面抽取出来的obj，当然，里面的数据可能没有这么简单
• viewModel层：
  • 视图模型层
  • 视图模型层是view和model沟通的桥梁
  • 一方面它实现了data binding，也就是数据绑定，将model的改变实时的反应到view中
  • 另一方面它实现了DOM Listener，也就是DOM监听，当DOM发生一些事件（点击、滚动、touch等）时，可以监听到，并且需要的情况下该改变对应的Data
  • 计数器案例中，viewmodel就是我们创建的vue对象实例

3、计数器的MVVM如何工作的呢

• 首先viewmodel通过data binding让obj中的数据实时的在DOM中显示
• 其次viewmodel通过DOM Listener来监听DOM事件，并且通过methods中的操作，来改变obj中的数据

二、创建vue实例传入的options

• 目前掌握这些选项：
  • el：
    • 类型：string｜HTMLElement
    • 作用：决定之后vue实例会管理哪一个DOM
  • data：
    • 类型：Object|Function（组件当中，data必须是一个函数）
    • 作用：vue实例对应的数据对象
  • methods:
    • 类型：{[key:string]:Function}
    • 作用：定义属于vue的一些方法，可以用在其他地方调用，也可以在指令中使用

三、vue的生命周期

生命周期