随笔分类 -  vue

摘要:在axios文件中导入router,console输出为undefined (js/ts中无法使用vue声明的文件/不能使用useRouter ,useRoute,他们需要在setup中调用执行后才能用) 解决方法(推荐) 导入项目中已配置好的router import router from '@ 阅读全文
posted @ 2022-05-25 12:11 黑蛋的博客 阅读(1777) 评论(0) 推荐(0)
摘要:vuex官方文档 1.安装 参考官网 2.store 初始化store import { createStore } from 'vuex' const store = createStore({}) export default store main.ts引入store import store 阅读全文
posted @ 2022-05-25 11:12 黑蛋的博客 阅读(1968) 评论(0) 推荐(0)
摘要:封装button <template> <button :class="'button button-'+type" @click="handleClick"><slot></slot></button> </template> <script lang="ts"> import { defineC 阅读全文
posted @ 2022-05-18 17:23 黑蛋的博客 阅读(234) 评论(0) 推荐(0)
摘要:1.学习网址 vue vuex vue-router 掘金-24个js循环遍历方法 掘金-git操作,一篇文章就够了 RESTful API最佳实践 HTTP-MDN 初中级前端的万字高级进阶指南 大厂复盘方法论 掘金-大厂面经 mvc与mvvm设计思想 2.其它链接 vue+ts基础脚手架 生成变 阅读全文
posted @ 2022-05-07 13:44 黑蛋的博客 阅读(42) 评论(0) 推荐(0)
摘要:@media screen and (max-width: 1600px) and (min-width: 1400px) { #four_flh .flahBg ul.mile img { width: 100%; display: block; margin: 0 auto; height: 1 阅读全文
posted @ 2022-05-01 10:26 黑蛋的博客 阅读(482) 评论(0) 推荐(0)
摘要:在vue项目中通常会给style标签加上scope属性,以此来实现样式的私有化,避免全局污染。 但有的时候这个属性又会带来麻烦:当引入第三方组件且需要修改其样式时,通常出现没有修改成功的情况 一、scope实现私有化样式的原理 通过给DOM元素结构上以及css样式上添加一个不重复的标记,来保证其唯一 阅读全文
posted @ 2022-04-17 09:31 黑蛋的博客 阅读(1175) 评论(0) 推荐(0)
摘要:this.$router.push({name:'/xx/xx',query: {id:'1'}}); this.$router.push({name:'/xx/xx',params: {id:'1'}}); this.$router.push({path:'/xx/xx',query: {id:' 阅读全文
posted @ 2022-04-16 22:51 黑蛋的博客 阅读(1253) 评论(0) 推荐(0)
摘要:.modeCard{ transition: all 0.5s; } .modeCard:hover{ //鼠标悬停时激活 opacity: 0.2; //透明度 transition: 1s; //动画过渡的更加顺滑 transform: scale(1.1); //放大倍数 } 阅读全文
posted @ 2022-04-16 09:00 黑蛋的博客 阅读(1416) 评论(0) 推荐(0)
摘要:一直看网上说有两种,我就直接使用注册组件这一种 组件之间涉及到的数据传输,大致分为这几种: 父传子(某页面传给公共组件): 比如,对于不同的页面,头部的中间内容title可能都不一样: (父通过属性传递,子通过prop接收) 子组件 <template> <div class="header"> < 阅读全文
posted @ 2022-03-22 10:52 黑蛋的博客 阅读(294) 评论(0) 推荐(0)
摘要:问题背景: 解决办法: 如图,在子click事件中添加.stop关键词即可 其它关键字参考: https://blog.csdn.net/weixin_44797182/article/details/100106814 阅读全文
posted @ 2022-03-13 15:56 黑蛋的博客 阅读(174) 评论(0) 推荐(0)
摘要:需求 oss路径不允许为空 oss路径必须以oss://开头(固定输入oss://或 报错提示) oss路径结尾不能有/(直接把/替换或 报错提示) 若传输类型为文件,则只能传输zip,tar,tar.gz三种格式文件(判断路径结尾字符) 若传输类型为目录,则不能传输zip,tar,tar.gz三种 阅读全文
posted @ 2021-12-03 15:10 黑蛋的博客 阅读(503) 评论(0) 推荐(0)
摘要:前言 导出功能其实在开发过程中是很常见的,平时我们做导出功能的时候基本都是后台生成,我们直接只需要调一支接口后台把生成的文件放到服务器或者数据库mongodb中,如果是放到mongodb中的话,我们需要从mongodb中通过唯一生成的id去拿到文件,最后window.location.href就完事 阅读全文
posted @ 2021-11-18 11:51 黑蛋的博客 阅读(5936) 评论(0) 推荐(0)
摘要:参考:https://juejin.cn/post/6844903951876227080 js: //保留n位小数并格式化输出(不足的部分补0) var fomatFloat = function(value, n) { var f = Math.round(value*Math.pow(10,n 阅读全文
posted @ 2021-11-01 15:34 黑蛋的博客 阅读(193) 评论(0) 推荐(0)
摘要:在el-form里面添加:rules=“rules” 在el-form-item里面添加prop,prop对应:model="form"的form的属性 然后在data里面添加属性rules 在点击提交的按钮里面validate的校验 <el-form :model="form" :rules="r 阅读全文
posted @ 2021-10-29 14:14 黑蛋的博客 阅读(628) 评论(0) 推荐(0)
摘要:vh确实是相对于屏幕的,但默认body有一个margin,100%加上这个margin就超出了。清除body的margin即可。 body { margin: 0; } 阅读全文
posted @ 2021-09-21 17:05 黑蛋的博客 阅读(2088) 评论(0) 推荐(0)
摘要:https://www.cnblogs.com/hafiz/p/8146324.html 1.安装vscode 2.安装node(才能使用npm命令) 3.安装vue依赖脚手架(npm i) 阅读全文
posted @ 2021-09-01 13:28 黑蛋的博客 阅读(111) 评论(0) 推荐(0)
摘要:1.背景图片 :style="{'background-image' : 'url(' + item.img + ')'}" //这里的item.img是数组循环出的图片 :style="'background-image:' +'url('+img+')'" //这里的img是data中的值 2. 阅读全文
posted @ 2021-08-27 16:17 黑蛋的博客 阅读(488) 评论(0) 推荐(0)
摘要:这个案例主要是学习vue的组件化思想,做完这个项目,我简单的理解: vue的思想就是把一个网页分为一个个的组件,通过父子,子父,兄弟之间的传值来实现数据的处理。 购物车这个案例,简单分为三个组件: <!DOCTYPE html> <html lang="en"> <head> <meta chars 阅读全文
posted @ 2021-08-19 10:31 黑蛋的博客 阅读(548) 评论(0) 推荐(0)
摘要:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .grid { margin: auto; width: 530px; tex 阅读全文
posted @ 2021-08-17 13:43 黑蛋的博客 阅读(81) 评论(0) 推荐(0)
摘要:注意: 若在最外层tab盒子进行v-for遍历列表,就会出现如下效果: 正确效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .tab ul{ over 阅读全文
posted @ 2021-08-16 14:14 黑蛋的博客 阅读(1476) 评论(0) 推荐(0)