1. Vue概述与快速入门
1.1 Vue介绍
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
说的通俗点就是用于展示数据的js框架，Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
Vue的主要特点：
1、简洁
2、轻量
3、快速
4、数据驱动
5、模块友好
6、组件化
1.2 MVVM模式
MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。
MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model）
Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。它的核心是 MVVM 中的 VM，也就是 ViewModel。 ViewModel负责连接 View 和 Model，保证视图和数据的一致性，这种轻量级的架构让前端
开发更加高效、便捷。
image.png
1.3 VueJS 安装
下载地址：https://cn.vuejs.org/v2/guide/installation.html 推荐使用开发版本
image.png
也可以使用在线文件
对于制作原型或学习，你可以这样使用最新版本：
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏：
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
1.4 VueJS 快速入门
利用intellijidea实现vue
新建工程 从原型创建，选中maven-archetype-webapp
image.png
自行填入GroupId和ArtifactId
image.png
image.png
image.png
image.png
在工程结构中添加Directory
1）main下的java和resource
2）test下的java
3）webapp下的js
image.png
image.png
image.png
image.png
image.png
做好对应的标记
image.png
image.png
js下放入vue.js
webapp下添加自己的html文件
demo1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>快速入门</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
{{message}}<!--Vue的插值表达式，将data中定义的数据显示到此处-->
</div>
</body>
<script>
//view model
//创建Vue对象 内部是json格式，所以是大括号
new Vue({
el:"#app", //由vue接管id为app区域
data:{
message:"Hello Vue!"//注意：此处不要加分号
}
});
</script>
</html>
启动tomcat，添加Artifacts。
artifact是一种用于装载项目资产以便于测试，部署，或者分布式软件的解决方案。例如集中编译class，存档java应用包，web程序作为目录结构，或者web程序存档等。
image.png
image.png
image.png
这里我们主要是为了设置页面的访问位置
image.png
image.png
