Vue入门：关于Vue那些不得不说的事儿
参考：Vue官方文档
怎样才算Vue入门？关于Vue有哪些必须了解的知识？这篇就来归纳一下这些最最最基础、必必必须要知道的事儿 ——
一.Vue的生命周期与基本的钩子函数
生命周期，就是Vue 实例从创建到销毁的过程。
即从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等这一系列过程，我们称之为Vue 的生命周期。
期间总共分为8个阶段：创建前/后，载入前/后，更新前/后，销毁前/后。（可参考官网给出的生命周期图理解，图见末尾👇）
而这8个阶段又与分别与8个钩子函数相对应：
- beforeCreate、created 创建前/后
- beforeMount、mounted 载入前/后
- beforeUpdate、updated 更新前/后
- beforeDestroy、destroyed 销毁前/后
具体来看：
| 钩子函数 | 函数含义 | 触发的行为 | 在这一阶段可做的事情 |
| beforeCreate | 创建前 | vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。 | 加loading事件 |
| created | 创建后 |
数据对象data初始化完成，可以调用 methods 中的方法，操作 data 中的数据。 但 dom未生成，$el未初始化 |
结束loading、请求数据为mounted渲染做准备 |
| beforeMount | 载入前 |
vue实例的$el和data都已初始化，但还是虚拟的dom节点，模板已在内存中编辑完成了，但尚未把模板渲染到页面中。 具体的data.filter还未替换。 |
—— |
| mounted | 载入后 |
vue实例挂载完成，data.filter成功渲染。 内存中的模板，已经真实的挂载到了页面中，用户可以看到渲染好的页面。实例创建期间的最后一个生命周期函数，当执行完 mounted 就表示，实例已经被完全创建好了，DOM 渲染在 mounted 中就已经完成了。 |
配合路由钩子使用 |
| beforeUpdate | 更新前 | data更新时触发，data 数据尚未和最新的数据保持同步。 | |
| updated | 更新后 | data更新时触发，页面和 data 数据已经保持同步了。 | 数据更新时，做一些处理（此处也可以用watch进行观测） |
| beforeDestroy | 销毁前 | 组件销毁之前调用。在这一步，实例仍然完全可用。 | |
| destroyed | 销毁后 | 组件销毁之后调用，对 data 的改变不会再触发周期函数，vue 实例已解除事件监听和 dom绑定，但 dom 结构依然存在。 | 组件销毁时进行提示 |
更多解钩子函数与生命周期可参考：
Vue的钩子函数[路由导航守卫、keep-alive、生命周期钩子]
看到这里你或许满脑子问号：挂载是啥？数据对象data是啥？data.filter又是什么鬼？？！！
不急，往下看，这些问题都会迎刃而解 ——
二.Vue中的基础概念
1、el挂载点
什么是el挂载点？我们从一个Vue的实例开始理解：
<!-- 这里是H5部分 --> <template> <div id="demo"> {{ title }} <span>{{ message }}</span> </div> </template>
//这里是js部分 <script> var demo=new Vue({ el:"#demo", data:{ title："这里是一个demo的标题" message:"hello Vue!", }) </script>
其中的el，就被成为挂载点。
挂载点el——用于设置Vue实例挂载（管理）的元素
可将它理解为是将dom元素与vue实例绑定在一起的一个媒介。
需要注意的点：
1、双大括号：{{ }}，它是使用Vue实例中数据的一个方式，常用方法：{{ 变量名 }}（注意变量名和大括号之间要留有一个空格）
2、Vue实例作用于el指定的元素及该元素内部的后代元素——比如，demo绑定的是<div>，而在<div>内部的<span>也是可以使用{{ message }}的
3、el可指定id/class/类型选择器，建议使用id选择器
4、el仅支持双标签（不可使用<html>和<body>）
2、data数据对象
1.Vue中用到的数据定义在data中
2.data支持复杂类型的数据
3.渲染复杂类型的数据时，遵守JS语法即可
<body>
<div id="app">
{{ message }}
<h2> {{ Info.name }} {{ Info.mobile }} </h2>
<ul>
<li> {{ habbits[0] }} </li>
<li> {{ habbits[2] }} </li>
</ul>
</div>
</body>
<script>
var app=new Vue({
el:"#app",
data:{
message:"hello Vue!",
Info:{
name:"YAN",
mobile:"130xxx-xxx",
},
habbits:["爱吃果冻","不想起床","爱看书"]
}
})
</script>
3、Vue指令
什么是Vue指令？
Vue指令就是一组以v-开头的特殊语法，如最常用的v-model、v-for、v-if等等。
这些指令分别什么意思呢？我们可以和dom元素结合来看——
1.v-model
【Vue本地应用-1.内容绑定/时间绑定】
【Vue本地应用-2.显示切换/属性绑定】
【Vue本地应用-3.列表循环/表单元素绑定】
——未完待续——
三.如何从0创建一个.Vue文件，
四.前端好搭档：Vue + element组件，实现一个简单的查询页面
