Vue知识总结-下

VUE-组件间通信

组件的自定义事件
  • 概述：是一种组件间通信的方式,适用于：子组件===>父组件
  • 使用场景：A是父组件,B是子组件,B给A传递数据,那么需要在A组件中绑定自定义事件(事件的回调也在A中)
  • 使用步骤
    • 绑定自定义事件：
      • 第一种方式：在父组件中子组件<DemoComponent @testDemo="test/> 或者 <DemoComponent v-on:testDemo="test/>
      • 第二种方式：在父组件中子组件<DemoComponent ref="test/>，然后在mounted(){this.$refs.demo.$on("testDemo",this.回调函数)}
      • 注意：若想让自定义事件只触发一次,可以试用once修饰符或$once方法
    • 触发自定义事件：在子组件中调用this.$emit('testDemo',数据)
    • 解绑自定义事件：在父组件调用this.$off('testDemo')
  • 注意
    • 在组件上也可以绑定原生DOM事件,需要使用native修饰符
    • 通过this.$refs.xxx.$on("testDemo",回调函数)绑定自定义事件时,回调函数要么配置在methods中,要么用箭头函数,否则this指向会出现问题！
全局事件总线(较为常用)

  • 概述：也是一种组件间通信的方式,适用于任意组件间的通信
  • 使用步骤
    • 安装全局事件总线
      • 一般是在创建Vue中的beforeCreate(){Vue.prototype.$bus = this //即在vm上增加bus总线}
    • 使用全局事件总线
      • 接收数据：比如A组件想要接收数据,则在A组件中给$bus绑定自定义事件,且事件的回调也在A组件，如：mounted(){this.$bus.$on('xxx事件名',this.回调函数)}
      • 提供数据：this.$bus.$emit('xxx事件名',数据)
    • 注意：在beforeDestroy钩子中,使用$off去解绑当前组件所用到的事件
消息订阅与发布
  • 概述：也是一种组件间通信的方式,适用于任意组件间的通信
  • 使用步骤
    • 安装pubsub库：npm i pubsub-js
    • 引入pubsub库：import pubsub from 'pubsub-js'
    • 接收数据：比如A组件想要接收数据,则在A组件中订阅消息,订阅的回调也在A组件中
      •  如：mounted(){ this.pid = pubsub.subscribe('xxx事件名',this.回调函数)} //订阅消息
    • 提供数据：在对应提供数据的组件中发布消息
      • 如：pubsub.publish('xxx事件名',数据)
  • 注意：在beforeDestroy钩子中,调用pubsub.unsubscribe(pid)取消订阅
VUE-vuex

  • vuex专门在Vue中实现集中式状态(数据)管理的一个Vue插件,对Vue应用中多个组件的共享状态进行集中式管理(即读/写),是一种组件间通信方式且适用于任意组件间通信
  • 使用场景:多个组件需要共享数据时使用
    • 多个组件依赖于同一状态(数据)
    • 来自不同组件的行为需要变更同一状态/数据
使用步骤
  • 通常首先在store文件夹下创建js文件
    • js文件初始化数据: 包括配置action、mutations、state、getters等方法
  • 在main.js创建new Vue时配置store配置项
  • 组件中读取共享数据：$store.state.xxx
  • 组件中修改vuex数据：$store.dispatch('action中的方法名',data)或者$store.commit('mutations中的方法名',data)
  • 注意：
    • getters配置项：当state中的数据需要经过加工后再使用时,可以使用getters加工,组件读取getters: $store.getters.data
    • 当不涉及网络请求或其他业务逻辑,组件可以越过actions,既不用通过dispatch->commit,而是直接编写commit
四个map方法
mappState方法：用于方便我们映射state中的数据为计算属性
computed:{...mapState(test:'test',demo:'demo')//对象写法...mapState(['test','demo'])//数组写法
}
mapGetters方法：用于方便我们映射getters中的数据为计算属性
computed:{...mapGetters(test:'test',demo:'demo')//对象写法...mapGetters(['test','demo'])//数组写法
}
mapActions方法：用于方便我们生成actions对话的方法,即$store.dispatch(xxx)函数
methods:{...mapActions(test:'test',demo:'demo')//对象写法...mapActions(['test','demo'])//数组写法
}
mapMutations方法：用于方便我们生成mapMutations对话的方法,即$store.commit(xxx)函数
methods:{...mapMutations(test:'test',demo:'demo')//对象写法...mapMutations(['test','demo'])//数组写法
}
模块化+命名空间
  • 让代码更加容易维护,多种数据分类更加明确
  • js文件模块化+命名空间示例
const test1 = {namespaced:true,//开启命名空间state:{test:2},actions:{...},mutations:{...},getters:{test(state){...}}
}
const test2 = {namespaced:true,//开启命名空间state:{x:1},actions:{...},mutations:{...},getters:{test(state){...}}
}
const store = new Vuex.Store({modules:{test1,test2}
})...mapState('test1',['test']),//读取state数据
...mapGetters('test1',['test']),//读取Getters数据
...mapMutations('test1',{...}),//读取Mutations数据
...mapActions('test1',{...})//读取Actions数据

扩展
  • nextTick(也是一种常用的声明周期钩子):在下一次DOM更新结束后执行其指定的回调(即当改变数据后,基于更新后的新Dom进行某些操作时,要在nextTick所指定的回调函数中执行)
    • 如：this.$nextTick(回调函数)

VUE-脚手架配置代理

在vue.config.js中配置代理

  • 单一服务器代理
devServer: {proxy: 'http://localhost:5000',webSocketServer: false
}
  • 多种服务器代理
devServer: {proxy: {'/api1':{ //匹配所有以'/api1'开头的请求路径target: 'http://localhost:5000', //代理目标服务器的基础路径changeOrigin:true, //默认为true,true:服务器收到的请求头中host为 localhost:5000;false:服务器收到的请求头中host为 localhost:8080pathRewrite:{'^/api1':''} //替换匹配为空,避免后端服务无法识别请求真实路径},'/api2':{target: 'http://localhost:5001',changeOrigin:true,pathRewrite:{'^/api2':''}}}
}
  • 两者区别
    • 单一服务代理
      • 配置简单,但不能配置多个代理导致不能灵活控制请求是否走代理;当请求的前端资源不存在时,那么该请求才会转发给服务器(即优先匹配前端资源)
    • 多服务器代理
      • 可配置多个代理,灵活控制请求是否走代理;但配置略微繁琐且资源必须加前缀
  • 注意
    • 代理服务器:常用的解决跨域问题方案(即浏览器请求服务器出现不同源的问题(即协议+主机名+端口中不完全一致));原理在于服务器之间传输数据不存在跨域问题
      • 备注：还可以通过CORS(效果是一劳永逸-后端处理)和Jsonp处理跨域问题

VUE-基于transition的过渡与动画

  • 在插入、更新或者移除DOM元素时,在合适的时候给元素添加样式类名
  • 官网:https://cn.vuejs.org/guide/built-ins/transition.html
  • 使用步骤
    • 准备好样式
      • 元素进入的样式
        • v-enter：进入的起点
        • v-enter-active：进入过程中
        • v-enter-to：进入的终点
      • 元素离开的样式
        • v-leave：离开的起点
        • v-leave-active：进入过程中
        • v-leave-to：进入的终点
      • 使用<transition>包裹要过渡的元素
      • 注意：若有多个元素需要过渡,则需要使用<transition-group>,且每个元素都要指定key值

VUE-插槽Slot

  • 作用: 让父组件可以向子组件指定位置插入html结构,也是一种组件间通信的方式,适用于父组件===>子组件
  • 官网:https://cn.vuejs.org/guide/components/slots.html

  • Slot分类

    • 默认Slot

父组件
<Category><div>html结构1</div>
</Category>
子组件
<template><div><slot>插槽默认内容</slot></div>
</template>
  • 具名Slot
  • 父组件
<Category><template slot="demo1"><div>html结构1</div></template><template v-slot:demo2><div>html结构2</div></template>
</Category>
子组件
<template><div><slot name='demo1'>插槽默认内容1</slot><slot name='demo2'>插槽默认内容2</slot></div>
</template>
  • 作用域Slot
    • 数据在组件的自身,但根据数据生成的结构需要组件的使用者来决定

VUE-vue-router

  • vue-router是一个vue的插件库,专门用来实现SPA应用
    • SPA应用
    • 单页web应用
    • 整个应用只有一个完整的页面
    • 点击页面中的导航链接不会刷新页面,只会做页面的局部更新
    • 数据需要通过ajax请求获取
  • 路由
    • 一个路由就是一组映射key:value关系,其中key为路径,value可能是function或者组件
    • 路由可以分为前端路由和后端路由
      • 前端路由
        • value是组件component,用于展示页面内容
        • 当浏览器的路径改变时,对应的组件就会显示
      • 后端路由
        • value是function,用于处理客户端提交的请求
        • 当服务器收到请求后,根据请求路径找到匹配的函数来处理请求,返回响应数据
基本使用
  • 安装vue-router命令：npm i vue-router
  • 使用插件：Vue.use(VueRouter)
  • 编写router配置项
  • //创建router实例对象,统一管理每组的路由规则
  • const router = ({routers:[{path: '/test1',component:Test1,//多级路由:使用children配置子级路由children:[{name:'hello',//给路由命名,简化路由的跳转写法path:'test1Child1', //此处不要写成'/test1Child1',默认会加'/'component:Test1-1,//接收参数query:{id:id,name:name}},{path: 'test1Child2',component:Test1-2				}]},{path: '/test2',component:Test2},]
})
export default router

  • 实现切换

    • <router-link to='/test1'>Test1</router-link>
    • 多级路由跳转:<router-link to='/test1/test1Child1'>Test1</router-link>
    • 多级路由传递参数跳转:<router-link to='{path:'/test1/test1Child1(路由命名后可简化写为hello)',query:{id:001,name:'墨行'}}'>Test1</router-link>(接收参数:$route.query.id/name)
  • 指定展示位置：<router-view></router-view>
  • 注意
    • 路由组件通常存放在pages文件夹下,一般组件位于components文件夹下
    • 切换过程中,'隐藏'的路由组件默认是被销毁的,需要时重新挂载
    • 每个组件都有自己的$route属性,里面存储自己路由信息
    • 整个应用只有一个router,可以通过$router属性获取
路由props参数
  • 可以让路由组件更加方便收到参数
  • ...
props(route){return {id:route.query.id,name:route.query.name}
}
...
    <router-link>的replace&push属性
    • 分别是控制路由跳转时操作浏览器历史记录的模式,push是追加历史的记录,replace是替换当前记录,路由跳转时候默认push模式
    • 开启replace模式：<router link replace ...>Hello<router-link>
编程式路由导航
  • 不借助<router-link>实现路由跳转的另外一种方式,让路由跳转更加灵活
  • 编程式路由导航相关API
this.$router.push({//push模式name:'test1',params:{id:xxx,name:xxx}
})this.$router.replace({//replace模式name:'test1',params:{id:xxx,name:xxx}
})
this.$router.forward()//前进
this.$router.back()//后退
this.$router.go()//前进
缓存路由组件
  • 让不展示的路由组件保持挂载,不被销毁
  • <keep alive include='test1'><router-view></router-view>
</keep-alive>
生命周期钩子activated|deactivated
  • 路由组件独有的两个钩子,用于捕获路由组件的激活状态
    • activated：路由组件被激活时触发
    • deactivated：路由组件失活时触发
路由守卫
  • 作用就是对路由进行权限控制
  • 分为全局守卫,独享守卫,组件内守卫
  • router.beforeEach((to,from,next)=>{...})//全局前置守卫,初始化时执行,每次路由切换前执行
router.afterEach((to,from,next)=>{...})//全局后置守卫,初始化时执行,每次路由切换后执行
beforeEnter(to,from,next){...})//独享守卫
beforeRouteEnter(to,from,next){...})//进入组件守卫,通过路由规则,进入该组件时被调用
beforeRouteLeave(to,from,next){...})//离开组件守卫,通过路由规则,离开该组件时被调用
路由器的两种模式
  • hash模式
    • url中的hash值：#及其后面的内容
    • hash值不会包含在HTTP请求中,即hash值不会附带发送到服务器
    • url地址中永远带着#,不美观
    • 若将url地址通过第三方app分享,若app校验严格则会被标记为不合法
    • 兼容性较好
  • history模式
    • 地址干净美观
    • 兼容性和hash模式相比略差
    • 应用部署上线时需后端人员解决刷新页面服务器404问题(服务器端可通过第三方库解决)

VUE-UI组件库

  • 移动端常用UI组件库
  • PC端常用UI组件库
    • Element UI:应该是大家使用最为频繁的一款
    • IView UI:也称为View Design,一套基于 Vue.js 的开源 UI 组件库，主要服务于 PC 界面的中后台产品,目前也是我司使用的UI组件库[官网:介绍 - iView (iviewui.com)]

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/625832.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Python展示 RGB立方体的二维切面视图

Python展示 RGB立方体的二维切面视图

代码实现 import numpy as np import matplotlib.pyplot as plt# 生成 24-bit 全彩 RGB 立方体 def generate_rgb_cube():# 初始化一个 256x256x256 的三维数组rgb_cube np.zeros((256, 256, 256, 3), dtypenp.uint8)# 填充立方体for r in range(256):for g in range(256):fo…
阅读更多...
压缩编码之不同缩放参数对重建图像质量的影响的python实现——JPEG变换编码不同压缩率的模拟

压缩编码之不同缩放参数对重建图像质量的影响的python实现——JPEG变换编码不同压缩率的模拟

原理 JPEG&#xff08;Joint Photographic Experts Group&#xff09;是一种常用的图像压缩标准&#xff0c;它通过采用离散余弦变换&#xff08;DCT&#xff09;和量化来实现图像的压缩。 离散余弦变换&#xff08;DCT&#xff09;&#xff1a; JPEG首先将图像分割成8x8的块…
阅读更多...
LeetCode 160: 两个链表的相交节点 - 优雅解法

LeetCode 160: 两个链表的相交节点 - 优雅解法

LeetCode 160: Intersection of Two Linked Lists 题目描述 给定两个单链表 headA 和 headB 的头节点&#xff0c;返回它们相交的节点。如果两个链表没有相交&#xff0c;返回 null。 示例: 输入&#xff1a;intersectVal 8, listA [4,1,8,4,5], listB [5,6,1,8,4,5], sk…
阅读更多...
【安全策略】前端 JS 安全对抗浏览器调试方法

【安全策略】前端 JS 安全对抗浏览器调试方法

一、概念解析 1.1 什么是接口加密 如今这个时代&#xff0c;数据已经变得越来越重要&#xff0c;网页和APP是主流的数据载体。而如果获取数据的接口没有设置任何的保护措施&#xff0c;那么数据的安全性将面临极大的威胁。不仅可能造成数据的轻易窃取和篡改&#xff0c;还可能…
阅读更多...
高通平台开发系列讲解（USB篇）DWC3控制USB速率

高通平台开发系列讲解（USB篇）DWC3控制USB速率

文章目录 一、设备树二、相关结构体三、最大速率设置四、当前速率设置沉淀、分享、成长，让自己和他人都能有所收获！😄 📢本文主要介绍高通平台USB DWC3控制USB速率。 一、设备树 目录：msm-4.14/arch/arm64/boot/dts/qcom/sdxprairie-usb.dtsi dwc3@a600000 {compatibl…
阅读更多...
通过myBatis将sql语句返回的值自动包装成一个java对象（2）

通过myBatis将sql语句返回的值自动包装成一个java对象（2）

1.之前我们是如何执行一个sql语句自动包装成一个java对象呢&#xff1f; 1.创建一个mapper.xml&#xff0c;定义 执行的语句名字 和 包装成什么类 2.在总的配置文件里申明这个mapper 3.在java里通过sqlSession执行mapper里定义好的内容 我们还可以使用另一种方法实现第三步。现…
阅读更多...
java如何修改windows计算机本地日期和时间？

java如何修改windows计算机本地日期和时间？

本文教程&#xff0c;主要介绍&#xff0c;在java中如何修改windows计算机本地日期和时间。 目录 一、程序代码 二、运行结果 一、程序代码 package com;import java.io.IOException;/**** Roc-xb*/ public class ChangeSystemDate {public static void main(String[] args)…
阅读更多...
快速更改flutter已有项目的项目名称和id等

快速更改flutter已有项目的项目名称和id等

如果你使用了别人已有的仓库模板或者想更改现有项目的名称&#xff0c;是一件非常繁琐的工作&#xff0c;需要修改全平台的文件还是相当麻烦的&#xff0c;所以这里推荐一个小工具&#xff0c;可以帮助大家快速实现更改项目名称的目的&#xff0c;这个工具地址&#xff1a;rena…
阅读更多...
任务14：使用MapReduce提取全国每年最低/最高气温

任务14：使用MapReduce提取全国每年最低/最高气温

任务描述 知识点&#xff1a; 使用MapReduce提取数据 重 点&#xff1a; 开发MapReduce程序统计每年每个月的最低气温统计每年每个月的最高气温 内 容&#xff1a; 使用IDEA创建一个MapReduce项目开发MapReduce程序使用MapReduce统计每年每个月的最低气温使用MapReduce…
阅读更多...
正则表达式和爬虫

正则表达式和爬虫

目录 一、正则表达式&#xff1a; 作用&#xff1a; 字符类&#xff08;只匹配一个字符&#xff09; 细节 预定义字符字符&#xff08;只匹配一个字符&#xff09; 细节 数量词 二、爬虫 Pattern Matcher 要点说明 一、正则表达式&#xff1a; 作用&#xff1a; 1、校验字符…
阅读更多...
pytorch集智-5手写数字识别器-卷积神经网络

pytorch集智-5手写数字识别器-卷积神经网络

1 简介 简称&#xff1a;CNN&#xff0c;convolutional neural network 应用场景&#xff1a;图像识别与分类&#xff08;CNN&#xff09;&#xff0c;看图说话&#xff08;CNNRNN&#xff09;等 优越性&#xff1a;和多层感知机相比&#xff0c;cnn可以识别独特的模式&…
阅读更多...
Kubernetes (K8S) 3 小时快速上手 + 实践

Kubernetes (K8S) 3 小时快速上手 + 实践

1. Kubernetes 简介 k8s即Kubernetes。其为google开发来被用于容器管理的开源应用程序&#xff0c;可帮助创建和管理应用程序的容器化。用一个的例子来描述&#xff1a;"当虚拟化容器Docker有太多要管理的时候&#xff0c;手动管理就会很麻烦&#xff0c;于是我们便可以通…
阅读更多...
二叉树：从基础结构到高级遍历技术

二叉树：从基础结构到高级遍历技术

. 个人主页&#xff1a;晓风飞 专栏&#xff1a;数据结构|Linux|C语言 路漫漫其修远兮&#xff0c;吾将上下而求索 文章目录 引言结构定义接口需求构建二叉树销毁二叉树计算节点和叶子的数量二叉树节点个数二叉树叶子节点个数二叉树第k层节点个数 二叉树查找值为x的节点二叉树的…
阅读更多...
立白科技集团：研发安全推动数字化蜕变，日化业务再上新高度

立白科技集团：研发安全推动数字化蜕变，日化业务再上新高度

立白科技集团成立于1994年&#xff0c;是我国日化行业的领军企业&#xff0c;致力于成为一家“品牌引领、数字经营、富有创新、富有活力”的智慧服务型企业。从2018年开始&#xff0c;立白科技集团加速数字化转型&#xff0c;打造数据和业务中台&#xff0c;并建立toB和toC平台…
阅读更多...
修改和调试 onnx 模型

修改和调试 onnx 模型

1. onnx 底层实现原理 1.1 onnx 的存储格式 ONNX 在底层是用 Protobuf 定义的。Protobuf&#xff0c;全称 Protocol Buffer&#xff0c;是 Google 提出的一套表示和序列化数据的机制。使用 Protobuf 时&#xff0c;用户需要先写一份数据定义文件&#xff0c;再根据这份定义文…
阅读更多...
【C语言】指针知识点笔记（2）

【C语言】指针知识点笔记（2）

目录 一、野指针 二、assert断言 三、指针的使用和传址调用 四、数组名的理解 五、使用指针访问数组 一、野指针 二、assert断言 三、指针的使用和传址调用 四、数组名的理解 五、使用指针访问数组
阅读更多...
Vue响应式系统（二）

Vue响应式系统（二）

Vue响应式系统(一) 六、嵌套的effect与effect栈。 什么场景会用到effect嵌套呢&#xff1f;听我娓娓道来。 就用Vue.js来说吧&#xff0c;Vue.js的渲染函数就是在effect中执行的&#xff1a; /*Foo组件*/ const Foo {render() {return /*.....*/} }// effect中执行Foo组件中…
阅读更多...
kubectl与 jq的另外一些用法

kubectl与 jq的另外一些用法

背景&#xff1a; 在日常运维工作中&#xff0c;我们需要管理和操作大量的配置文件&#xff0c;这在使用 Kubernetes 集群管理应用时尤为常见。Kubernetes 提供了一个名为 ConfigMap 的资源对象&#xff0c;它用于存储应用的配置信息。有时&#xff0c;我们需要查找哪些 Confi…
阅读更多...
基于SSM的驾校信息管理系统设计与实现

基于SSM的驾校信息管理系统设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;Vue、HTML 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#xff1a;是…
阅读更多...
人机协同中存在一个独特的时空体系

人机协同中存在一个独特的时空体系

一、在人机协同中存在一个独特的时空体系 在人机这个独特的时空体系中&#xff0c;人和机器之间的时间和空间的交织和共同作用。 在时间维度上&#xff0c;人机协同体系中的人和机器具有不同的时间节奏和速度。人类有限的生命周期和有时候需要休息的需求使得他们的工作时间和生…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023