课程来源：b站搜索编程不良人。
1 vue介绍
# Vue是一款**渐进式**的框架，它致力于用更简单的API来实现数据的双向绑定。
# 作者是国内的：**尤余溪**
# Vue的两个核心点:
1: 响应式数据绑定当数据发生变化的时候，视图自动更新，即双向数据同步，原理利用了ES6中的 Object.definedProperty 中的setter/getter 代理数据，监控对数据的操作。
2: 组合的视图组件即页面最终映射为一个组件树，采用树形数据结构进行设计，方便维护，重用。
2 vue入门案例
2-1 下载
有适用于开发环境和生产环境的两种文件(开发环境没压缩，更多的提示，生产环境压缩了，也去除了提示):
开发版,包含了有帮助的命令行警告:
生产版，优化了尺寸和速度：
2-2 HelloWorld
Document
{{ helloMsg }}
{{ helloMsg2 }}
解释：
# 我们先是new了一个Vue，代表我们要使用Vue，然后传入的参数：
{{}}：插值表达式，Vue渲染页面以后，会将插值表达式的内容替换成我们的变量名的值。
属性el：代表我们需要接管的区域，一般都是一个大的div，里面可以使用任意选择器，id选择器、类选择器等等都可以。如果我们的插值表达式书写的地方不在el指向的范围的话，该插值表达式不会被解析。
属性data：我们定义的需要被使用的数据，可以是任意类型。
3 v-text和v-html
3-1 v-text：
v-text的作用是从vue实例的data属性中取出数据渲染到指定标签中
v-text的使用
{{msg1}}
解释：
# v-text直接依附在标签上，作用就是会将数据覆盖掉该标签中的原内容。
# 那么v-text和{{}}都可以获取data中的数据并填充，那他们的区别是什么?
1: v-text是依附在标签上，{{}}是随处都可使用
2: v-text不会出现闪烁的问题，{{}}会。
什么是闪烁问题：
假如我们的网上很慢，然后网页打开后js还没有下载完，那么这个时候{{}}这个插值表达式也没有被解析，那么在页面上呈现出来的样子就是”{{}}“，这样给用户的体验不好，然后当我们使用v-text的时候，哪怕js没有下载完，也不会在页面上出现类似于插值表达式这种的东西。
这个情况也可以模拟，例如谷歌浏览器：f12->点击network->点击network下的Online并切换选择为Slow 3G，这样网速就会被限制为很慢的3G，然后ctrl+shift+R强制刷新，这样你就能看见网速慢的情况下，插值表达式未被渲染的情况了，这就是插值表达式的闪烁问题。
3-2 v-html
v-html和v-text功能一样，唯一的不同就是v-html可以将数据解析为html
v-html
{{testMsg}}
解释：
# 我们的数据testMsg是一个字符串，但是实际的内容是一个a标签，当我们使用插值表达式和v-text的时候，都是直接将testMsg当作一个普通的值，而v-html却是将testMsg解析成了html标签。
4 事件绑定，v-on
v-on绑定事件的基本用法，语法：v-on:事件名=函数名
v-on
解释：
# vue的事件绑定:
1、比如在methods下定义方法
2、书写事件：第一种方法：v-on:方法名([参数,如果没有参数大括号可以不加])，第二种写法：@方法名([参数，如果没有参数大括号可以不加])。这里的参数可以是任意表达式。
注：我们的事件绑定也可以直接书写表达式。
3、书写监听方法：第一种写法:方法名:function(参数){方法体}，第二种写法：方法名(参数){方法体}
5 v-show v-if v-bind
5-1 v-show
v-show是用来控制该标签是否显示的。底层操作的是标签的display=none/block
v-show
我被隐藏了，因为v-show的值是false
我的显示决定于isShow的值
解释：
# 我们可以f12中查看标签的style属性。
5-2 v-if
v-if也是用来控制标签是否显示的，但是和v-show不同的是，v-show是操作的元素的display，而v-if是直接操作dom。
v-if
我直接当场自闭，我没了
我的显示与否取决于isShow
解释：
# 我们f12后就会发现，当没显示的时候，直接dom元素直接没了，然后再去对比v-show就能很清晰的知道他们二者的区别了。
5-3 v-bind
用来绑定标签的属性，达到快捷的更改属性的操作，例如绑定元素的class，src等。
v-bind
我是文字,我会被动态的改变样式,因为我使用v-bind绑定了class属性
我是文字,我也会被动态的改变样式,我使用了另一种绑定的语法，:class
解释：
# v-bind的作用就是绑定标签的属性，可以很便捷的更改其属性的值。
两种写法：
1> v-bind:属性名="变量名"
2> :属性名="变量名"
6 v-for循环
可以遍历对象、数组等玩意的。
v-for
测试遍历对象
-
第:{{index+1}}个，key:{{key}}，value:{{value}}
测试遍历数组
-
第:{{index+1}}个，值为:{{item}}
测试遍历数组(内容为对象)
-
第:{{index+1}}个，用户名为:{{user.username}}，名称为:{{user.name}}，密码为:{{user.password}}
解释：
# 遍历对象的时候：
v-for="每一项的key,每一项的value,当前下标 in 变量名"
# 遍历其他的时候：
v-for="每一项的内容,当前下标 in 变量名"
7 v-model双向绑定
双向绑定的意思就是，绑定的标签元素的值与data数据中的保持一致，data中更改后元素值就会更新，元素中值更新后data中数据也会更新，也就是达到他们会保持一致的这个特点，这就是双向绑定。
v-mode
解释：
# 1、v-model可以实现表单元素与data数据的双向绑定。
# 2、v-model双向绑定只能用于表单元素中。
# 3、直接在表单元素中应用v-model的时候，那么绑定的就是元素的value属性值.
7-1 v-model小案例：
记事本
- {{index+1}} {{info.content}}
总条数:14
8 事件修饰符
官方解释：
在事件处理程序中调用
event.preventDefault()或event.stopPropagation()是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。 为了解决这个问题，Vue.js 为
v-on提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。大概的意思就是，例如冒泡这种，元素内的元素事件可以会冒泡到外层元素的事件中，或者我们a标签点击事件的时候，并不想触发它默认的跳转的行为，这些在没有vue之前，都需要自己手动的去设置，有了vue以后，vue提倡的是只关心代码的数据、逻辑实现，而不需要去关心dom事件的繁杂细节，所以vue提供了事件修饰符来进行解决这些事情。
语法：@事件名.修饰符，注意，修饰符可以多个。
8-1 stop修饰符
用来阻止事件的冒泡
stop修饰符
阻止事件的冒泡
解释：
# 如果我们没有给input的click加上.stop的修饰符，那么div的click也会被触发
8-2 prevent修饰符
用来阻止标签的默认行为的，比如说a标签，你懂的。。
prevent修饰符
解释：
# 我们a标签本身的行为就是跳转到href的地址，而我们使用修饰符.prevent以后呢，那么它的默认行为就会不生效了。
8-3 self修饰符
加了这个修饰符以后，那么这个事件只会被元素自身触发，其他的地方触发是无效的，就比如一个大div和小div，他们都有自己的点击事件，那么小div事件触发后会冒泡到大div的事件中，那么如果大div加上这个self修饰符以后，那么大div的事件只能够被大div自己所触发，小div的冒泡到大div来这种啥情况的就没用了。
self修饰符
阻止事件的冒泡
解释：
# 大的div的事件因为加了self修饰符，所以说它只关心由自己元素本身触发事件，其他的一概不鸟。
8-4 once修饰符
这个其实最简单，意思就是加了这个修饰符，那么该事件就只会被触发一次。
once修饰符
解释：
# 通过点击测试可以发现，我们的aClick方法只会被执行一次，因为我们的a标签的click事件第一次被触发后就不能再触发了。
9 按键修饰符
就是现有一个onkeyup事件，然后可以指定哪个按键，比如说我们想要当回车键按下后触发事件，当退格键按下后触发事件，那么这种就可以使用按键修饰符。
按键修饰符
解释：
# 按键修饰符有很多，常用的有：
1 .enter
2 .tab
3 .delete (捕获“删除”和“退格”键)
4 .esc
5 .space
6 .up
7 .down
8 .left
9 .right
当然我们也可以直接用按键对应的码，例如@click.keyup.112="customClick"。
我们也可以自定义xxx码对应为xxx按键，例如：Vue.config.keyCodes.f1 = 112，也可以简写为:v-on:keyup.f1 = 112
如果你想了解详细点，可以看官网：https://cn.vuejs.org/v2/guide/events.html#%E6%8C%89%E9%94%AE%E4%BF%AE%E9%A5%B0%E7%AC%A6
10 Axios使用
Axios是一个异步请求的库。Vue的作者推荐使用Axios这个Http请求库。
使用：
可以使用CDN，也可以直接下载下来后用
10-1 GET请求的方式：
Axios
10-2 POST请求方式：
测试POST
解释：
# 语法：
axios.get/post.(url,param).then(function(response){}).catch(function(error){})
url:字符串，请求路径
param:请求参数,{}
.then:正常情况的回调
.catch:正常
10-3 axios并发请求：
可以让我们先存储几个请求，然后再一次性的全都请求出去。
并发请求
解释：
# test1方法返回test1这个请求的信息，test2方法返回test2这个请求的信息。
axios.all([需要执行的请求信息]).then(
axios.spread(function(响应信息[有几个请求则写几个参数]..){
响应回调方法体
})
)
最后附上测试的后台Controller：
package com.cqsw.demo.controller;
import com.cqsw.demo.utils.response.ComResponse;
import org.springframework.web.bind.annotation.*;
import java.util.Date;
import java.util.Map;
import java.util.Set;
/**
* Vue测试接口哦
*/
@RestController
public class Test1Controller {
@GetMapping("/test1")
@CrossOrigin
public ComResponse test1() {
return ComResponse.buildSuccess("成功了!", new Date());
}
@PostMapping("/test2")
@CrossOrigin
public ComResponse test1(@RequestBody Map map) {
Set keySet = map.keySet();
for (String s : keySet) {
System.out.println("key:" + s + "====value=" + map.get(s));
}
return ComResponse.buildSuccess("成功", null);
}
}
11 生命周期
所谓生命周期，就是从出生到死亡的这个过程。那么这里呢就是说明Vue的生命周期
# 我们可以将这个生命周期拆分为三个阶段：
1- 初始化阶段
2- 运行阶段
3- 销毁阶段
# 那么就按照这三个阶段来说明这三个阶段中的回调方法：
1- 初始化阶段：
# beforeCreate:Vue实例仅仅是初始化、绑定了事件、还没有初始化el、data等数据的时候
# created:完成了el、data等数据库初始化，但是还没有将数据渲染到dom中的时候
# beforeMount:准备将数据渲染到dom中，但是还没有渲染的时候
# mounted:已经将数据渲染到dom中的时候
2- 运行阶段：
# beforeUpdate:data中数据发生改变，重新渲染到dom中之前的时候
# updated:data中改变的数据已经重新渲染到dom中之后的时候
3- 销毁阶段：
# beforeDestroy:实例销毁之前的时候，在这个方法里面使用vue完全可以
# destroyed:实例被销毁之后的时候，在这个方法里面vue基本上不可用了
当然还有很多其他的回调方法:
例如activated(keep-alive缓存组件激活时)、deactivated(keep-alive缓存组件停用时)、errorCaptured(发生错误的时候)，详细了解可以查询官网:
https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9FE9%92%A9%E5%AD%90
代码示例：
测试生命周期
11-1 综合前面所学vue知识做一个员工管理系统
https://files.cnblogs.com/files/daihang2366/vuedemo1.zip ，下载后导入sql则可以运行
12 vue中组件(Component)
12-1 组件作用
组件是vue中可复用的实例，我们可以将整个项目划分为不同的组件，然后多个组件组整一个完整的项目。
12-2 组件使用
12-2-1 全局组件的注册
全局组件注册后可以在vue实例的任意范围内使用该组件
Document
解释：
# 1：Vue.component用来开发全局组件
参数1：组件的名称。
参数2：组件的配置--template:''用来书写组件的代码
注意：组件中的代码只能有一个根元素，且必须有一个根元素
# 2：使用时需要在Vue实例的范围内使用，其他地方使用是无效的
# 3：如果组件注册过程中，使用驼峰命名，例如你的组件名是这样的：userAdd，那么你使用的时候，就要变成这样：user-add
12-2-2 局部组件的注册：
通过将组件注册给Vue实例的一个components属性来完成注册，这样不会对Vue造成累加
第一种开发方式:
Document
第二种方式：
Document
用户登录
解释：
# 1：注意我们的组件是在Vue实例的components属性中进行注册的。
# 2：我们的组件实际代码除了直接在属性template中书写，还可以额外在html代码中写一个template标签，然后template属性中使用id、class等选择器指向该tempplate标签即可。
12-3 Prop的使用
作用：prop用来给组件传递静态数据或动态数据
12-3-1 通过在组件上声明静态数据传递给组件内部
Document
解释：
# 1：可以在标签属性上书写属性名=值，然后在组件参数使用props声明这两个传递来的值，然后我们就可以在组件内使用这两个使用这两个值
# 2：标签内的命名不能使用驼峰命名，只能使用单词-单词这种，但是当我们在组件内使用的使用又不能使用-的这种变量名，所以我们在标签上使用-形式，在组件内就转为驼峰命名法即可
12-3-2 通过在组件上声明动态数据传递给组件内部
通过在组件上声明动态数据传递给组件内部
解释：
# 注意：
我们前面的静态数据是写死的，但是我们要知道我们的login这个标签是在vue实例中的，那么我们就可以使用vue实例的data数据，那么我们将原来的死数据绑定为我们vue实例中的data数据，那么就达到了动态的效果。
13-3-3 prop的单向数据流
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。
# 是什么意思呢？
就比如前面的例子，
我们vue实例中data数据发生改变后，那么组件内应用了此数据的地方则会进行更新，这就是向下流动到子组件中。
但是如果我们在组件中修改data数据，那么这就会改变vue实例的状态，那么这种情况是不被认可的，vue认为这是难以理解的。
代码实例：
通过在组件上声明动态数据传递给组件内部
暂且不关心组件内方法如何定义(会面会说)，这里你会发现，我们点击login外的button去更改data的时候，是没问题的，但是我们在login内点击更改绑定的name的值的时候，由于它绑定了vue的username的值，所以它会去更改vue的username的值，虽然效果是没问题的，但是这种情况不被认可，所以我们开发中不要这么干
12-4 组件中定义数据和事件的使用
Document
解释：
# 1：组件中定义方法和vue实例一致
# 2：定义data和vue实例不同，定义data需要写成一个函数，并且返回数据是对象。
12-5 向子数组中传递事件并在子组件中调用改变事件
也就是说在子组件内去调用父组件的方法
Document
解释：
# 1、13 vue中路由(Router)
13-1 路由是什么
路由:根据请求的路径按照一定的路由规则进行请求的转发从而帮助我们实现统一请求的管理
13-2 作用
用来实现在vue中组件的动态切换
13-3 使用路由
安装路由:https://unpkg.com/[email protected]/dist/vue-router.js
1、引入路由
2、创建组件
// 登录组件
const login = {
template: '登录组件
'
}
// 注册组件
const register = {
template: '注册组件
'
}
3、创建路由对象并定义路由规则
// 定义路由对象
const router = new VueRouter({
routes:[
{path:'/login',component:login}, // path就是对应路径，component就是对应的组件
{path:'/register',component:register}
]
});
4、将路由对象注册到vue实例中
const vue = new Vue({
el: "#app",
data:{},
methods: {
},
router:router // 将路由注册到vue实例中去
})
5、在页面中定义路由组件显示的区域
6、定义a标签来切换路由
点我到登录
点我到注册
注意：要加上#符号
13-4 router-link使用
作用：用它以后，我们就不用自己写a标签，然后再写#/xxx路径了，
好处：也就是代替我们写a标签，写#路径
Document
测试router-link哦
登录组件
注册组件
13-5 默认路由
默认路由就是第一次进入界面显示的组件地址
我们可以直接使用 / 来指定默认地址：
const router = new VueRouter({
routes:[
{path:'/',component:login}, /*我们可以直接使用/来代表默认地址显示的组件*/
{path:'/register',component:register}
]
})
我们也可以使刚开始的 / 重定向到/login地址
const router = new VueRouter({
routes:[
{path:'/',redirect:'/login'}, /*当我们地址是 / 的时候，重定向到/login中*/
{path:'/login',component:login},
{path:'/register',component:register}
]
})
13-6 路由中传递参数
1、第一种方式在路径上?号传递参数
在路径上拼接参数
Document
去往登录组件
去往注册组件
2、restful形式传递参数
路径方式传递参数
Document
注册哦
13-7 嵌套路由
Document
主页面
用户管理
用户管理
新增用户
查询用户
解释：
解视组件内还需要展示其他的组件，那么就需要下一层。
例如：
用户管理--组件
新增用户--组件
查询用户--组件
那么这个时候，我们需要在用户管理内展示新增用户，那么就需要这种嵌套路由。
14 vue CLI脚手架
14-1 什么是CLI
命令行界面（英语：command-line interface，缩写：CLI）是在图形用户界面得到普及之前使用最为广泛的用户界面，它通常不支持鼠标，用户通过键盘输入指令，计算机接收到指令后，予以执行。也有人称之为字符用户界面（CUI）。
14-2 什么是Vue CLI
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统
14-3 Vue CLI优势
- 通过
@vue/cli实现的交互式的项目脚手架。- 通过
@vue/cli+@vue/cli-service-global实现的零配置原型开发。- 一个运行时依赖 (@vue/cli-service)，该依赖：
- 可升级；
- 基于 webpack 构建，并带有合理的默认配置；
- 可以通过项目内的配置文件进行配置；
- 可以通过插件进行扩展。
- 一个丰富的官方插件集合，集成了前端生态中最好的工具。
- 一套完全图形化的创建和管理 Vue.js 项目的用户界面。
14-4 Vue CLI安装
1、环境准备
# 1、下载node.js
http://nodejs.cn/download/
# 2、配置node.js
下载安装包安装或者压缩包解压。
然后配置环境变量：
1:新建NODE_HOME=nodejs根目录
2:在PATH中加入：%NODE_HOME%
# 3、验证是否成功
cmd输入node -v出现版本号则成功
# 4、npm介绍
全名node package manager：nodejs的包管理工具，相当于后端的maven一样。
# 5、配置npm的淘宝镜像
先使用:npm config get registry查看当前中央仓库地址，此地址是外国的，需要更换为国内的淘宝镜像
使用：npm config set registry https://registry.npm.taobao.org配置中央仓库为国内的
再使用npm config get registry查看镜像地址。
# 6、配置npm依赖下载的位置
npm config set cache "E:\NodeJS\node-v14.7.0-win-x64\npm-cache"
npm config set prefix "E:\NodeJS\node-v14.7.0-win-x64\npm_global"
# 7、验证环境配置
npm config ls
; cli configs
metrics-registry = "https://registry.npm.taobao.org/"
scope = ""
user-agent = "npm/6.14.7 node/v14.7.0 win32 x64"
; userconfig C:\Users\23665\.npmrc
cache = "E:\\NodeJS\\node-v14.7.0-win-x64\\npm-cache"
prefix = "E:\\NodeJS\\node-v14.7.0-win-x64\\npm_global"
registry = "https://registry.npm.taobao.org/"
; node bin location = E:\NodeJS\node-v14.7.0-win-x64\node.exe
; cwd = C:\Users\23665
; HOME = C:\Users\23665
; "npm config ls -l" to show all defaults.
2、安装脚手架
# 1、卸载原有脚手架
npm uninstall -g @vue/cli //卸载3.x版本脚手架
npm uninstall -g vue-cli //卸载2.x版本脚手架
# 2、安装脚手架
npm install -g @vue/cli
14-5 第一个脚手架项目
# 1、需要将我们前面设置的下载位置加入到环境变量中
例如我的这个是：E:\NodeJS\node-v14.7.0-win-x64\npm_global
# 2、测试是否安装成功
cmd->vue --version，出现版本号则成功
# 3、创建脚手架项目
切换到我们需要的目录，然后vue init webpack 项目名
注意：
1：可能会让你安装init组件，那么npm install -g @vue/cli-init
2：创建脚手架的中途，会让你确认一系列
1):确认项目名：回车
2):确认项目简介：回车
3):确认作者信息邮箱：回车
4):忘记了：回车
5):是否安装路由:y
6):是否需要els初始化：n
7):是否需要测试：n
8):是否需要e2e测试：n
9):包管理用啥：回车
10):然后就等
14-6 如何开发脚手架
# 1.创建第一个项目
hello ------------->项目名
-build ------------->用来使用webpack打包使用build依赖
-config ------------->用来做整个项目配置目录
-node_modules ------>用来管理项目中使用依赖
-src ------>用来书写vue的源代码[重点]
+assets ------>用来存放静态资源 [重点]
components ------>用来书写Vue组件 [重点]
router ------>用来配置项目中路由[重点]
App.vue ------>项目中根组件[重点]
main.js ------>项目中主入口[重点]
-static ------>其它静态
-.babelrc ------> 将es6语法转为es5运行
-.editorconfig ------> 项目编辑配置
-.gitignore ------> git版本控制忽略文件
-.postcssrc.js ------> 源码相关js
-index.html ------> 项目主页
-package.json ------> 类似与pom.xml 依赖管理 jquery 不建议手动修改
-package-lock.json ----> 对package.json加锁
-README.md ----> 项目说明文件
# 2.如何运行在项目的根目录中执行
npm start 运行前端系统
注意：如果使用vscode打开后，终端里提示找不到npm命令的话，那么使用管理员的身份打开即可
# 3.如何访问项目
http://localhost:8081
# 4.Vue Cli中项目开发方式
注意: 一切皆组件 一个组件中 js代码 html代码 css样式
1. VueCli开发方式是在项目中开发一个一个组件对应一个业务功能模块,日后可以将多个组件组合到一起形成一个前端系统
2. 日后在使用vue Cli进行开发时不再书写html,编写的是一个个组件(组件后缀.vue结尾的文件),日后打包时vue cli会将组件编译成运行的html文件
# 5.注意，vue中一切皆组件！
15 脚手架中使用axios
# 1、安装axios
npm install axios --save-dev
# 2、在main.js中引入axios并配置
import axios from 'axios';
Vue.prototype.$http=axios;
# 3、使用axios
this.$http.get(xxxxx)，这种用法，我们配置的原因就是将vue中的http请求工具换成axios
16 脚手架中使用ElementUI
# 1、安装ElementUI
npm install element-ui --save-dev
# 2、配置
在main.js中：
导入组件库import ElementUI from 'element-ui'
导入样式import "element-ui/lib/theme-chalk/index.css"
使用Vue.use(ElementUI)
17 vue CLI脚手架项目打包和部署
# 1.在项目根目录中执行如下命令:
npm run build
注意:vue脚手架打包的项目必须在服务器上运行不能直接双击运行
# 2.打包之后当前项目中变化
在打包之后项目中出现dist目录,dist目录就是vue脚手架项目生产目录或者说是直接部署目录
18 使用iview
# 注:这里使用的是最新版本4.x的，看官网文档的时候，记得选文档版本，不然你会气死的，相信我，我就是这样，
# 1、安装
$ npm install view-design --save
# 2、导入到入口文件
import ViewUI from 'view-design';
// import style
import 'view-design/dist/styles/iview.css';
# 3、设置到vue中
Vue.use(ViewUI);