Vue
文章平均质量分 55
Vue相关的学习记录
畢林茂
这个作者很懒,什么都没留下…
展开
-
vue keep-alive 中的生命周期
keep-alive是 Vue 提供的一个内置组件,用来对组件进行缓存——在组件切换过程中将状态保留在内存中,防止重复渲染DOM。如果为一个组件包裹了 keep-alive,那么它会多出两个生命周期:deactivated、activated。同时,beforeDestroy 和 destroyed 就不会再被触发了,因为组件不会被真正销毁。当组件被换掉时,会被缓存到内存中、触发 deactivated 生命周期;当组件被切回来时,再去缓存里找这个组件、触发 activated钩子函数。.原创 2022-09-11 15:12:45 · 8634 阅读 · 0 评论 -
Vue几种监听路由变化的方式
Vue几种监听路由变化的方式2.通过钩子函数 beforeRouteEnter, beforeRouteUpdate, beforeRouteLeave原创 2022-06-12 23:46:20 · 22051 阅读 · 0 评论 -
vue 监听页面卷去的高度,获取元素离页面顶部的距离
获取元素离页面顶部的距离补充 document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.documentElement.clientWidth ==> 可见区域宽度 document.documentElement.clientHeight ==> 可见区域高度 网页可见区域宽: document.body.clientWidth 网页可见区域高: docu原创 2022-06-10 16:24:54 · 6982 阅读 · 0 评论 -
Vue3快速上手,Vue3全解
vue3快速上手,vue3全解;原创 2022-05-01 16:25:57 · 4885 阅读 · 2 评论 -
Vue中 $nextTick 原理及作用
Vue 的 nextTick 其本质是对 JavaScript 执行原理 EventLoop 的一种应用。我们可以理解成,Vue在更新DOM时是异步执行的。当数据发生变化,Vue将开启一个异步更新队列,视图需要等队列中所有数据变化完成之后,再统一进行更新nextTick 的核心是利用了如 Promise 、MutationObserver、setImmediate、setTimeout的原生 JavaScript 方法来模拟对应的微/宏任务的实现,本质是为了利用 JavaScript 的这些异...原创 2022-04-13 03:59:10 · 22008 阅读 · 2 评论 -
vue登录态管理=+路由守卫+封装 Axios+Vuex
1.理由配置路由的配置path时;在需要守卫的path加上meta属性;{ path: '/home', component: home, meta:{requireAuth:true}}在路由配置文件中加上//路由配置文件import Vue from 'vue';import VueRouter from 'vue-router';import routes from './routes';//使用VueRouter插件Vue.use(Vue...原创 2022-04-08 07:42:14 · 3512 阅读 · 0 评论 -
vue路由懒加载--2种实现方式
(1)vue异步组件-路由懒加载 component:resolve=>(['需要加载的路由的地址',resolve])(2)import 实现路由懒加载 [推荐]const HelloWorld = ()=>import('需要加载的模块地址')1.路由懒加载作用:首屏组件加载速度更快一些,解决白屏问题;更好的客户体验;也是性能优化的一种方式;什么是路由懒加载?懒加载简单来说就是延迟加载或按需加载,就是用到的时候再进行加载。2.使用-详情- ...原创 2022-04-07 04:22:31 · 2804 阅读 · 1 评论 -
vue 全局事件总线详解 $bus-任意组件间通信
全局事件总线(GlobalEventBus)是一种组件间通信方式,适用于任意组件间通信1.安装全局事件总线main.js入口文件配置 new Vue({ beforeCreate() { Vue.prototype.$bus = this //安装全局事件总线, //在开发中习惯取名为:$bus,可以自由命名 }, }).$mount('#app') 2.使用事件总线以B组件给A组件传值为例;(B —> .原创 2022-04-05 23:52:33 · 1221 阅读 · 0 评论 -
vue监听屏幕尺寸变化,window.onresize很简单
>> 可在任意组件中使用;1.在data中定义一个变量,用于记录屏幕尺寸;data(){ return{ screenWidth: null, }}且做好定义为 null2.使用window.onresize方法获取屏幕尺寸; mounted() { this.screenWidth = document.body.clientWidth window.onresize = () => { ...原创 2022-04-05 19:02:26 · 15458 阅读 · 3 评论 -
Vue 项目cli打包上线后,路径错误,解决办法
报的错:Uncaught SyntaxError: Unexpected token '<' (at chunk-vendors.5ea7a1b2.js:1:1)Uncaught SyntaxError: Unexpected token '<' (at app.5e29bd6c.js:1:1)Vue 项目,用vue-cli打包上线后,播以上错误,打开打包后的index.html文件看。发现是路径问题,所有的文件都没有引入的index.html中解决办法:在vue.原创 2022-04-05 08:02:51 · 3067 阅读 · 1 评论 -
vue路由跳转 定位到页面顶部
Vue-router 路由跳转之后,页面默认停留在当前浏览的位置,想要的是路由跳转之后,页面重新定位到顶部,1.下面介绍一下可以实现的方法:在理由配置文件中,添加以下代码即可import Vue from 'vue'import VueRouter from 'vue-router'import routes from './routes'Vue.use(VueRouter);let router = new VueRouter({ routes});//要添加的代原创 2022-04-05 07:51:11 · 3719 阅读 · 6 评论 -
vue v-for 遍历不能正常显示的问题,
data() { return { imgList:[ { imgUrl:'../assets/img/a.png', imgLink:'', type:'' }, { imgUrl:'../assets/img/b.png', imgLink:'', type:'' }, { ...原创 2022-04-04 01:51:54 · 2641 阅读 · 0 评论 -
Vue路由传参 详解(params | query 的区别)
params 传参类似于网络请求中的 post 请求,params 传过去的参数不会显示在地址栏中(但是不能刷新)。params 只能配合 name 使用,如果提供了 path,params 会失效。query 传参类似于网络请求中的 get 请求,query 传过去的参数会拼接在地址栏中(?name=xx)。query 较为灵活既可以配合 path 使用,也能配合 name 使用(亲测可用)。//路由规则配置 const routes = [...原创 2022-03-31 02:18:02 · 1362 阅读 · 0 评论 -
【路由】Vue route 入门 到 全解
Vue 的单页面应用是基于路由+组件的形式,路由用于设定访问路径,并将路径与组件映射起来。这种形式相对于 a标签超链来说不会重新加载页面,而是在同一个页面中进行路由跳转。1.安装//npmnpm install vue-router@4先简单感受一下:<script src="https://unpkg.com/vue@3"></script><script src="https://unpkg.com/vue-router@4"&g...原创 2022-03-27 02:10:12 · 401 阅读 · 1 评论 -
vue中使用防抖节流
1.什么是防抖节流函数防抖(debounce) 是指在一定时间内,在动作被连续频繁触发的情况下,动作只会被执行一次,也就是说当调用动作过n毫秒后,才会执行该动作,若在这n毫秒内又调用此动作则将重新计算执行时间,所以短时间内的连续动作永远只会触发一次。函数节流 是指一定时间内执行的操作只执行一次,也就是说即预先设定一个执行周期,当调用动作的时刻大于等于执行周期则执行该动作,然后进入下一个新周期,一个比较形象的例子是如果将水龙头拧紧直到水是以水滴的形式流出,那你会发现每隔一段时间,就会有一滴水流出。原创 2022-03-22 21:15:16 · 10114 阅读 · 2 评论 -
什么场景适合使用Vuex,保姆级使用流程
1.什么是Vuex?Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。2.什么情况下应该使用 Vuex?如果不是大型单页应用,使用 Vuex 可能是繁琐冗余的。如果您的应用够简单,最好不要使用 Vuex。一个简单的store 模式就足够您所需了。但是,如果需要构建一个中大型单页应用,就需要考虑如何更好地在组件外部管理状态,Vuex 将会成为自然而然的选择。站在系统架构的...原创 2022-03-25 03:42:55 · 3147 阅读 · 0 评论 -
vue中使用swiper插件,轮播图插件
[官方] 中文文档1.安装 npm i swiper2.使用<template> <swiper :slides-per-view="3" :space-between="50" @swiper="onSwiper" @slideChange="onSlideChange" > <swiper-slide>Slide 1</swiper-slide> <swiper-slide&原创 2022-03-21 02:17:26 · 2329 阅读 · 0 评论 -
Vent在vue项目中安装失败,无法解析依赖树
Vent在vue项目中安装失败,无法解析依赖树,安装报错原创 2022-03-05 05:37:46 · 4304 阅读 · 0 评论 -
图片懒加载, Vue-Lazyload实现懒加载
1.图片懒加载1.1.什么是图片懒加载图片懒加载 图片的懒加载就是在页面打开的时候,不要一次性全部显示页面所有的图片,而是只显示当前视口内的图片,一般在移动端使用(PC端主要是前端分页或者后端分页)。优点:页面加载速度快、可以减轻服务器的压力、节约了流量,用户体验好;1.2.为什么要使用懒加载?很多页面,内容很丰富且很长,图片较多。比如说各种商城页面。这些页面图片数量多,而且比较大,少说百来K,多则上兆。要是页面载入就一次性加载完毕,可能会等待较长的时间,没有丝滑的使用体验。1.3.原创 2022-03-21 11:25:14 · 2715 阅读 · 1 评论 -
【Vue插槽】 slot用法,使用场景
匿名插槽,具名插槽,作用域插槽插槽,slot用法,使用场景原创 2022-03-26 00:03:24 · 4839 阅读 · 0 评论 -
Vue组件间相互传值,组件通信,
1.父组件 传值给 子组件1.1.props父组件通过属性的方式向子组件传值,子组件通过 props 来接收。// 父组件<user-detail :name="name" /> <!--通过属性 :myName="name" 传值--> export default { components: { UserDetail } ......}在子组件中使用props(可以是数组...原创 2022-03-26 04:21:20 · 1048 阅读 · 0 评论 -
【Vue生命周期】图文解读
vue生命周期,vue生命周期面试题原创 2022-03-25 01:36:49 · 257 阅读 · 1 评论 -
解决VueRouter编程路由(push||replace)重复点击报错问题
这个报错本来不影响功能,可以不理睬。但看到报错心痒痒;解决方法如下:简单粗暴 方法一:传递成功回调和失败回调this.$router.push({ name:'search', params:{keyword:this.keyword||undefined}, query:{k:this.keyword.toUpperCase()} },()=>{},()=>{}) //成功回调和失败回调,解决多次点击报错问题一劳永逸 方法二:...原创 2022-01-01 23:59:21 · 1327 阅读 · 1 评论 -
vue 和 react 列表渲染_key_作用和原理
1. 虚拟DOM中key的作用:key是虚拟DOM对象的标识。当状态的数据发生变化时,vue会根据【新数据】生成【新的虚拟DOM】,随后vue进行【新虚拟DOM】和【旧虚拟DOM】的差异比较;规则如下:2. 对比规则: 2.1. 旧虚拟DOM中找到了与新虚拟DOM相同的key:(1)若虚拟DOM中内容没变,直接使用之前的真实DOM!(2)虚拟DOM中内容变了,则生成新的真实DOM,随后替换...原创 2021-12-19 21:22:44 · 380 阅读 · 0 评论 -
axios二次封装
//axios 进行二次封装import axios from 'axios'//1.利用axios对象的方法create,去创建一个axios实例//2.这里request就是axios,只不过稍微配置一下 const request = axios.create({ //配置对象 //基础路径,发请求的时候,路径中会出现api baseURL:'/api', //请求超时的时间为5s timeout:5000, }) //请求拦截器:在发.原创 2022-02-27 02:59:40 · 146 阅读 · 0 评论 -
【分页器组件封装】Vue.js
分页器组件 Pagination<template> <div class="pagination"> <button :disabled="pageNo==1" @click="$emit('getPageNo',pageNo-1)">上一页</button> <button v-if="startNumAndEndNum.start > 1" @click="$emit('getPageNo',1)" :class..原创 2022-01-21 12:31:47 · 495 阅读 · 0 评论