Vue笔记

vue控制台消除两个小提示

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-L2OMGER5-1652938984273)(D:\typora\image-20220406114932948.png)]

1.安装vue开发者工具 即可消除
2.提示我们正在使用一个开发者的vue版本 开发者版本比较大(有报错提示功能) 在生成环境中最好替换为生产版本
添加 Vue.config.productionTip = false 即可消除

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WU1zJR5O-1652938984277)(D:\typora\image-20220406115213583.png)]

事件绑定@click传参问题

默认会传event事件参数 @click="showInfo"和@click="showInfo(event)"相等的

可以直接传参@click=“showInfo(66)” 同时也可以带上事件参数@click=“showInfo($event,66)”

Vue笔记_第1张图片

v-bind 属性绑定

标签中属性加 v-bind: 进行属性动态绑定 age的值 是双引号里面运行的表达式的值 而不是字符串

不加 v-bind: age的值 是双引号里面的字符串

上面age值的是 数值19

下面是 字符串 18+1

Vue笔记_第2张图片

Vue中data函数两种写法

vue3中只支持函数式

Vue笔记_第3张图片

由Vue管理的函数如果用箭头函数写 this指的不再是vue实例 而是window

箭头函数中this指代是window

Vue笔记_第4张图片

事件修饰符

Vue笔记_第5张图片

  • prevent

    添加后点击标签 不再跳转 只执行showInfo事件函数

    在这里插入图片描述

  • stop

    添加后点击

    Vue笔记_第6张图片

  • once

    添加后点击

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-D4jcubOA-1652938984287)(D:\typora\image-20220402150015065.png)]

  • capture

    在div1中添加capture后 点击 标签 先执行div1的事件 再执行div2的事件

    事件捕获 顺序:由外到内 div1 --> div2

    事件冒泡 顺序:由内到外 div2 --> div1

    嵌套的div执行顺序为:先事件捕获后事件冒泡

    由于正常事件 在冒泡阶段触发 所以正常先执行div2 再div1 结果为 2 1

    在div1中添加capture后 点击 标签 在捕获阶段中就执行div1的事件 再执行div2的事件 结果为1 2

    Vue笔记_第7张图片

键盘事件

在按下指定按键后才触发事件反应
自定义按键(vue3被禁止)

Vue笔记_第8张图片

按下回车键才触发showInfo事件 keyup 按键抬起后触发

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fEOCpVRd-1652938984288)(D:\typora\image-20220402154742560.png)]

e.key 按键名称 enter control(ctrl)

e.keyCode 按键编码 13 17

Vue笔记_第9张图片

插值语法调用函数

Vue笔记_第10张图片Vue笔记_第11张图片

watch监事属性

监听属性(data中的 computed计算属性中的)发生变化时调用监听函数中的handler回调函数

1.可以添加参数 newValue oldValue 2.添加配置 immediate:ture 初始化时就调用

Vue笔记_第12张图片

deep 开启深度监视:监视data属性中某一个属性的子属性是否变化

只监听某一个子属性用 ‘属性名.子属性名’ 方式

监听任意子属性变化用deep:true

Vue笔记_第13张图片

  • 简写方式

    Vue笔记_第14张图片

watch和computed区别

watch可以执行异步操作例如 延时1s执行某个函数 computed做不到 是同步的

Vue笔记_第15张图片Vue笔记_第16张图片

v-if和v-show

v-if 切换频率低时使用 控制DOM是否有节点 false时不渲染

v-show 切换频率高时使用 控制DOM的style:"display:none"的值 任何情况必渲染

Vue笔记_第17张图片

template 只能搭配v-if 使用 v-show不行

Vue笔记_第18张图片

v-for遍历key值原理

v-for遍历时 看情况要添加唯一的key值 如不添加vue默认添加 ;key=“index”

key值为index时 在操作遍历列表数据时可能出现 界面错乱 遍历效率低情况 如果数据仅展示可不添加

key值应为唯一值 如id 身份证号 学号等

Vue笔记_第19张图片
Vue笔记_第20张图片

  • key值为index 页面有输入框 在数据最前面添加新数据时页面错乱 原理

    Vue笔记_第21张图片

  • key值为id 页面有输入框 在数据最前面添加新数据时页面正常 原理

    Vue笔记_第22张图片

Vue中修改或添加数组的某个元素

必须使用 push pop shift unshift splice sort reverse 方法

或者 Vue.set(对象,属性名,值 vm.$set(对象,属性名,值)

直接使用索引修改的话 Vue不会做响应式处理 (页面不会渲染)

Vue笔记_第23张图片

js中数组操作

操作会影响原数组的:

push 末尾添加 splice 替换元素 splice(0,1,“喝酒”) (开始索引,替换元素个数,替换元素)

pop 末尾删除 sort 排序

shift 首位删除 reverse 翻转

unshift 首位添加

不会影响原数组(返回新数组):

filter 过滤

.filter 数组过滤: return 需要满足的条件 返回一个新的数组

indexOf: 是否包含指定字符串 不包含返回-1 包含返回所在索引值 空字符串返回 0

Vue笔记_第24张图片

.unshift: 在数组最前面添加元素

Vue笔记_第25张图片

.push: 在数组后面添加元素

Vue笔记_第26张图片

Math.floor: 向下取整

Math.random(): 生成随机数 [0,1)

Vue笔记_第27张图片

.sort: 数组排序 a.b 为数组中两个元素进行比较

a-b: 升序

b-a: 降序

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0kf52npG-1652938984302)(D:\typora\image-20220406122001344.png)]

给对象中添加属性(做响应式处理)

Vue对象中后添加的属性默认不做响应式处理 (添加数据后数据更新 页面不刷新)

使用: Vue.set(对象,属性名,值) this.$set(对象,属性名,值)

这样后添加的属性具有响应式(getter 和 setter)

Vue笔记_第28张图片

给对象中修改属性

修改对象的已有属性可以直接修改 (先添加的属性Vue已经进行了响应式处理)

Vue笔记_第29张图片

reduce数组统计函数

.reduce( (pre,current)=>{ } , )

可以用来统计数组中做了某事的数量 货币大于100的数量等

下面的用来统计 todos 数组中 done值为true的对象的数量

第一个参数 条件函数 第二个参数 统计初始值

(pre,current)=>{ } 这个函数调用的次数为数组的长度

pre 上一次调用的返回值

current 当前值 数组的当前元素值

Vue笔记_第30张图片

v-model表单

radio 单选框的 一定要添加value值

checkbox 复选框的 添加value值 对应的属性为数组 (添加checked 默认选择项)

v-mode绑定的值不能是props传的值 因为props是不可以修改的

Vue笔记_第31张图片
Vue笔记_第32张图片

filters过滤器

Vue笔记_第33张图片

使用时 通过管道符号 | 加过滤器名 即可调用(可以同时执行多个过滤器)

调用时会自动将time 值 传入(默认)

Vue笔记_第34张图片

过滤器传参可以有两个参数 第一个默认为前面的time值 (调用时可以不写)

第二个为主动传值 如果调用时没有传第二个值 第二个值默认为str的值

Vue笔记_第35张图片

过滤器会生成新的数据 不会改变原数据

要用新的对象接收

Vue笔记_第36张图片

全局过滤器

定义一个名为 mySlice 的全局过滤器

Vue笔记_第37张图片

循环定时器

setInterval(()=>{ 操作 },1000) 设置定时器 操作及时间间隔

clearInterval(定时器名) 销毁定时器

Vue笔记_第38张图片

生命周期

Vue笔记_第39张图片
Vue笔记_第40张图片

非单文件组件(不是.vue结尾的文件)

使用Vue.extend({ }) 创建组件

里面通过templatel来编写html结构 只能有一个根节点(用一个div包裹全部html)

数据部分用date函数式编写 data(){ } (防止数据连带)

Vue笔记_第41张图片

可以简写 省略 Vue.extend({ }) (在Vue脚手架中)

Vue笔记_第42张图片

在Vue实例中用components:{ } 注册组件(局部注册)

1.Vue实例中的组件名:引入组件名

2.直接使用相同组件名

Vue笔记_第43张图片

Vue.component(‘实例中组件名’,引入组件名) 全局组件注册

全局组件可以在不同Vue实例中使用 (不用在不同Vue实例中再去分别注册)

Vue笔记_第44张图片

直接用组件名做标签 使用组件 (局部组件,全局组件同理)

Vue笔记_第45张图片

组件名设置

Vue笔记_第46张图片

Vue实例中的组件名等于引用组件名 可以直接写

一个单词 首字母小写school

Vue开发者工具中显示为首字母大写

Vue笔记_第47张图片

一个单词 首字母大写School

Vue开发者工具中显示为首字母大写

Vue笔记_第48张图片

多个单词用 - 分隔 my-school 同时必须用 ‘’ 标记

Vue笔记_第49张图片

多个单词 首字母全大写 必须在脚手架中才可用使用

Vue笔记_第50张图片

在注册组件是使用name 命名组件名 在Vue开发者工具中显示对于的name名

Vue笔记_第51张图片

Vue文件 命名规则

1.school.vue 1.my-school.vue

2.School.vue (推荐) 2.MySchool.vue (推荐)

单文件组件(.vue结尾的文件)

export default { } 暴露组件

name 和文件名一致

Vue笔记_第52张图片

.vue文件快速创建模板

Vue笔记_第53张图片

脚手架文件结构分析

Vue笔记_第54张图片

index.html文件说明

Vue笔记_第55张图片

main.js文件说明

Vue笔记_第56张图片

render: h => h(App) 只在main.js 文件中调用一次

完整版:核心功能+模板解析器 (文件大)

精简版:核心功能 (文件小)

因为在main.js中引入的是’vue’ 这个’vue’ 是精简版的 解析不了App模板

所以要调用render函数 去进行模板解析

render函数调用createElement函数 createElement可以直接解析html结构

Vue笔记_第57张图片
Vue笔记_第58张图片

vue.config.js 关闭语法检查功能

在项目目录下新建 vue.config.js 文件 添加如下代码

想要修改项目入口 修改entry 地址

查看脚手架默认配置指令 vue inspect > output.js 会生成一个output.js文件

个性化配置详情 https://cli.vuejs.org/zh/config/#pages

Vue笔记_第59张图片

ref属性

Vue笔记_第60张图片

props配置–父传子

父子组件 父传子 传递数据时想传 数值 对象 方法 可以使用v-bind: 属性绑定 这样传递的值是 表达式的值

props比data执行优先级高 先执行props后执行data 所以有同名属性时显示的是props的属性值

v-mode绑定的值不能是props传的值 因为props是不可以修改的

所有props的属性都会成为component对象的属性, 模板页面可以直接引用

Vue笔记_第61张图片

自定义事件–子传父

父子组件 子传父

  • 使用vue的自定义事件机制
    • 绑定事件监听
      • 方式一: 通过$on()
        this.$on('delete_todo', function (todo) {
          this.deleteTodo(todo)
        })
        
      • 方式二: 通过events选项
        events: {
          'delete_todo': function (todo) {
            this.deleteTodo(todo)
          }
        },
        
      • 方式三: 通过v-on绑定
        @delete_todo="deleteTodo"
        
    • 触发事件(3种情况)
      this.$emit(eventName, data): 在当前组件触发事件
      this.$dispatch(eventName, data): 分给父辈组件(冒泡)
      this.$broadcast(eventName, data): 广播给后代组件
      

Vue笔记_第62张图片

父组件中在子组件标签上添加 自定义事件 @自定义事件名=“回调函数名”

并配置回调方法(可传参一个或多个)

Vue笔记_第63张图片

父组件中在子组件标签上添加 ref属性 ref=“标签属性名” 获取ref所在组件实例 通过dom操作实现

并配置回调方法(可传参一个或多个)

在生命周期函数中 通过 this. r e f . s t u d e n t . ref.student. ref.student.on(‘自定义事件名’,this.回调函数名)

可通过设置 定时器搭配 箭头函数实现延时功能

Vue笔记_第64张图片

通过箭头函数直接将 getStudentName 函数实现

this 指向当前组件vc data中的studentName 属性

Vue笔记_第65张图片

在子组件中通过 this.$emit(‘自定义事件名’) 调用回调函数demo 并传值

this 为当前组件实例对象vc

Vue笔记_第66张图片

父组件中回调函数传多个参数 name为第一个参数 …params 为剩余参数(以数组方式接收)

子组件中通过 , 分隔各个参数

Vue笔记_第67张图片

在父组件中的子组件标签上 通过 原生事件.native 可以实现对子组件的事件添加

这么写相当于在子组件的 根标签 上添加show事件函数

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uo04sRHO-1652938984332)(D:\typora\image-20220412110839237.png)]

bus全局事件总线

适用于任意组件之间的通信 如 兄弟组件 孙子组件 父子子父组件一般使用props和emit更方便

Vue笔记_第68张图片

在main.js中的new Vue 中添加beforeCreat生命周期函数并配置bus 全局事件总线

Vue笔记_第69张图片

接收数据组件中 在生命周期函数中(最好在mounted中实现)

通过 this. b u s . bus. bus.on(‘回调函数名’,this.方法名) 配置回调事件

或者 使用箭头函数 this. b u s . bus. bus.on(‘回调函数名’,(参数)=>{ })

Vue笔记_第70张图片

在 接收数据组件中 最好添加beforeDestroy生命周期函数 通过 this. b u s . bus. bus.off(‘回调函数名’) 解绑 组件通信

Vue笔记_第71张图片

发送数据组件中 通过 this. b u s . bus. bus.emit(‘回调函数名’,参数) 将数据发送给接收组件触发回调函数

Vue笔记_第72张图片

mixin.js混入

把多个组件共用的配置提取为一个混入对象 在使用时引入

mixin.js中可以写任何vm配置 如 data methods mounted

mixin.js和组件中共有的属性配置优先级:

data中的优先显示

生命周期函数中 全部执行 互不干扰 混入中的先执行

配置一个mixin.js文件 混入文件 位置和main.js平级

以对象的形式对外分别暴露

Vue笔记_第73张图片

局部引入:

在对应的组件中 通过 import{ } from ’ ’ 引入混入

添加mixins:[ ] ;里面添加对应混入对象名

Vue笔记_第74张图片

全局引入

在main.js中 通过 import{ } from ’ ’ 引入混入

Vue.mixin( ) 里面添加对应混入对象名

这样vm 和 vc(VueComponent的实例对象)都会引入混入配置

Vue笔记_第75张图片

引入插件

在main.js 中 通过 import 插件名 from ‘路径’ 引入插件

通过 Vue.use(插件名) 应用插件

既可以使用插件中的各种功能 (类似第三方库)

Vue笔记_第76张图片

scoped

让样式在局部使用 防止多个同名样式冲突

多个同名样式 会以在App.vue 文件中 后引入import的样式为准

Vue笔记_第77张图片

唯一id生成库nanoid

uuid的精简版

在控制台 输入 npm i nanoid 进行安装

使用 import{nanoid} from ‘nanoid’ 引入

直接调用函数 nanoid() 即可生成唯一id

Vue笔记_第78张图片

foreach遍历函数

Vue笔记_第79张图片

WebStorage 存储

存对象时 使用 JSON.stringfy( ) 将对象转化成字符串

获取时使用 JSON.parse( )

Vue笔记_第80张图片

查看对象身上是否有某个属性

对象.hasOwnProperty(‘属性名’) 返回true或者false

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EeDQIM5N-1652938984341)(D:\typora\image-20220413105037083.png)]

nextTick 基于新dom操作数据

在这里插入图片描述

Vue中一个回调函数中 先遍历一遍代码 然后对比dom看看修改了哪些地方 然后才去解析模板 更新dom

nextTick()函数 就是 先遍历一遍代码 然后发现nextTick函数 不执行nextTick函数 在对比完dom并更新完dom渲染完模板后 再去调用nextTick函数

修改isEdit为true后 会显示input输入框节点出现 直接写this.$refs.inputTitle.focus()的话 不会奏效

因为 vue是 执行一遍全部代码后才更新dom 渲染模板 执行完 todo.idEdit后输入框input节点还没出现 下面的获取不到节点操作不了

使用nextTick() 就是在handleEdit函数执行完 再执行nextTick函数 此时就有input输入框的节点了

Vue笔记_第81张图片

通过添加定时器也可以实现这功能 但不推荐

Vue笔记_第82张图片

axios引入

安装 npm i axios

引入 import axios from ‘axios’

response 和 error 都是对象

Vue笔记_第83张图片

代理服务器配置(跨域问题)

Vue笔记_第84张图片

使用axios时会面临服务器跨域问题 1.后端解决 2.前端解决

前端 使用代理服务器 在vue.config,js 里面配置代理服务器实现反向代理解决跨域问题

配置的代理服务器端口号默认和发出请求的服务器一样8080

原理 前端服务器8080通过axios向5000发送请求(红色服务器)首先查看8080自身public静态资源里有没有对应信息 没有 向8080代理服务器发送请求(粉色) 代理服务器 再向5000发请求 5000将信息发送给代理服务器

Vue笔记_第85张图片
Vue笔记_第86张图片

上面的简易配置缺点 只能定向 向一个服务器发请求5000 每次请求会先查看自身public下是否有对应资源
有的话就直接返回资源 不去访问5000服务器了 所以使用下面的配置

Vue笔记_第87张图片

ws:true 和 changeOrigin:true 在Vue中默认都是true React中默认是false
changeOrigin:true 时5000服务器收到的请求url显示的是localhost:5000(假冒自家服务器才能获得资源)
代理服务器 的端口号host 是和前端服务器一致的 所以发送请求时 url 访问8080
路径中 atguigu/students 代表 通过代理服务器去访问另一台 5000端口号的服务器的students资源
配置中通过 pathRewrite 将url中的atguigu 通过正则表达式去掉了
如果url为 http://localhost:8080/students 不加前缀 那么就不执行代理服务器 先访问自己服务器的
pubic文件下是否有 students资源 有直接显示 没有就不显示(实现自由控制是否访问自身的public资源)

bootstrap引入

将bootstrap.css 放到public下的css文件夹中

Vue笔记_第88张图片

在index.html中通过 link引入

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Y9uNnzP5-1652938984346)(D:\typora\image-20220415114144845.png)]

ES6 传值语法

…对象 就是原封不动的将对象展开并放入

Vue笔记_第89张图片

对象={对象1,对象2} 对象1和对象2中的属性对比 1中有2没有的不变 1,2都有1被替换成2

…this.info 的全部数据和…dataObj 的全部数据对比 同名的替换 没有的不更改(按照属性名对比)

如果直接进行赋值 this.info=dataObj 那么 dataObj 是直接替换info对象

dataObj中没传的值 info中就不再显示了 如dataObj只传 errMsg 属性 那么info中只剩errMsg一个属性了

Vue笔记_第90张图片

视频播放

在video标签加 controls 就会出现进度条播放按钮

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Lpi9Zqp3-1652938984348)(D:\typora\image-20220510111339766.png)]

组件插槽slot

在使用组件时可以个性化改变组件结构 添加新的结构

作用:让父组件可以向子组件指定位置插入html结构,也是一种组件间通信的方式,适用于 父组件 ===> 子组件

分类:默认插槽、具名插槽、作用域插槽

默认插槽:组件中添加slot标签 在使用组件时 在标签体添加的结构会默认添加到slot插槽处 组件中写多个slot 就会插入多次新结构

父组件中:
        
           
html结构1
子组件中:

具名插槽:slot标签添加 name属性 使用组件时在标签中使用slot=“name属性值” 指定添加到的插槽位置

使用template标签时可以使用 v-slot:name属性值 形式

父组件中:
        
            

            
        
        
            
html结构3
子组件中:

作用域插槽:数据在组件的自身不在使用者身上,使用组件想调用组件中的数据时使用作用域插槽,具体数据生成的结构还是组件的使用者来决定。(games数据在Category组件中,但使用数据所遍历出来的结构由App组件决定 将数据v-for遍历成 无序结构ul 还是有序结构ol h4标签结构等)

template标签上的scope属性的名scopeData随意 不做规定

组件要将组件中的数据绑定到插槽slot结构中 这样在使用时才可以通过scope来接收到数据

作用域插槽可以搭配具名插槽使用 slot标签添加 name属性

父组件中:
		
			
		

		
			
		
子组件中:
        
		
        

Vuex

多个组件之间公共的数据 方法 集合地,组件中可以直接调用Vuex中的数据state 和方法actions 和mutations 并可以通过vue开发工具具体查看操作流程

整个vuex作为一个对象 store 组件中调用时 $store.state $store.despatch $store.commit

Vue笔记_第91张图片

安装store npm i vuex 默认安装的是vuex4 对应版本vue3

npm i vuex@3 指定安装vuex3 对应版本vue2

Vue笔记_第92张图片

新建src/store/index.js 配置store环境

//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)

//准备actions对象——响应组件中用户的动作
const actions = {}
//准备mutations对象——修改state中的数据
const mutations = {}
//准备state对象——保存具体的数据
const state = {}

//创建并暴露store
export default new Vuex.Store({
   actions,
   mutations,
   state
})

main.js中引入store 创建vm时传入store配置项

   //引入store
   import store from './store'
   ......
   
   //创建vm
   new Vue({
   	el:'#app',
   	render: h => h(App),
   	store
   })

在index.js配置actions 和 mutations 的方法 (mutations 同名方法一般取actions 的方法名大写)

在组件中修改Vuex中actions 的方法 $store.dispatch('action中的方法名',数据)

如果不在actions 中做任何操作 可以直接调用 mutations 中的方法 $store.commit('mutations中的方法名',数据)

在actions 中的方法中操作完调用mutations 中的方法 context.commit('mutations中的方法名,value)

//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//引用Vuex
Vue.use(Vuex)

const actions = {
    //响应组件中加的动作
	jia(context,value){
		// console.log('actions中的jia被调用了',miniStore,value)
		context.commit('JIA',value)
	},
}

const mutations = {
    //执行加
	JIA(state,value){
		// console.log('mutations中的JIA被调用了',state,value)
		state.sum += value
	}
}

//初始化数据
const state = {
   sum:0
}

//创建并暴露store
export default new Vuex.Store({
	actions,
	mutations,
	state,
})

在actions 可以调用actions 中的另一个方法 context.dispatch(‘action中的方法名’,数据)

Vue笔记_第93张图片

getters 相当于 computed 就是对 state中数据计算后的新属性 (放在vuex中的公共的计算属性)

根computed 一样使用return返回值形式

组件中调用$store.getters.bigSum

......
const actions = {}

const mutations = {}

const state = {}

const getters = {
	bigSum(state){
		return state.sum * 10
	}
}

//创建并暴露store
export default new Vuex.Store({
	actions,
	mutations,
	state,
	getters
})

组件中的computed属性中使用mapState,mapGetters 映射State,Getters中的属性 在HTML中使用时就可以直接调用计算属性名了{{bigSum}} 不用再 {{$store.getters.bigSum}}

使用mapState,mapGetters 要先引用 import {mapState,mapGetters} from ‘vuex’

两种写法 对象写法 可以修改映射名

​ 数据写法 映射前后属性名相同

  1. mapState方法:用于帮助我们映射state中的数据为计算属性

    computed: {
        //借助mapState生成计算属性:sum、school、subject(对象写法)
         ...mapState({sum:'sum',school:'school',subject:'subject'}),
             
        //借助mapState生成计算属性:sum、school、subject(数组写法)
        ...mapState(['sum','school','subject']),
    },
    
  2. mapGetters方法:用于帮助我们映射getters中的数据为计算属性

    computed: {
        //借助mapGetters生成计算属性:bigSum(对象写法)
        ...mapGetters({bigSum:'bigSum'}),
    
        //借助mapGetters生成计算属性:bigSum(数组写法)
        ...mapGetters(['bigSum'])
    },
    

要先引用 import {mapActionsm,mapMutations} from ‘vuex’

用mapActionsm,mapMutations 就不用在methods里写方法 this.$store.dispatch(‘jiaOdd’,this.n)

但上面的触发函数要传参为n 不然默认传参event会报错

Vue笔记_第94张图片

  1. mapActions方法:用于帮助我们生成与actions对话的方法,即:包含$store.dispatch(xxx)的函数

    methods:{
        //靠mapActions生成:incrementOdd、incrementWait(对象形式)
        ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
    
        //靠mapActions生成:incrementOdd、incrementWait(数组形式)
        ...mapActions(['jiaOdd','jiaWait'])
    }
    
  2. mapMutations方法:用于帮助我们生成与mutations对话的方法,即:包含$store.commit(xxx)的函数

    methods:{
        //靠mapActions生成:increment、decrement(对象形式)
        ...mapMutations({increment:'JIA',decrement:'JIAN'}),
        
        //靠mapMutations生成:JIA、JIAN(对象形式)
        ...mapMutations(['JIA','JIAN']),
    }
    

Router路由

两种路由的方式

1.router-link标签 (相当于a标签) to 跳转路径

2.编程式路由导航 this.$route.push({name:,query:{ }})

push 有跳转历史 replace 没有跳转历史

安装vue-router,命令:npm i vue-router

新建目录router/index.js

pages下放路由组件 components 下放常规组件

在main.js中引用 import VueRouter from'Vue-router' import router from'./router'

应用插件:Vue.use(VueRouter)

Vue笔记_第95张图片
Vue笔记_第96张图片

编写 router的index.js

//引入VueRouter
import VueRouter from 'vue-router'
//引入路由组件
import About from '../pages/About'
import Home from '../pages/Home'

//创建并暴露router实例对象,去管理一组一组的路由规则
export default new VueRouter({
	routes:[
		{
			path:'/about',
			component:About
		},
		{
			path:'/home',
			component:Home
		}
	]
})

router-link 实际被解析成

router-view 为路由组件显示位置

为常规组件显示位置

Vue笔记_第97张图片

路由组件切换时,默认是被销毁掉了,被切换的时候再去挂载。

每个路由组件都有自己的$route属性,里面存储着自己的路由信息。

整个应用只有一个router,可以通过组件的$router属性获取到。

Vue笔记_第98张图片

多级路由

router 里的index.js 添加children配置项

children里的path不加 ‘/’ 使用时会自动加

routes:[
	{
		path:'/about',
		component:About,
	},
	{
		path:'/home',
		component:Home,
		children:[ //通过children配置子级路由
			{
				path:'news', //此处一定不要写:/news
				component:News
			},
			{
				path:'message',//此处一定不要写:/message
				component:Message
			}
		]
	}
]

多级路由下的子组件router-link 的 to 路径要写全

Vue笔记_第99张图片

路由命名name 多级路由时 添加name属性 跳转时不用path 可以直接使用name(一般多级路由时使用)

{
	path:'/demo',
	component:Demo,
	children:[
		{
			path:'test',
			component:Test,
			children:[
				{
                 name:'hello' //给路由命名
					path:'welcome',
					component:Hello,
				}
			]
		}
	]
}
<!--简化前,需要写完整的路径 -->
<router-link to="/demo/test/welcome">跳转</router-link>

<!--简化后,直接通过名字跳转 -->
<router-link :to="{name:'hello'}">跳转</router-link>

<!--简化写法配合传递参数 -->
<router-link 
	:to="{
		name:'hello',
		query:{
		   id:666,
            title:'你好'
		}
	}"
>跳转</router-link>

query传参 router-link 里的to要绑定属性加";" 路径后加?后key-value传参 &相连

对象写法可以用name query 或者用path query

<!-- 跳转并携带query参数,to的字符串写法 -->
<router-link :to="/home/message/detail?id=666&title=你好">跳转</router-link>
				
<!-- 跳转并携带query参数,to的对象写法 -->
<router-link 
	:to="{
		path:'/home/message/detail',
		query:{
		   id:666,
          title:'你好'
		}
	}"
>跳转</router-link>
接收(id 和 title 对应query参数名)
$route.query.id
$route.query.title

Vue笔记_第100张图片

params传参 要先修改path路径 使用占位符 表示要传递的参数名

router-link 里的to要绑定属性加";" 路径后直接加’/’ 加value传参

对象写法只能用name params 不能用path params

{
	path:'/home',
	component:Home,
	children:[
		{
			path:'news',
			component:News
		},
		{
			component:Message,
			children:[
				{
					name:'xiangqing',
					path:'detail/:id/:title', //使用占位符声明接收params参数 参数名可修改 接收时对应上即可
					component:Detail
				}
			]
		}
	]
}
<!-- 跳转并携带params参数,to的字符串写法 -->
<router-link :to="/home/message/detail/666/你好">跳转</router-link>
				
<!-- 跳转并携带params参数,to的对象写法 -->
<router-link 
	:to="{
		name:'xiangqing',
		params:{
		   id:666,
            title:'你好'
		}
	}"
>跳转</router-link>
接收 (id 和 title 对应path占位符的名字 可修改)
$route.params.id
$route.params.title

Vue笔记_第101张图片

props 在路由中添加props 属性 指定传参属性 在接收组件中使用props直接接收即可

引用时不用再$route.query.id

第一种 直接指定传递的属性和值

第二种 把所有params参数都传给子组件 query传参的不行

第三种 通过传入$route 将route中指定参数传给子组件 query和params的都可以

{
	name:'xiangqing',
	path:'detail/:id',
	component:Detail,

	//第一种写法:props值为对象,该对象中所有的key-value的组合最终都会通过props传给Detail组件
	// props:{a:900}

	//第二种写法:props值为布尔值,布尔值为true,则把路由收到的所有params参数通过props传给Detail组件
	// props:true
	
	//第三种写法:props值为函数,该函数返回的对象中每一组key-value都会通过props传给Detail组件
	props($route){
		return {
			id:$route.query.id,
			title:$route.query.title
		}
	}
}

接收时props声明传递的参数名 引用时直接调用即可

Vue笔记_第102张图片

replace属性 router-link里添加 replace 后 使用路由跳转后无法后退 没有浏览历史了

默认跳转方式为push 是有浏览历史了的 可以返回上一个路径

push 是追加历史记录,replace是替换当前记录

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OczYn72j-1652938984355)(D:\typora\image-20220516204320276.png)]

编程式路由导航

this.$route.push({name:,query:{ }})

不用route-link 标签了 使用事件触发 调用唯一的router实现路由跳转

this. r o u t e r . f o r w a r d ( ) / / 前 进 t h i s . router.forward() //前进 this. router.forward()//this.router.back() //后退
this.$router.go(-2) //可前进或后退 几步

Vue笔记_第103张图片

缓存路由组件keep-alive 让不展示的路由组件保持挂载,不被销毁。

从别的组件跳转回来时 组件内数据不会清空而保留不变

添加 include属性指定保留哪个从当前组件实现跳转的子组件的数据

include指定的是组件名! 不是name 是组件文件的大名 News.Vue

Vue笔记_第104张图片

路由守卫

对路由加 鉴权 路由跳转的时候鉴权是否进行跳转

分为全局守卫(前置守卫 后置守卫 ) 独享守卫 组件内守卫

多种守卫可以搭配使用

全局守卫 前置守卫 beforeEach 发生路由跳转前调用

​ 后置守卫 afterEach 发生路由跳转后调用 这两个发生跳转都会被调用

独享守卫 beforeEnter 调用某个路由就会触发

组件内守卫 beforeRouteEnter 通过路由规则进入 组件时触发 调用组件触发这个 不离开组件不触发after

  		 afterRouteEnter ``通过路由规则离开``组件时触发  离开当前组件才会被触发

组件内守卫在组件内添加 全局守卫,独享守卫在路由配置文件中添加

当直接通过挂载的方式显示组件时不触发 组件内守卫

路由的index配置文件 路由要先声明后暴露

router.beforeEach((to,from,next)=>{ })

to 将要跳转的路由的信息

from 从哪个路由跳转的路由信息

next() 跳转命令 (不加的话 就不会正常跳转到下一个路由)

Vue笔记_第105张图片

每个路由可以在meta属性里 添加自己的信息

Vue笔记_第106张图片

//全局前置守卫:初始化时执行、每次路由切换前执行
router.beforeEach((to,from,next)=>{
	console.log('beforeEach',to,from)
	if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
		if(localStorage.getItem('school') === 'atguigu'){ //权限控制的具体规则
			next() //放行
		}else{
			alert('暂无权限查看')
			// next({name:'guanyu'})
		}
	}else{
		next() //放行
	}
})

//全局后置守卫:初始化时执行、每次路由切换后执行
router.afterEach((to,from)=>{
	console.log('afterEach',to,from)
	if(to.meta.title){ 
		document.title = to.meta.title //修改网页的title
	}else{
		document.title = 'vue_test'
	}
})

独享路由守卫 在某一个路由下添加 beforEnter 实现针对某一个路由的鉴权

Vue笔记_第107张图片

组件内守卫 编辑组件独有的路由规则时使用 只有通过路由规则进入或离开时才触发

Vue笔记_第108张图片

ElementUI

安装 npm i element-ui

完整引用 全部引用 文件会比较大

Vue笔记_第109张图片

按需引用 安装 npm install babel-plugin-compoent -D

修改 babel.config.js 记得修改红框(ElementUI 里给的配置会报错)

Vue笔记_第110张图片

按需引用 只引用使用的组件 名字为组件名大写 不用引入index.css 使用时会自动解析

Vue.component(‘Button.name’,Button) Button.name这个组件名可以修改 和相对应

Vue笔记_第111张图片

修改过脚手架要重启 npm run serve

你可能感兴趣的:(vue.js,前端,javascript)