1. Vue概述与快速入门

1.1 Vue介绍

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

说的通俗点就是用于展示数据的js框架，Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

Vue的主要特点：
1、简洁
2、轻量
3、快速
4、数据驱动
5、模块友好
6、组件化

官网:https://cn.vuejs.org/

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

在工程结构中添加Directory
1）main下的java和resource
2）test下的java
3）webapp下的js

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

1. Vue概述与快速入门

1.1 Vue介绍

1.2 MVVM模式

1.3 VueJS 安装

1.4 VueJS 快速入门

推荐阅读更多精彩内容