前端
run-Ameng
这个作者很懒,什么都没留下…
展开
-
学习Typescript 的准备工作,(一句代码解决Typescript安装报错[Error: EACCES: permission denied, mkdir ‘/usr/local/lib])
我安装时出现报错,报错内容大致是没有安装权限。原创 2022-09-29 14:10:06 · 450 阅读 · 0 评论 -
ant-design-vue Table组件去掉自带分页器
ant-design-vue Table组件去掉自带分页器去除分页器只需要一行代码 :pagination=“false” <a-table ref="table" size="middle" bordered rowKey="id" :columns="columns" :dataSource="dataSource" :pagination="false" //去除自带分页器原创 2022-05-13 10:16:41 · 2668 阅读 · 0 评论 -
如何用一行 CSS 实现 10 种现代布局
如何用一行 CSS 实现 10 种现代布局原文链接:https://mp.weixin.qq.com/s/r4cx9CVDSAgIJWGebx358w现代 CSS 布局使开发人员只需按几下键就可以编写十分有意义且强大的样式规则。上面的讨论和接下来的帖文研究了 10 种强大的 CSS 布局,它们实现了一些非凡的工作。1. 超级居中:place-items: center对于第一个“单行”布局,让我们解决所有 CSS 领域中最大的谜团:居中。我想让您知道,使用 place-items: center原创 2022-04-18 15:01:48 · 487 阅读 · 0 评论 -
JS的常用技巧
原文链接:https://juejin.cn/post/70688538191357542531. 声明和初始化数组我们可以使用默认值(如""、null或 )初始化特定大小的数组0。您可能已经将这些用于一维数组,但如何初始化二维数组/矩阵呢?const array = Array(5).fill(''); // 输出(5) ["", "", "", "", ""]const matrix = Array(5).fill(0).map(()=>Array(5).fill(0)); //原创 2022-04-13 14:40:12 · 93 阅读 · 0 评论 -
【无标题】
如何回答如何理解重排和重绘原文链接:https://mp.weixin.qq.com/s/x7Z4kHxgtTK4GtemqyOy5Q浏览器的关键渲染路径。如果答不到这上面,一般这个题就凉了。性能优化,如果减少重绘和回流,当然这个点肯定也是要基于对 关键渲染路径 的理解(这点不是关键点)。复习“复习的目的是为了知道考点是啥,简单的给大家复习一下,更详细的内容希望按我介绍的知识点(可以看我文末推荐的文章进行深入学习),毕竟复习不是上课。”我们可以能知道,写了 HTML、CSS、JavaScri原创 2022-03-16 10:28:44 · 799 阅读 · 1 评论 -
javaScript有关数据的那些事
介绍 js 的基本数据类型。js 一共有六种基本数据类型,分别是 Undefined、Null、Boolean、Number、String,还有在 ES6 中新增的 Symbol 类型, 代表创建后独一无二且不可变的数据类型,它的出现我认为主要是为了解决可能出现的全局变量冲突的问题。JavaScript的值类型栈:原始数据类型(Undefined、Null、Boolean、Number、String)堆:引用数据类型(对象、数组和函数)两种类型的区别是:存储位置不同。 原始数据类型直.原创 2022-02-24 16:59:08 · 100 阅读 · 0 评论 -
ES7-ES12的知识点你掌握了吗?
Array.prototype.includes()includes() 方法用来判断一个数组是否包含一个指定的值,如果包含则返回 true,否则返回 false。arr.includes(valueToFind[, fromIndex])valueToFind,需要查找的元素值。fromIndex 可选 从fromIndex 索引处开始查找 valueToFind。如果为负值(即从末尾开始往前跳 fromIndex 的绝对值个索引,然后往后搜寻)。默认为 0。const arr = ['es原创 2022-02-15 15:00:43 · 354 阅读 · 0 评论 -
echarts在Vue项目中的使用
echarts使用1:使用命令安装npm i echarts --save2:在项目中引入(1)全局引入在main.js中import echarts from 'echarts'Vue.prototype.$echarts = echarts(2)按需引入(在echarts.vue中作为子组件)import * as echarts from 'echarts';import Vue from "vue";Vue.prototype["$echarts"] = echarts原创 2022-01-18 14:18:12 · 663 阅读 · 0 评论 -
点击跳转详情页的时候。路由改变,页面不刷新,也不触发created 事件 。
问题 :点击跳转详情页的时候。路由改变,页面不刷新,也不触发created 事件 。原因 :页面有缓存。解决方案 :1: 在路由出口处,加上唯一的key属性做为路由的id<keep-alive><router-view :key="$route.fullPath"> </router-view><keep-alive>我们配置了动态路由,并且给每个标题传了不同的id值 通过$route.fullpath就可以拿到传过去的id2:watch 监原创 2022-01-07 10:25:55 · 1776 阅读 · 0 评论 -
Vue3自己封装 confirm 函数
Vue3自己封装 confirm 函数一。 封装 confirm 组件 confirm.vue<template> <div class="confirm" :class='{ fade: fade }'> <div class="wrapper" :class='{ fade: fade }'> <div class="header"> <h3>{{title}}</h3>原创 2021-09-28 23:12:44 · 1574 阅读 · 1 评论 -
vue3——自己实现数据无限加载功能的封装
vue3——自己实现数据无限加载功能的封装一、封装的意义数据较多的时候,滑动滚动条显示加载状态,可以给用户很好的体验代码维护性更好代码可复用二、如何封装?需要用到@vueuse/core中的useIntersectionObserver,用来判断元素是否出现在可视区链接:useIntersectionObserver1. 准备项目根目录下打开任意终端,执行npm install @vueuse/core@5.3.0,这里安装的固定版本,各位按需选择因考虑复用组件,故封装为全局组件,老原创 2021-09-27 16:16:00 · 616 阅读 · 1 评论 -
Vue 控制商品数量组件的封装及使用
Vue 控制商品数量组件的封装及使用。控制商品数量组件封装 Numbox<template> <div class="xtx-numbox"> <div class="label"> <slot /> </div> <div class="numbox"> <a href="javascript:;" @click='toggle(-1)'>-</a>原创 2021-09-22 18:06:27 · 310 阅读 · 0 评论 -
Vue3页面滚动容易忽略的小bug
Vue3 每次切换路由的时候滚动到顶部//在路由配置中添加scrollBehavior()方法const router = createRouter({ history: createWebHashHistory(), routes, scrollBehavior () { return { left: 0, top: 0 } }})原创 2021-09-18 14:32:09 · 509 阅读 · 0 评论 -
vue中自己封装面包屑组件
vue中自己封装面包屑组件要实现效果前言很多电商类产品都需要实现面包屑导航,用来优化用户体验一.初级面包屑封装组件1.封装基础结构组件 xxx.vue<template> <div class='xtx-bread'> <div class="xtx-bread-item"> <RouterLink to="/">首页</RouterLink> </div> <i cl原创 2021-09-16 23:23:52 · 517 阅读 · 0 评论 -
在Vue3中如何使用依赖注入完成组件之间的数据传递
教你在Vue3中如何使用依赖注入完成组件之间的数据传递使用依赖注入父组件向子孙组件传递数据// 父组件import 子孙组件import {ref,provide} from 'vue' setup(){ provide('moneyInfo',1000) return{moneyInfo} }//孙子组件import {inject} from 'vue'setup(){ const moneyInfo=inject('moneyInfo') ret原创 2021-09-12 22:49:24 · 838 阅读 · 0 评论 -
教你如何在vue项目中封装通用的axios
教你如何在vue项目中封装通用的axios文章目录教你如何在vue项目中封装通用的axios前言一、为什么要封装axios?二、封装步骤1.安装依赖包2.开始封装3如何使用扩展1. 对象访问方式2. 动态键前言提示:这里可以添加本文要记录的大概内容:例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的基础内容。提示:以下是本篇文章正文内容,下面案例可供参考一、为什么要封装axios?统一管理基地址对请求、响应进行处理方便向后原创 2021-09-11 22:21:47 · 836 阅读 · 0 评论 -
带小白进入Vue3
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一、为什么学习Vue3?现状 :Vue3的优点Vue3展望二、 创建vue应用1.基于Vue脚手架创建项目2:项目代码结构分析3.根组件结构4. 路由模块分析5.优势:按需导入3. vue3的API函数1.API-setup函数2. 组件API-生命周期3. 数据的响应式1.组合API-reactive函数2. 组合API-toRef函数3. 组合API-toRefs函数4. 组合API-ref函数5. 数据响应式的总结6.原创 2021-09-10 21:32:36 · 393 阅读 · 2 评论 -
git的多人协作命令大全
多人协作管理员角色创建远程仓库 或 创建本地仓库之后推送到远程仓库初始化一个项目,git init添加初始的代码到暂存区 git add .提交初始的代码到本地仓库 git commit -m "提交了初始的代码"推送到远程仓库git remote add origin SSH地址git push -u origin master邀请成员开发(add / commit / pull / push)编辑自己的代码把修改后的代码,添加到暂存区 git add .把修改后原创 2021-09-09 13:51:52 · 223 阅读 · 0 评论 -
history路由模式与hash路由模式的区别
history路由模式与hash路由模式两种单页应用的路由模式 区别hash模式hash模式 :使用 URL 的 hash 来模拟一个完整的 URL, 其显示的网络路径中会有 “#” 号hash 虽然出现URL中,但不会被包含在HTTP请求中,对后端完全没有影响,因此改变hash后刷新, 也不会有问题hash模式示例: http://localhost:8080/#/home http://localhost:8080/#/user原理: hashChangehistory模式原创 2021-09-01 21:30:36 · 607 阅读 · 0 评论 -
全屏功能的实现及实际应用
1:浏览器自带的可以做全屏功能的api 但是有浏览器兼容问题document.documentElement.webkitRequestFullScreen()2:通过插件安装插件npm i screenfull使用插件在全屏组件中引入import screenfull from 'screenfull'给icon 添加点击事件,在回调中使用使用插件的核心api<svg-icon icon-class="fullscreen" class="fullscreen"原创 2021-09-01 21:15:10 · 425 阅读 · 1 评论 -
打包项目的那些事
项目开发完成打包 :用webpack做打包(把.vue, .js, .less ------> .js, .css, .html)打包的优势在保证功能的情况下,让文件尽可能的小在保证功能的前提下,让我们的页面显示出来的速度更快一些打包命令。npm run build:prod打包之后,会得到dist目录,如果希望可以双击打开index.html,则需要提前在vue.config.js中配置:vue.config.js中{ publicPath: '.原创 2021-09-01 15:29:31 · 227 阅读 · 0 评论 -
JavaScript getDay()与getDate()
JavaScript getDay() 方法 getDay() 方法可返回表示星期的某一天的数字。 // 语法 :dateObject.getDay() // 返回值// dateObject 所指的星期中的某一天,使用本地时间。返回值是 0(周日) 到 6(周六) 之间的一个整数。注释:该方法总是结合一个 Date 对象来使用例子var d = new Date();var n = d.getDay();// 返回一周的某一天数字getDate() 方法getDate() 方法原创 2021-08-31 23:29:39 · 5626 阅读 · 0 评论 -
addRoutes的基本使用
// 动态生成路由router.addRoutes([路由配置对象])或者 this.$router.addRoutes([路由配置对象])示例, 点击按钮,跳转abc页面<button @click="hAddRoute"> addRoutes </button>hAddRoute(){ this.$router.addRoutes([{ path:'/abc', component:()=>import('@/views/abc')原创 2021-08-31 10:57:19 · 6906 阅读 · 0 评论 -
样式穿透的三种写法
>>> 在less中使用/deep/ 在 less中使用:: v-deep 在scss中使用原创 2021-08-26 14:52:02 · 202 阅读 · 0 评论 -
Mongo 出现问题,显示代理服务无法连接数据库解决方案
Mongo 出现问题,显示代理服务无法连接数据库解决方案1:打开终端 ,输入命令 lsof -i:xxx 查找xxx监听的程序xxx 是代理服务端口号2: kill -9 12580 服务内部链接数据库失败,需要杀死进程重新链接 kill -9 12580PID :12580 是本次进程的ID, 每次启动一个应用都会给一个ID3:重新启动Mongonpm run serve...原创 2021-08-24 23:57:16 · 230 阅读 · 0 评论 -
后台返回的数组包对象格式的数据转换成表格数据格式的方法
后台返回的数组包对象格式的数据转换成表格数据格式的方法 transformDate(res) { const mapInfo = { id: '编号', password: '密码', mobile: '手机号', username: '姓名', timeOfEntry: '入职日期', formOfEmployment: '聘用形式', correctionTime: '转正日期原创 2021-08-24 18:20:16 · 442 阅读 · 0 评论 -
Element UI关于 input禁止编辑
方法1: 添加 readonly 属性readonly规定输入字段为只读可复制,但是,用户可以使用Tab键切换到该字段,可选择,可以接收焦点,还可以选中或拷贝其文本。 <el-form-item label="部门" prop="departmentName"> <el-input readonly v-model="formData.departmentName" style="width:50%" placeholder="请选择部门" @focus="hFocus"原创 2021-08-23 17:45:32 · 10393 阅读 · 0 评论 -
做添加数据时的完整步骤。还有一些不能错过的小细节哦
(添加数据成功后要看到新数据,所以要到最后一页)//1:封装添加数据apimethods:{ async doAdd(){ // 调用API await xxx() // 关闭弹出框 this.xxx弹出框=false // 判断添加数据最后一页是否时满的 if(isLastPageFulled){ //是满的 ,页码加1 this.page=this.maxPage+1 }else{ // 不是满的原创 2021-08-22 17:07:48 · 138 阅读 · 0 评论 -
删除数据时,分页出现的小问题
删除数据时,分页出现的小问题(如果页面中只剩一条数据。做删除后,重新渲染时,请求的仍然是这个页面的数据,就会出先No Data)```js// 做删除时要携带idasync doDel(id) {const res = await delEmployee(id)// 判断这页数据是否等于1if (this.list.length === 1) {// 等于1 删除时页码要减1this.queryParams.page–if (this.queryParams.page <= 0)原创 2021-08-21 19:45:12 · 453 阅读 · 0 评论 -
添加删除功能
添加删除功能1:绑定点击事件 ,传入Id。@click=“hDel(scope.row.id )”2:写删除方法 ,添加 confirm 询问是否删除3:调删除API。4:删除成功。重新查询数据 async doDel(id) { // 调用删除API const res = await delAPI(id) //重新渲染 this.$message({ type: 'success', message: '删除成功!' }) con原创 2021-08-21 19:39:10 · 207 阅读 · 0 评论 -
快速把对象属性拿出来
快速把对象属性拿出来var obj={姓名:"需",手机号:"1234567"} Object.keys(obj) console.log(obj). // ["姓名", "手机号"]原创 2021-08-20 17:54:08 · 125 阅读 · 0 评论 -
TCP协议的三次握手和四次挥手
TCP协议的三次握手和四次挥手三次握手 (客户端和服务端建立联系的过程)第一次握手client 向服务端发出报文,告诉服务器我想和你交个朋友第二次握手服务器接收到客户端的请求,给客户端发送自己的态度,自己愿意和客户端交朋友,问客户端是否准备好第三次握手客户端接收到服务器的确认可以交朋友消息后,向服务器发送确认报文。告诉服务器,自己已经准备好交流感情了四次挥手(客户端与服务器解除联系)第一次挥手客户端向服务器发送报文,告诉服务器,自己不想和交朋友了原创 2021-08-19 22:50:14 · 50 阅读 · 0 评论 -
即时通讯 webScoket
即时通讯即时发送和接收互联网消息等的业务ajax只能是发送请求后,得到一次响应,无法实现即时通讯、ajax轮询可以模拟,比如创建计时器,每间隔一秒,自动调用接口即时通讯一次请求多次响应WebscoketHTML5出的新的协议,可以在一个TCP链接上,实现即时通讯的效果需要前端的后端的支持后端可以主动向前端推送内容webScoket的使用...原创 2021-08-19 22:49:27 · 116 阅读 · 0 评论 -
HTTP协议
http协议 超文本传输协议,定义服务器和客户端的传送格式请求发送的数据包,叫请求报文(http请求报文)HTTP 请求消息由 请求行,请求头部,空行,和请求体 4部分组成往后端传参有几种方式 (3)请求行 url后面请求头请求体 (get 方式可以在请求体里给后端带值,根据语意化一般不在请求体中携带)响应回来的数据包,叫响应报文(http响应报文)http响应消息由状态行,响应头部,空行,和响应体4部分组成缺点:HTTP协议:客户端与同西端建立原创 2021-08-19 19:57:59 · 59 阅读 · 0 评论 -
项目中关于分页的那些问题
项目中关于分页的那些问题添加分页组件(element UI)关于分页中自定义页码和点击页码跳转问题 <el-pagination :page-sizes="[3, 5, 7, 10, 20]" //自定义页码数 layout="sizes,prev,pager,next,jumper" :current-page.sync="curPage" //动态绑定当前页原创 2021-08-18 10:49:29 · 126 阅读 · 0 评论 -
Vue全局组件
全局组件。全局组件的作用能在项目中多次使用组件的.vue文件写在component里定义全局组件的格式//引入组件 import 组件名字 from '@/component/x x x'//注册组件 Vue.component('组件名字',组件名字)统一注册全局组件的方式方式1 (缺点:每注册一次全局组件。都要写这两段代码)//引入组件 import 组件名字 from '@/component/x x x'//注册组件原创 2021-08-17 16:23:55 · 147 阅读 · 0 评论 -
Js对象的赋值
let obj={a:1} let obj2=obj obj2.a=100 console.log(obj.a)//100 //对象的结构赋值 ... let obj={a:1} let obj2={...obj} obj2.a=100 console.log(obj.a)//1数据存放1.基本类型的变量是存放在栈区的(栈区指内存里的栈内存)2.引用类型的值是同时保存在栈内存和堆内存中的对象对象引用当从一个变量向另一个变量赋值引用类型的值时,同样也会将存储..原创 2021-08-17 11:49:02 · 5172 阅读 · 0 评论 -
表单校验的基本步骤
表单校验的基本步骤定义验证规则定义规则*data() { return { // 省略其他... rules: { name: [ { required: true, message: '部门名称不能为空', trigger: 'blur'}, { min: 1, max: 50, message: '部门名称要求1-50个字符', trigger:'blur'}, { validat原创 2021-08-15 11:26:34 · 542 阅读 · 1 评论 -
Vue新项目中如何使用SVG矢量图
一、什么是SVG?SVG 指可伸缩矢量图形 (Scalable Vector Graphics)SVG 用来定义用于网络的基于矢量的图形SVG 使用 XML 格式定义图形SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失SVG 是万维网联盟的标准二,如何学习SVG学会在网络上收集.svg图片,在项目中使用在https://www.iconfont.cn/ 去下载你要用的svg,找到图标后,可以下载或者直接复制代码。新建.svg文件在src/icons/svg下,建立一个名为qq原创 2021-08-14 22:47:04 · 542 阅读 · 0 评论 -
vue 父传子 props异步造成的问题,及解决方案
创建后created 发送请求,获取数据,点击取消后,创建的组件没有被销毁,(编辑数据,由于数据回填动作写在created中,子组件用dialog包裹,导致数据回填不正确,props的执行是异步的)解决方法1 v-if 销毁重建。会自动执行created 在组件上创建属性 v-if =“showDiaglo” ,关闭弹出层后进行组件销解决方法2 在父组件里,点击编辑后,找到子组件,调用获取详情方法如何在父组件中调用子组件方法 ref父组件 this.$refs.子组件名字.方法子组件添原创 2021-08-14 22:35:43 · 2373 阅读 · 0 评论