【微服务】136：非常好用的前端框架Vue

小鱼儿 2022-12-01 05:22 194阅读 0赞

### 目录 ###

*   *   *  
     *  一、Vue的引入
     *  二、Vue快速入门
     *  三、Vue入门案例
     *  最后

###  ###

今天是刘小爱自学Java的第136天。

感谢你的观看，谢谢你。

![format_png][]

学习内容安排如下：

*  学大概两、三天的前端知识，Vue框架。
 *  了解下前端开发模式的发展。
 *  Vue的介绍与使用。
 *  Vue的快速入门，写一个入门案例。

## 一、Vue的引入 ##

先聊一下前端开发模式的发展。

**1静态页面**

最初的网页以HTML为主，是纯静态的网页。

页面信息来自服务端的单向流通，开发人员也只关心页面的样式和内容即可。

**2异步刷新，操作DOM**

2005年开始，ajax逐渐被前端开发人员所重视，因为可以完成页面数据的动态渲染。

此时的开发人员不仅仅要编写HTML样式，还要懂ajax与后端交互，再通过JS操作Dom元素来实现页面动态效果。

比如我们以前学过的jQuery就是典型代表，同时我们对jQuery做一个简单的回顾：

![format_png 1][]

**①视图：view**

视图，页面渲染结果，准确地说这儿不能算是一个视图，这里还没有完成渲染。

但为了后续MVVM模式的说明，我这里用这个例子来说明，可以把它理解成视图。

**②模型：model**

模型，包括数据和一些基本操作，这里就可以理解成从后台响应的数据。

**③DOM操作**

那如何将model渲染到对应的view中呢？

专业术语就是dom操作，在这里就是使用的jQuery中的html()方法。

要知道dom操作是很繁琐的，要记一堆方法，这里html()方法算是简单的了。

**3MVVM，关注模型和视图**

它的厉害之处在于：把开发人员从繁琐的DOM操作中解放出来了。

VM：即View-Model，这也是MVVM名称的由来。而Vue就是一款MVVM模式的框架。

![format_png 2][]

Vue.js，前端框架三大巨头之一，作者是一个中国人，真心是争气呀，太厉害了。

想都不用想，肯定学它，不仅仅是支持国产什么的，本质上它确实很牛。

比我们以前学的jQuery更加地方便好用。

使用Vue之后，开发人员不用再关心Model和View之间是如何互相影响的：

*  只要我们Model发生了改变，View上自然就会表现出来。
 *  当用户修改了View，Model中的数据也会跟着改变。

## 二、Vue快速入门 ##

**1Node和NPM**

NPM是Node提供的模块管理工具，可以非常方便的下载安装很多前端框架，包括Jquery、AngularJS、VueJs都有。

为了后面学习方便，我们先安装node及NPM工具，这个NPM就可以初步理解成Java中的maven工程，是一个管理工具。

下载Node后安装，就会自带NPM了。

NPM默认的仓库地址是在国外网站，速度较慢，建议大家设置到淘宝镜像。但是切换镜像是比较麻烦的。

推荐一款切换镜像的工具：nrm

![format_png 3][]

命令有很多，但看名字都很简单，做个汇总：

*  查看NPM版本命令：npm -v
 *  nrm安装命令：npm install nrm -g
 *  查看npm的仓库列表命令：nrm ls
 *  使用淘宝镜像源命令：nrm use taobao
 *  测试速度命令：nrm test npm
 *  测试淘宝：nrm test taobao

**2创建一个新的工程**

此时使用Static Web学习下Vue即可，

idea开发工具中可以下载vue插件，步骤为File-Setting-plugins，再搜索vue安装即可。

关于vue的使用，可以直接使用公共的CDN服务，我们这里使用**npm安装**。

在idea的左下角，有个Terminal按钮：

![format_png 4][]

这个窗口就等同于前面的dos窗口，现在直接在idea开发工具中了，使用起来很是方便。

**①项目初始化**

命令：npm init -y。

init即为初始化的意思，-y表示yes确定的意思，初始化完成之后，会在项目目录下出现一个package.json文件。

有对项目的基本描述信息，例如名称、版本等，这个就有点类似Java中的pom文件。

**②安装Vue**

命令：npm install vue --save

安装后会在项目中出现node\_modules目录，并且在其中会有一个vue目录。

此时再查看package.json，会发现变化：

![format_png 5][]

这个package.json文件就和Java中的pom文件很类似，vue就有点类似于Java的jar包。

就连引入依赖的关键字都是一样的，这些配置完成，就可以使用vue进行开发了。

## 三、Vue入门案例 ##

创建html文件，写一个入门案例：

![format_png 6][]

首先导入项目目录中的vue，这不用多说。

**①对应视图view**

这里的视图就可以理解成这个div标签，其中它需要一个数据name，需要从后台查询。

格式：**\{ \{name\}\}**，注意有两个大括号。

**②对应模型model**

当然这里只是快速学习，自己用一个写好的数据代替即可，并没有从数据库去查询，实际开发过程中是要去数据库查询的。

*  el：element的简写，通过id选择器确定模块，通过它将视图和模型绑定。
 *  data：就是数据的意思，很好理解。

以前需要使用dom操作将数据渲染到对应的标签，现在数据和view自动就可以完成。

前面我们也说过了VM：即View-Model，它是指模型与视图间的双向操作。

上面这个例子只是用model来渲染view，那view如何修改model呢？

![format_png 7][]

**③对话框**

v-model=“num”，即将对话框和model中的数据num绑定，在对话框中输入对应的数值，model中的数据num也会完成修改。

这个可就非常厉害了，也很方便。

**④点击事件**

@click，这是vue中的点击事件编写格式，同样的也可以和model中的num绑定。

好，代码编写完毕，做一个测试：

![format_png 8][]

页面上的数据会随着对话框中输入的数值动态变化而变化，点击事件也能完成加一的效果。

## 最后 ##

谢谢你的观看。

如果可以的话，麻烦帮忙点个赞，谢谢你。

[format_png]: /images/20221123/9c570e9419304c189a9f59781af73aba.png
[format_png 1]: /images/20221123/948f17013f1c4b8f8694e18169a672fb.png
[format_png 2]: /images/20221123/45d143fa9ef84fa6987bffe03a8320d7.png
[format_png 3]: /images/20221123/afc1ecfb5e734beda5e9d302d13a2fbc.png
[format_png 4]: /images/20221123/15f62457842d40baa21b49901fae9f61.png
[format_png 5]: /images/20221123/e1af25b404a143cdab6ecd957225e3d0.png
[format_png 6]: /images/20221123/4b73c3a902f7408da84354108a72e227.png
[format_png 7]: /images/20221123/bc38b4c2ef434a6ab53ed8fa0447f182.png
[format_png 8]: /images/20221123/ce4ae93a4f994faab8576548280a33df.png