Java炒饭之Vue简单入门

Java炒饭之Vue简单入门

目录

一. Vue简介

二. Vue入门

三. Vue生命周期

一、Vue简介

1、Vue是什么？

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

2、Vue是框架还是库？

首先先了解什么是框架什么是库

2.1 库(Library)，本质上是一些函数的集合。每次调用函数，实现一个特定的功能，接着把控制权交给使用者
代表：jQuery
jQuery这个库的核心：DOM操作，即：封装DOM操作，简化DOM操作

​ eg：document.getElementById(“id_”).innerHTML

2.2 框架(Framework)，是一套完整的解决方案，使用框架的时候，需要把你的代码放到框架合适的地方，框架会在合适的时机调用你的代码
代表：vue
框架规定了自己的编程方式，是一套完整的解决方案
使用框架的时候，由框架控制一切，我们只需要按照规则写代码
框架的侵入性很高(从头到尾)

综上所述Vue是一种渐进式框架

3、MVVM的介绍
MVVM，一种更好的UI模式解决方案，MVVM通过数据双向绑定让数据自动地双向同步

MVVM ===> M / V / VM
M：model数据模型
V：view视图
VM：ViewModel 视图模型 虚拟dom（省略掉操作DOM节点的操作，只需要拿数据即可）

1.Ajax拿用户数据
2.将数据拼接出table的HTML代码，绑定到div上（使用VM不需要这步）

二、Vue入门

1、Vue入门，用一个简单的案例来帮助大家理解

首先需要导入Vue的依赖

其次就是定义一个使用边界，哪里可以使用Vue

最后就是将边界挂载到vue上

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Mne2MaZ1-1689610423808)(C:\Users\Auroa\AppData\Roaming\Typora\typora-user-images\image-20230717225758053.png)]

运行结果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LZytXKvY-1689610423809)(C:\Users\Auroa\AppData\Roaming\Typora\typora-user-images\image-20230717225916077.png)]

在返回data数据时，有三种返回的方式

1.1

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pTehWsxv-1689610423809)(C:\Users\Auroa\AppData\Roaming\Typora\typora-user-images\image-20230717230104010.png)]

1.2 通过json数据格式

data：{msg:json对象}

1.3 通过方法返回数据

注意如果放在边界之外是拿不到数据的

2、v-model 双向绑定

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-C7K28HeU-1689610423809)(C:\Users\Auroa\AppData\Roaming\Typora\typora-user-images\image-20230717235653764.png)]

v-model的作用就是双向绑定，即上面代码的msg变化的话，有msg的地方都会跟着变化

运行结果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WBevYZXh-1689610423810)(C:\Users\Auroa\AppData\Roaming\Typora\typora-user-images\image-20230717235823088.png)]

三、Vue的生命周期（面试中很容易遇到）

首先回顾一下servlet的生命周期分为三个阶段

init、service、destroy

然后我们就不难理解Vue的生命周期了

Vue：beforeCreate、created、beforeMount、mounted
beforeUpdate、updated、beforeDestroy、destroyed

在一加载数据的时候beforeCreate、created、beforeMount、mounted 这四个函数就已经运行了

官方的生命周期图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kdn2oIf4-1689610423810)(D:\Vue\1.Vue+ElementUI（11）\1、vue入门\资料\Vue-lifecycle.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sJI7GhQQ-1689610423810)(C:\Users\Auroa\AppData\Roaming\Typora\typora-user-images\image-20230718000352647.png)]

当你更新数据之后

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SA2n32A1-1689610423810)(C:\Users\Auroa\AppData\Roaming\Typora\typora-user-images\image-20230718000420038.png)]

简单来说：

1、beforecreate：先定义变量 后绑定边界

2、create：改变的代码，但不是最终的代码

3、beforemount：虚拟的dom 进入缓存

4、mount：真实dom和虚拟dom挂载

5、beforeupdate和update：重新渲染和已经更改好数据

单来说：

1、beforecreate：先定义变量 后绑定边界

2、create：改变的代码，但不是最终的代码

3、beforemount：虚拟的dom 进入缓存

4、mount：真实dom和虚拟dom挂载

5、beforeupdate和update：重新渲染和已经更改好数据