回归前端学习第14天——走进VUE框架

下载安装VUE

下载地址及具体步骤可以参考这个链接https://blog.csdn.net/Smile_Sunny521/article/details/89714388?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-9.edu_weight&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-9.edu_weight
注：需要先搭建好NPM，安装node.js并添加至环境变量，安装VUE时直接使用NPM命令即可。
例如：

npm install vue

VUE一些基础

每个 Vue 应用都需要通过实例化 Vue 来实现

基础语法：

插入文本：

<span>插入文本: {{ text }}</span>

属性上绑定数据

<div id="item-{{ id }}"></div>

if指令

<p v-if="greeting">来学VUE吧~!</p>

这里 v-if指令将根据表达式 greeting值的真假删除/插入

元素。

小实例：设置启动VUE项目时页面显示的信息，通过demo与message进行数据绑定，展示的信息是创建的实例里设置的信息

<div id="demo">
	 <p>{{message}}</p>
	 <input v-model="message">
</div>
new Vue({
	 el: '#demo',
	 data: {
	  message: '就显示这吧~'
	 }
})

需要理解一下的VUE生命周期钩子函数

1.在BeforeCreared钩子函数调用的时候，是获取不到props或者是data中的数据的,因为这些数据都是初始化在initState中的

2.然后会执行created钩子函数,在这一步的时候已经可以访问到之前不能访问的数据,但是这个时候还没有被挂载所以是看不到的

3.接下来会先执行 beforeMount 钩子函数，开始创建 VDOM，最后执行 mounted 钩子，并将 VDOM 渲染为真实 DOM 并且渲染数据。组件中如果有子组件的话，会递归挂载子组件，只有当所有子组件全部挂载完毕，才会执行根组件的挂载钩子。

4.接下来是数据更新时会调用的钩子函数 beforeUpdate 和 updated，这两个钩子函数没什么好说的，就是分别在数据更新前和更新后会调用。

5.另外还有 keep-alive 独有的生命周期，分别为 activated 和 deactivated 。用 keep-alive 包裹的组件在切换时不会进行销毁，而是缓存到内存中并执行 deactivated 钩子函数，命中缓存渲染后会执行 actived 钩子函数。

6.最后就是销毁组件的钩子函数 beforeDestroy 和 destroyed。前者适合移除事件、定时器等等，否则可能会引起内存泄露的问题。然后进行一系列的销毁操作，如果有子组件的话，也会递归销毁子组件，所有子组件都销毁完毕后才会执行根组件的 destroyed 钩子函数。