Vue入门 - 事件 - 生命周期图

目录

一、Vue的简介

        1.1 Vue.js 是什么

        1.2 库和框架的区别

        1.3 MVVM的介绍

二、Vue入门-数据双向绑定

        2.1 实现步骤

三、Vue事件

        3.1 vue的事件实现

四、Vue的生命周期

        4.1 所有钩子函数有哪些？

        4.2 vue初始化默认会触发的钩子函数有哪些？

---

一、Vue的简介

        1.1 Vue.js 是什么

        Vue是一个构建用户界面(UI)的[渐进式]JavaScript框架

        官网：Vue.js - 渐进式 JavaScript 框架 | Vue.js

        1.2 库和框架的区别

        

1.2.1 库(Library)，本质上是一些函数的集合。每次调用函数，实现一个特定的功能，接着把控制权交给使用者

      代表：jQuery

      jQuery这个库的核心：DOM操作，即：封装DOM操作，简化DOM操作

1.2.2 框架(Framework)，是一套完整的解决方案，使用框架的时候，需要把你的代码放到框架合适的地方，框架会在合适的时机调用你的代码

      代表：vue

      框架规定了自己的编程方式，是一套完整的解决方案

      使用框架的时候，由框架控制一切，我们只需要按照规则写代码

      框架的侵入性很高(从头到尾)

        1.3 MVVM的介绍

MVVM，一种更好的UI模式解决方案，MVVM通过数据双向绑定让数据自动地双向同步，相比较于mvc更加便捷；

MVVM ===> M / V / VM

 M：model数据模型

 V：view视图

 VM：ViewModel 视图模型 虚拟dom

---

二、Vue入门-数据双向绑定

        2.1 实现步骤

                ① 导入js依赖 2.6.10（cdnjs.com、bootcdn.net）

                ② 定义vue所管理边界

                ③ 创建vue实例

                ④ 挂载便捷

实现Hello vue!!!的页面：

	
		
		
		
	
	
		

		
		{{msg}}
		
	
	

 运行截图：

---

三、Vue事件

        3.1 vue的事件实现

        事件.html

	
		
		
		
	
	
		

		
		
		打印1
		打印2
		{{msg}}
		
	
	

 我们运行测试一下：

相比以前，不需要再管dom节点了，只需要关注数据就好了。

---

四、Vue的生命周期

        生命周期测试的页面代码：

	
		
		
		
	
	
		

			
number:{{number}}
			
{{detail()}}
			
		
		
	

        4.1 所有钩子函数有哪些？

beforeCreate：创建前

created：创建

beforeMount：挂载前

mounted：挂载

beforeUpdate：改变前

Updated：改变后

beforeDestory：销毁前

destoryed：销毁后

生命周期图：

 

        4.2 vue初始化默认会触发的钩子函数有哪些？

                默认触发的钩子函数：beforeCreate、created、beforeMount、mounted