注：读本文前已经默认您已经掌握JavaScript、css、html 等相关知识。

1. 什么是VUE.js?

VUE作为一个国产JS框架，与React、Angular三分天下，呈三足鼎立之势。“ vue是一套构建用户界面(UI)的渐进式JavaScript框架"，VUE只本身只专注与视图层（View）,相对于其它框架，VUE具有 体积小、易上手、速度快等特点、而且文档丰富对初学者极其友好！

2. 单页模式（SPA）和多页模式（MPA）

传统的web网站都是多页模式，用户每浏览一个页面需要重新向服务器请求一个页面，而单页应用在你浏览第一个页面时就把全部资源下载下来，基于路由再把当前页面渲染出来。

多页模式：用户点击跳转 —>发起请求 —>下载页面资源—>渲染页面

单页模式：（首屏下载后）用户点击跳转 —>切换组件—>渲染页面

两种模式优点缺点：

3. 操作DOM元素
(1) 原生操作DOM元素

//根据元素ID操作元素

(2) 第三方库 JQ操作DOM元素

$

(3) Vue 操作DOM元素

<input name="addres"  ref="myaddres" />

//VUE 中操作元素/组件
this.$refs.myaddres 

但是使用VUE，需要尽量减少直接对元素进行操作，把思维转变成操作数据来改变元素，这也就是接下来要讲的MVVM的核心思想。

4. MVVM思想

MVVM是Model-View-ViewModel的简写。即模型-视图-视图模型。通俗的理解就是实现一种通过改变数据就能够改变页面元素的一种设计模式
模型：指的是后端传递的数据。
视图：指的是所看到的页面。
视图模型：mvvm模式的核心，它是连接view和model的桥梁。它有两个方向：一是将“模型”转化成“视图”

举个栗子我要赋值一个Input：

//HTML部分

代码中可以看到，JQ和原生JS都获取到该input元素然后才是设置value 值
而VUE则在input 使用“v-model”绑定一个数据对象，要修改input的值直接修改这个数据对象就好了。

VUE之所以能实现这种mvvm的模式，得益于ES5的一个特性 "Object.defineProperty"
该方法允许在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回这个对象或者提供getter和setter方法使我们能够捕获到改属性的修改。

语法
Object.defineProperty(obj, prop, descriptor)
obj：目标对象
prop：要修改的属性
descriptor：描述符对象
实现简易MVVM

<

最终效果

5. 单个VUE文件结构概述

//VUE文件视图模板

6. VUE 生命周期

生命周期是指一个对象从创建到销毁的过程，在这个过程中VUE提供了一些基于当前状态（比如创建之前，创建之后等）下会触发的函数，这些函数被国人很形象的翻译成“钩子函数”（Hooks函数）。
下列是VUE中的 所有钩子函数

VUE创建流程以及钩子函数的关系图（图片来自VUE 官网）