# 前端开发之VUE.js入门及使用实例

> 作者/来源: UCloud 运营管理员
> 发布时间: 2023-01-11T05:20:00.000Z
> 分类: 解决方案
> 标签: Java, 前端
> 原文链接: http://117.50.162.249:3000/yun/articles/687

---

# 前端开发之VUE.js入门及使用实例

> 来源: https://www.ucloud.cn/yun/130222.html
> 作者: IT那活儿
> 发布日期: 发布于2023-01-11 13:20

前端开发之VUE.js入门及使用实例

相关项目交付的前端框架改造，为方便大家尽快完成从JSP到VUE的技能提升过渡，现将VUE框架相关知识点整理成文，方便大家快速的学习上手。

本文主要内容：

- 前段框架是什么；
- 什么是VUE；
- VUE实例；
- VUE安装与使用；
- VUE知识结构（思维导图）

01

前端框架是什么

早期前端比较简单，页面以浏览型为主，简单的表单操作，每个界面上只有很少的JavaScript逻辑，基本不需要框架。随着AJAX的出现，Web2.0的兴起，人们开始在页面上做比较复杂的事情，然后前端框架才真正出现——用于简化网页开发，提供一套解决方案，开发人员按选定的规定来安排代码结构。

![](https://ucloud-blog.cn-bj.ufileos.com/articles/130222/images/130222_000.png)

常见框架有：

1、ExtJS和dojo，该类框架封装了一些DOM操作功能、html文档操作、漂亮的各种控件（按钮，表单等等）。

2、Google:Angular/Facebook:React/Vue.js，该类属于MVVM数据驱动框架，以数据为基础，将“数据”和“视图”分离，将web产品向传统应用软件开发靠拢。

02

什么是VUE

通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

   

**数据驱动**：数据改变驱动了视图的自动更新。传统的开发流程是通过对dom节点编写js监控输入，再通过js代码改变视图，而vuejs只需要改变数据视图便会跟随更新，框架内部已经对监控部分进行了封装。

**视图组件化**：把整个网页拆分成一个个区块，每个区块我们可以看作成一个组件。网页由多个组件拼接或者嵌套组成。最终形成的页面，在开发过程中，由<template>进行组件拆分。

![](https://ucloud-blog.cn-bj.ufileos.com/articles/130222/images/130222_001.png)

VUE教程分类

在开发过程中遇到过的问题，列举：

**1****、模板语法**

标签中只能包含一个直接子元素

使用双大括号插入data中定义的变量，{{name}}，

但是写在html尖括号中的使用不需要{{}}

**2、class与style绑定**

元素的样式通过js中data的一个数值进行控制

最常见的就是isShow=“none”｜“block”

:style=“{display:isShow}”

可以使用数组

**3****、条件渲染**

v-if   v-else   v-else-if   //相当于js代码中的if else 语句

v-show

v-for   //相当于js代码中for语句

**4、表单输入绑定**

V-model = “value” //value为data中定义的变量名，输入框输入数值变化时，vue实例中的变量值对应着变更

**知识点学习流程：**

![](https://ucloud-blog.cn-bj.ufileos.com/articles/130222/images/130222_002.png)

03

VUE实例

**1、开始构建 & 数据变更视图**

![](https://ucloud-blog.cn-bj.ufileos.com/articles/130222/images/130222_003.png)

**后台请求 & 数组展**

**![](https://ucloud-blog.cn-bj.ufileos.com/articles/130222/images/130222_004.png)**

**2、指令使用**

![](https://ucloud-blog.cn-bj.ufileos.com/articles/130222/images/130222_005.png)

![](https://ucloud-blog.cn-bj.ufileos.com/articles/130222/images/130222_006.png)

04

VUE的安装与使用

**1****、安装****node.js**

Node.js 不是JavaScript的应用，也不是一种框架，更不是一门语言。是一种JavaScript的运行环境，与浏览器是一个JavaScript运行环境一样。我的理解更趋向于vue服务器的一种编译环境，将vue后缀的各个组件通过node.js中包含的一系列工具最终生成由浏览器能运行的标准html、js、css文件。nodejs.org 前往官网下载安装。

**2、项目开发中运用的node.js核心工具：**

**npm — 包管理工具**

用户从NPM服务器下载别人编写的第三方包到本地使用；

用户也可以上传自己编写的包到NPM服务器给别人下载使用

通过系统指令  npm xxxx  使用

**web****pack —****打包工具**

![](https://ucloud-blog.cn-bj.ufileos.com/articles/130222/images/130222_007.png)

如图左显示的后缀，通过webpack定义的规则，编译之后输出为图右侧后缀。

**3、安装vue-cli** 

vue-cli是Vue提供的一个官方cli，专门为单页面应用快速搭建繁杂的脚手架。用于自动生成vue.js+webpack的项目模板。

**![](https://ucloud-blog.cn-bj.ufileos.com/articles/130222/images/130222_008.png)**

**4、创建工程**

![](https://ucloud-blog.cn-bj.ufileos.com/articles/130222/images/130222_009.png)

**5、vue项目相关的一些依赖包介绍**

**ESLint** 代码校验规则 — 提供一个插件化的javascript代码检测工具，检测过于严格，不建议使用**B****abel** 把 JavaScript 中es2015/2016/2017/2046 的新语法转化为 es5，让低端运行环境(如浏览器和 node )能够认识并执行**R****outer** 是Vue.js官方的路由插件，用于设定访问路径，并将路径和组件映射起来，在router单页面应用中，是路径之间的切换，也是组件切换。

6、**启动项目**

**![](https://ucloud-blog.cn-bj.ufileos.com/articles/130222/images/130222_010.png)**

**![](https://ucloud-blog.cn-bj.ufileos.com/articles/130222/images/130222_011.png)**

**7、****项目目录结构**

**![](https://ucloud-blog.cn-bj.ufileos.com/articles/130222/images/130222_012.png)**

**![](https://ucloud-blog.cn-bj.ufileos.com/articles/130222/images/130222_013.png)**

05

VUE知识结构--思维导图

![](https://ucloud-blog.cn-bj.ufileos.com/articles/130222/images/130222_014.png)

06

关于vue使用过程中的个人理解及建议

**1****、****vue****最终还是****html****、****js****、****css****的集合**

在vue项目中会存在各种非html标准定义标签，比如<template>、