注：读本文前已经默认您已经掌握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操作元素
document.getElementById('xxx');
//根据元素类名操作元素
document.getElementsByClassName('xxx')
document.getElementsByName('xxx')//根据元素name熟性操作元素
document.getElementsByTagName('xxx')//根据元素标签名操作元素
...
(2) 第三方库 JQ操作DOM元素
$('#xxx');//根据元素ID操作元素
$('.xxx');//根据元素类名操作元素
$('[name="xxx"]');//根据元素name熟性操作元素
$('xxx');//根据元素标签名操作元素
...
(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部分
<input name="addres" id="addres" v-model="addres" />
//JS 部分
var $addres='湖南省郴州市北湖区';
//原生JS
document.getElementById('addres').value=$addres;
//JQ
$('#addres').val($addres);
//vue
this.addres= $addres;
代码中可以看到，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
<input type="text" id="myAddres" />
<p id="myAddresDesc"></p >
<script>
//这是我们要监听的对象 user
let user = {};
//用来储存 user.addres的实际变量
let userAddres = '';
//创建user 对象 addres的 getter 和 setter
Object.defineProperty(user, 'addres', {
get: function() {
//获取时直接返回
return userAddres;
},
set: function(value) {
//修改user.addres时 把要修改的值 值赋值给 userAddres
userAddres = value;
//赋值给元素
document.getElementById('myAddres').value = userAddres;
document.getElementById('myAddresDesc').innerHTML = userAddres;
}
});
//监听 元素 输入事件
document.getElementById('myAddres').oninput = function (e) {
//用户输入时 赋值给 user.addres
user.addres = this.value;
};
</script>
最终效果
5. 单个VUE文件结构概述
//VUE文件视图模板
<template>
<div></div>
</template>
//JS
<script>
import Xxx from '@/components/xxx';
export default {
//组件列表
components: {Xxx},
//数据对象
data() {
return {};
},
//VUE对象初始化之前执行
beforeCreate() {},
//VUE对象初始化完成之后执行
created() {},
//VUE在挂载开始之前被调用
beforeMounted() {},
//VUE在挂载之后被调用
mounted() {},
//VUE在视图即将更新（渲染）前被调用
beforeUpdate() {},
//VUE在视图更新（渲染）完成后被调用
updated() {},
//当前实例被销毁前执行
beforeDestroy() {},
//当前实例被销毁后执行
destroyed() {},
//所有业务方法 都写这里
methods: {},
//过滤器
filters: {}
};
</script>
// 所有 css 样式放在这里
<style scoped></style>
6. VUE 生命周期
生命周期是指一个对象从创建到销毁的过程，在这个过程中VUE提供了一些基于当前状态（比如创建之前，创建之后等）下会触发的函数，这些函数被国人很形象的翻译成“钩子函数”（Hooks函数）。
下列是VUE中的 所有钩子函数
所有钩子函数
VUE创建流程以及钩子函数的关系图（图片来自VUE 官网）
网友评论