vue
文章平均质量分 51
vue是一套用于构建用户界面的渐进式框架。与其功能类似的有react、angular等。
我是李大福
一个小小的前端工程师
展开
-
grid 布局案例之grid-template-areas和grid-column的使用
分别使用grid-template-areas和grid-column两种方法进行同样效果布局。原创 2024-04-12 12:15:00 · 930 阅读 · 0 评论 -
error:0308010C:digital envelope routines::unsupported(问题分析)
出现这个错误是因为 node.js V17版本中最近发布的OpenSSL3.0, 而OpenSSL3.0对允许算法和密钥大小增加了严格的限制,可能会对生态系统造成一些影响. …原创 2024-04-14 08:30:00 · 195 阅读 · 0 评论 -
arr.at is not a function报错的解决办法
终端内运行下面的代码,清理缓冲。原创 2024-04-13 08:30:00 · 1216 阅读 · 1 评论 -
本地存储之indexedDB的操作api -- localforage的使用
本地存储之indexedDB的使用。本次主要使用localforage做一个计划表,采用年、月、周、日4个维度进行增改查。原创 2023-07-15 20:26:33 · 489 阅读 · 0 评论 -
vue父子组件之间相互控制传值,子组件使用$parent直接控制父组件的值
父组件在提交表单后,弹框进行提示,子组件是一个弹框。原创 2023-07-01 21:21:02 · 481 阅读 · 0 评论 -
vue使用emit控制改变父组件的值,实现子组件的显示与隐藏
父组件在提交表单后,弹框进行提示,子组件是一个弹框。原创 2023-07-01 21:18:17 · 919 阅读 · 0 评论 -
nuxt 使用swiper,缩略图轮播与主轮播相互关联
nuxt 使用swiper,需要缩略图轮播与主轮播相互关联。原创 2023-04-27 19:36:28 · 427 阅读 · 2 评论 -
vue项目scss预处理器的安装
scss安装代码,有淘宝镜像的直接使用第一段代码,没有的使用第二段代码。原创 2023-03-26 09:32:54 · 222 阅读 · 0 评论 -
vue3项目的创建
vue3项目有两种创建方式,分别是@vue/cli和vite。原创 2023-02-06 23:12:25 · 135 阅读 · 0 评论 -
vue使用优化后的动画级别的定时器 requestAnimationFrame 比setInterval, setTimeout效果要高很多
vue使用优化后的动画级别的定时器 requestAnimationFrame 比setInterval, setTimeout效果要高很多原创 2022-10-05 22:11:52 · 997 阅读 · 0 评论 -
列表进详情再返回列表时不再刷新页面
列表跳详情,返回列表再进入另一个详情页,详情页显示的还是上一个页面内容原创 2022-09-05 19:25:36 · 349 阅读 · 0 评论 -
基于elementUI的el-button的vue版404 500 403 页面,同时兼容电脑端和手机端
基于elementUI的el-button的vue版404 500 403 页面,可以直接作为组件使用。如果是使用的其他ui框架只需要修改按钮样式就可以。原创 2022-07-10 22:04:09 · 645 阅读 · 0 评论 -
vue开发,100个易犯的错误之cumputed 写了两个,或mounted 写了两个
在代码写的比较长的时候,很容易出现上面写了一次mounted,下面接着又写一遍的情况。这个时候控制台不报错,就很难找到问题的原因。原创 2022-07-10 21:56:08 · 1002 阅读 · 0 评论 -
vue版锚点定位巡航
vue版锚点定位巡航原创 2022-05-24 22:43:46 · 480 阅读 · 0 评论 -
Vue 看不懂的错误 [Vue warn]: Duplicate keys detected: ‘0‘. This may cause an update error.
[Vue warn]: Duplicate keys detected: ‘0’. This may cause an update error.问题描述页面中在同一个级别出现的多个v-for 使用了同样的index下标作为key值。<span v-for="(item,index) in filterResult.topList" :key="index"> <Tag class="tag" closable @on-close="handleClose(index)" v原创 2022-05-19 23:58:37 · 400 阅读 · 1 评论 -
用图片生成图片,涉及到跨域问题
项目中需要用到我服务器上的图,生成分享图。但是由于跨域问题始终无法解决,最好采用如下不是很完美的解决方案,把图转为base64形式,然后再使用。同行们如果有更好的方法,欢迎一起探讨。原创 2022-04-16 13:20:10 · 879 阅读 · 6 评论 -
vue class和style的动态绑定举例
vue class和style的动态绑定举例文章目录vue class和style的动态绑定举例概述class的绑定对象语法数组语法style的绑定对象语法数组语法完整demo官网链接概述此文章依据官网进行自我整理总结,便于工作中进行直接代码复用。class的绑定对象语法可以用于通过变量来控制class添加与否<div :class="{active: isActive,‘bigFz’:isBigFz}">isActive 为true时添加数组语法可以用于添加多个动态clas原创 2022-04-16 13:18:49 · 820 阅读 · 0 评论 -
vue nuxt 分享插件,实测有效。2022-04-16 13:16:46
vue nuxt 分享插件,实测有效。2022-04-16 13:16:46原创 2022-04-16 13:17:27 · 3159 阅读 · 0 评论 -
vue nuxt npm 调用百度地图
vue nuxt 调用百度地图,实测有效原创 2022-04-16 13:11:46 · 1718 阅读 · 2 评论 -
vue项目动画特效 animejs 元素动画
animejs 元素动画概述vue项目使用元素动画安装npm install animejs --save参考引用及使用import anime from 'animejs/lib/anime.js';文档https://www.animejs.cn/documentation/#gridAxisStaggering完整demo<template><div class="anime"> <div class="wCen">原创 2022-03-27 22:15:35 · 3496 阅读 · 0 评论 -
nuxt 手机检测,依据媒介不同,页面显示不同样式
nuxt 手机检测,依据媒介不同,页面显示不同样式作为前端,经常会遇到某些人需要页面响应式布局,比如在pc端显示4列,在手机端要显示2列。这时候,就可以使用此方法进行处理。原创 2022-03-12 12:09:33 · 645 阅读 · 0 评论 -
vue 最简单的tab选项卡
选项卡文章目录选项卡概述效果图代码demo概述本tab选项卡demo只实现基本的tab选项卡切换,具体样式请依据项目进行修改优化效果图代码demo<!-- 产品详情 :产品介绍、产品规格、产品售后 --><template> <div class="intro"> <ul class="tabs"> <li class="tab" v-for="(item,index) in tabs" :key="ind原创 2022-01-09 23:41:19 · 663 阅读 · 0 评论 -
iview View UI vue modal 报错 TypeError:t is undefined
iview View UI vue modal 报错 TypeError:t is undefined原创 2021-12-04 18:37:46 · 896 阅读 · 0 评论 -
如何实现表单label 两端对齐
表单label 两端对齐文章目录表单label 两端对齐需求概述效果图demo代码需求概述有的强迫症的客户总是要求要两端对齐,首先想到的是text-align:justify ,但是宣告失败!!所以只能采用其他方式效果图demo代码<template><div> <div class="row"> <div class="line"> <span class="label">原创 2021-09-15 23:19:11 · 1631 阅读 · 0 评论 -
VUE遇到 vue.min.js:6 TypeError: Cannot read property ‘__ob__‘ of undefined 最简单粗暴的解决办法
TypeError: Cannot read property ‘ob’ of undefined解决方法方法一:data(){} 改为data(){ return{}}方法二:直接删除掉 data(){}<script>export default { name: 'component10', props: { item: {} }, data(){}}</script>问题分析问题报错...原创 2021-07-16 18:45:40 · 4303 阅读 · 0 评论 -
“Required String parameter ‘sellerId‘ is not present“ 传参有问题
"Required String parameter 'sellerId' is not present"api.js 接口写的是直接传sellerId,而不是 params 键值对;但是调用接口时却采用params键值对传参,导致传参有问题而报错。原创 2021-07-15 21:35:00 · 236 阅读 · 0 评论 -
Avoid mutating a prop ..... Instead, use a data or computed property based on the prop‘s value
Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "vid" prop之vid正在被改变。免直接改变这个prop,因为每当父组件重新渲染时,该值将被覆盖。相反原创 2021-07-15 21:18:34 · 723 阅读 · 0 评论 -
vue中style的scoped属性这样用,修改第三方组件iview 或 element 样式
vue中style的scoped属性这样用,修改第三方组件iview 或 element 样式文章目录vue中style的scoped属性这样用,修改第三方组件iview 或 element 样式概述需求问题描述解决办法添加样式前添加样式后在线demo完整代码(需安装了scss和iview组件)其他关于scoped的介绍概述项目中使用了scss预处理器(使用其他预处理的同理)和第三方ui组件iview进行表格美化。需求需要将数据表“净值估算”列负数标注为绿色,正数标注为红色,字体加粗;排原创 2021-07-08 20:48:33 · 3269 阅读 · 2 评论 -
vue项目中页面中最常用的key value横向对齐结构(uni-app为例)
最常用的横向布局结构,名字和内容形式。原创 2021-04-12 23:01:55 · 873 阅读 · 0 评论 -
this.$nextTick()究竟在什么时候用?为什么要用this.$nextTick()?不用this.$nextTick()不可以吗?有没有替代this.$nextTick()的方法?
this.$nextTick()究竟在什么时候用?为什么要用this.$nextTick()?不用this.$nextTick()不可以吗?有没有替代this.$nextTick()的方法?原创 2021-04-12 23:01:21 · 964 阅读 · 0 评论 -
Uni-app 微信小程序中Class绑定与Style绑定和vue官网怎么就不一样呢?uni-app怎么绑定class?
Uni-app 微信小程序中Class绑定与Style绑定和vue官网怎么就不一样呢?uni-app怎么绑定class?原创 2021-03-18 09:52:11 · 1342 阅读 · 0 评论 -
Module build failed (from ./node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/loader
Module build failed (from ./node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/loaders/templateLoader.js):16:49:42.890 语法错误: This experimental syntax requires enabling one of the following parser plugin(s): ‘decorators-legacy, decorators’ (原创 2021-03-03 18:53:20 · 15287 阅读 · 0 评论 -
uView Ui “TypeError: Cannot convert undefined or null to object“
“TypeError: Cannot convert undefined or null to object”问题原因解决方案去掉多余的@原创 2021-03-03 18:51:02 · 779 阅读 · 2 评论 -
vue uni-app 开发 微信小程序易犯错误集锦--子组件在父组件内不显示,props不起作用
vue uni-app 开发 微信小程序易犯错误集锦--子组件在父组件内不显示,props不起作用,从其他页面复制组件到新页面后,组件不显示原创 2021-02-03 22:46:13 · 1767 阅读 · 0 评论 -
uniapp横向滚动,测试有效
uniapp 横向滚动,微信小程序显示效果显示效果 uniapp 横向滚动效果 代码html<template><view> <view style="padding-top:100rpx;">横向滚动</view> <scroll-view scroll-x="true" class="scrollView"原创 2021-01-31 16:50:47 · 759 阅读 · 0 评论 -
vue项目常用固定套路,改字段名,分页加载数据
vue项目常用固定套路修改数据字段名 – map描述:后台传过来的json数据,字段是xingming、sex,但是前端页面需要使用name、gender,于是需要对数据字段进行修改。let persons = [ { xingming: "杰克", age: 18, id: 5, sex: "男" }, { xingming: "李雷", age: 20, id: 2, sex: "男" }, { xingmin原创 2021-02-03 22:39:50 · 801 阅读 · 0 评论 -
mounted 内写console.log 报错
原因:是eslint问题解决办法:暂无原创 2021-01-31 00:04:33 · 519 阅读 · 0 评论 -
Nuxt.js 踩坑记录,(1)引入fs包报错 fs报错
如图所示,我在db/app.js下引入了fs这个模块,提示我npm install,我也照做了,但是仍然报错。通过各种百度,踩坑,最终解决了这个问题。希望能帮助到有需要的朋友。打开nuxt.config.js,这个build对象按照我的理解就是webpack的配置项,在build对象里面添加extend(config,ctx){ config.node = { fs:"empty" }}最后页面成功运行了起来!!!原文...原创 2021-01-31 00:03:09 · 1937 阅读 · 0 评论 -
VM402 WAService.js:2 TypeError: Right-hand side of ‘instanceof‘ is not callable
VM402 WAService.js:2 TypeError: Right-hand side of ‘instanceof’ is not callable原创 2021-01-28 22:01:28 · 1030 阅读 · 0 评论 -
jsp页面中使用vue iview能现代技术
jsp页面中使用vue iview资源引入<link rel="stylesheet" type="text/css" href="http://unpkg.com/view-design/dist/styles/iview.css"><script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script><script type="text/javascript" src="原创 2020-12-01 21:26:27 · 563 阅读 · 0 评论