前端开发之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的兴起，人们开始在页面上做比较复杂的事情，然后前端框架才真正出现——用于简化网页开发，提供一套解决方案，开发人员按选定的规定来安排代码结构。

常见框架有：

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

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

02

什么是VUE

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

   

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

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

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实例中的变量值对应着变更

知识点学习流程：

03

VUE实例

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

后台请求 & 数组展

2、指令使用

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 —**打包工具

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

3、安装vue-cli 

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

4、创建工程

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

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

6、启动项目

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

05

VUE知识结构--思维导图

06

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

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

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