Vue学习（二）

Vue学习（二）

• 参考教程：2019年最全最新Vue、Vuejs教程，从入门到精通

04-Vue的MVVM

• 课程里推荐去维基百科看概念的介绍，我推荐的是大佬的博客：MVVM
• 什么是MVVM？MVVM是Model-View-ViewModel的缩写。
• 说白了就是数据绑定（双向/单向）+ 事件监听

（1）DOM

• HTML DOM 教程
• DOM (Document Object Model) 译为文档对象模型，是 HTML 和 XML 文档的编程接口。
• HTML的结构、属性、方法……

（2）MVC与MVVM

• mvc和mvvm的区别
• MVC，MVP 和 MVVM 的图示

05-在创建Vue实例时传入的options（参数）

• 创建Vue实例时传入的options选项(官方文档)
• el:
  • 类型：string 或 HTML Element
  • 决定Vue会管理哪一个DOM
• data:
  • 类型： Object 或 Function
  • Vue实例对应的数据对象
• methods:
  • 类型：{ [key : string] : Function}
  • 定义属性Vue的一些方法。它们可以在其他地方调用，也可以在指令中调用
• methods和function：
  • method是对象的函数（方法），而function没有归属。就是说：方法，是某个对象/类的方法。函数没有说是那个类或对象的。

06-Vue的生命周期

• Vue的生命周期图示
• 回调函数：在到达一些生命周期（程序执行的阶段）时，告诉开发人员执行到了哪一个生命周期。回调函数可以被重写。

（1）各个生命周期干了啥

• 实例化Vue对象
• 初始化事件和生命周期
• 创建实例之前执行的钩子事件（回调函数）
• 初始化注入
• 创建实例完成后执行的钩子事件（回调函数）
• 创建Vue实例的参数里面有没有el选项
  • 没有则使用vm.$mount()去挂载模板
• 创建Vue实例的参数里面有没有template选项
• 编译模板：把data对象里的数据和Vue语法声明的模板编译成浏览器可读的HTML
  • 有template选项则编译传入的参数（模板）
  • 没有template选项，则编译el挂载的模板
• 将编译完成的HTML挂载到对应虚拟DOM时触发的钩子
  • 此时页面并没有内容
• 将编译好的HTML替换el属性所指向的DOM
• 将编译好的HTML挂载到页面完成后，执行的事件钩子
  • 此钩子函数一般会做一些ajax请求获取数据，进行数据初始化
  • mounted在整个实例中只执行一次
• 实时监听数据变化并随之更新DOM
• 更新之前的钩子
• 更新完成后的钩子
• 销毁之前的钩子
• 销毁Vue实例
• 销毁之后的钩子