前端
CodePerWorld
这个作者很懒,什么都没留下…
展开
-
Vue项目中图片还未加载完获取相关数据等执行函数应该执行的地方
今天在用vue做项目的时候发现到了一些问题,在获取一些需要加载图片的组件时,比如获取这些组件的offsetTop属性,就动不动就会报出undefined错误,原因就是图片没有彻底加载完问题:在哪里才能获取到正确的offsetTop呢?created肯定不行,压根不能获取元素mounted也不行,组件虽然渲染挂载完成,但是图片数据还没有获取到updated中获取到的数据的回调中也不行,DOM还没有渲染完,只是数据刷新了又不是DOM加载完了,记住这里的dom是浏览器上的dom不是vue上的组件,mou原创 2021-02-25 16:51:30 · 697 阅读 · 0 评论 -
js中防抖函数debounce及父子周期执行顺序的应用
js中防抖函数debounce()在开发网站时,我们有时候需要一直监听某些事件,事件触发就访问后台,请求数据,但是我们知道,如果手机端的网页是当我们每次请求的都是大量数据时,需要刷新一下页面长度,才能有效的使用better-scroll,但是过于频繁的刷新也会影响效率,比如,在手机上看某些商城的时候,一直往下滑会一直有数据请求,也会一直刷新页面长度但是每请求一次图片就刷新一次长度会导致过于频繁,如果每请求<img :src="goodsItem.show.img" alt="" @load="i原创 2021-02-23 10:00:00 · 416 阅读 · 0 评论 -
vue中组件的父子组件各生命周期顺序问题
vue中组件的父子组件各生命周期顺序问题vue中每个组件的生命周期应该是这样的,beforeCreate -> created -> beforeMount -> mounted -> beforeUpdate -> updated -> beforeDestory -> destoryed而如果组件之前有父子关系,其顺序应该是,父组件创建->子组件创建->子组件挂载->父组件挂载,所以当涉及到父子组件的通信所相关的问题和操作的时候,要注意到原创 2021-02-22 10:54:18 · 157 阅读 · 0 评论 -
弹性布局,display:flex
弹性布局详解https://www.cnblogs.com/hellocd/p/10443237.html转载 2021-02-19 11:20:30 · 176 阅读 · 0 评论 -
Vuex——Mutation传递参数
众所周知,我们在用vue时,使用状态管理插件vuex的时候,需要改变状态信息或者共享信息的时候需要通过mutation去改变变量,而当我们用mutations时,需要传递参数的时候应该怎么处理? methods: { addition() { this.$store.commit('increment') },}这是一个组件实例,需要调用store中的mutations中的increment state: { counter:1000, } muta原创 2021-02-01 17:35:26 · 2353 阅读 · 0 评论 -
matched&meta获取当前路由中的meta信息注意
const routes = [ { //协议头://host/query path: '/home', component: Home, meta: { title: '首页' }, children: [ { path: 'news', component: HomeNews }, { path: 'message', compon原创 2021-01-29 09:04:30 · 4332 阅读 · 0 评论 -
调用$router.push()时报出Uncaught (in promise)错误
用this.$router.push()时会返回一个异常,那是因为用push或者replace时会返回一个promise对象,而并没有捕获所以有Uncaught (in promise)错误,因此我们只要捕获就好了第一种方法是直接捕获在push()后调用一个catch方法this.$router.push(this.path).catch(err=>err)第二种方法是重写原型中的push方法import Router from 'vue-router' const original.原创 2021-01-28 16:17:13 · 1590 阅读 · 0 评论 -
vue懒加载———javascript如何动态加载模块?
如何动态加载模块?python和JavaScript都是通过import去导入其他包或者模块,而我们的编译器在编译时候会直接处理import语句,所以自然就导致import最先就执行了,但是这样有个问题,如果某些模块的加载只是在特定操作下才用得到,那么如果用户打开页面就加载这些模块,造成了时间的浪费,所以有了动态加载。if (x === 3) { import profile from './profile/Profile';}以上代码会报错,就算不报错也会直接最先执行impory语句。那么原创 2021-01-28 15:26:08 · 910 阅读 · 2 评论 -
vue如何给插槽slot设置样式?
vue如何给插槽slot设置样式?slot是vue的使用中非常重要的一个标签,但是对于这样的标签也有些许问题,如果我们想直接对slot进行样式的编写呢?给slot添加一个id或者class?,不管是静态的class还是动态绑定的class,在实例使用插槽的时候,会直接替换掉<template> <div id='text'> <slot :class="{active: isActive}" name="item-text"></slot> <原创 2021-01-27 18:02:03 · 20927 阅读 · 4 评论 -
vue组件化思想应用之tabbar
vue组件化思想应用之tabbarApp.vue调用了TabBar.vue和TabbarItem.vue其中App.vuehtml代码<template> <div id="app"> <tab-bar> <tab-bar-item v-for="(value,name) in tabbar" :key="name"> <img slot="item-icon" :src="require('./asset原创 2021-01-27 16:52:56 · 126 阅读 · 0 评论 -
vue之v-bind踩坑系列——绑定src
vue之v-bind踩坑系列之绑定srcv-bind在绑定img标签中的src属性时,vue会把相对地址解析成字符串,而非路径所以会导致图片无法正常显示无法生效的代码`<tab-bar-item v-for="i in 4"> <img slot="item-icon" :src="'./assets/img/tabbar/'+tabbaricon[i-1]+'.svg'" alt=""></tab-bar-item>`data(){ retur原创 2021-01-27 16:01:04 · 1262 阅读 · 1 评论