web前端
关注
分享
扫一扫
Mangooxx
keep hungry, keep foolish!
展开
-
【web】图片加载失败,重试三次, 若失败则使用占位图片
需求描述:加载图片过程中,可能遇见网络不好第一次加载不出来,那么此时,需要重复加载三次,若还是失败就使用默认的占位图解决思路监听图片的error事件, 当图片上的error事件被触发,就进入我们自定义的重新加载方法, 其实方法中, 就是需要一个定时器,在规定的时间内, 去给img的src重新赋值, 每一次赋值就相当于刷新图片一次, 当重试的次数,达到我们规定的次数,就将img的src设置为我们默认的占位图, 然后, 这里需要取消定时器.基本实现1. 监听图片的error事件2. 开启一个原创 2022-05-09 22:39:20 · 1838 阅读 · 0 评论 -
一年前端(实际还不到, 面试题
A 公司面试笔试题:input中新增的type.css中上下垂直居中.css中postiton的几个值和各自的作用自己手写一个ajax.js的柯里化实现.手写js中的bind方法.数组的排序和去重.逻辑题: 就是类似考公那种题吧.面试: 自己说一下vuex基础吧.然后小哥开始讲公司的发展,还有现在在做的项目.B公司笔试题:html5/css3有哪些新特性, 移除了哪些元素.css常见的选符. 哪些属性可以继承.优先级怎么计算.em和px的区别sass/less原创 2021-04-29 16:17:23 · 326 阅读 · 0 评论 -
Vue中基于Axios的封装及使用
问题/需求描述:在项目开发过程中, 如果每一次调用网络请求都去写一次请求的配置参数, 例如: header中的属性(比如需要携带token、cookie等身份识别信息, 或者传递参数的格式content-type, 就比较麻烦. 所以,这里就在axios上对需要固定配置或者不经常改动的信息进行一下初始化.初步实现首先导入axios包, 使用npm命令: npm i axios -S然后在项目中导入: import axios from ‘axios’, 这里使用的是ESM导入方式.然后就是针原创 2021-04-23 11:35:59 · 165 阅读 · 0 评论 -
Vue-style中的scope属性
scope出现的原因:在组件的style中, 可以使用scope属性, 限制当前的样式只作用于当前的组件.实现原理:使用这个属性后,Scoped Vue CSS被postcss工具构建成.{className}[data-v-{componentHash}]这样的属性, 然后这个componentHash值将作用于当前组件的所有元素.但是, 这样又有一个问题, 引用的组件内的样式就无法修改了. 所以, 可以有两种方式对带有scope的组件样式进行修改(样式穿透):.containe原创 2021-04-23 11:35:21 · 1687 阅读 · 0 评论 -
angular 初体验
angular 初体验code<!DOCTYPE html><html><body><div ng-app="" ng-controller="personController">名: <input type="text" ng-model="person.firstName"><br>姓: <input type="text" ng-model="person.lastName"><br>原创 2021-01-26 12:24:19 · 122 阅读 · 0 评论 -
Ts初体验
Ts初体验ts基础学习及快速调试准备工作全局安装 ts : npm install -g typescript创建一个目录, 命名自定义, 这里名称为 ts-demo初始化一个npm包管理文件和node_module: npm init -y初始化一个ts项目的配置文件: tsc --init, 会自动生成tsconfig.json文件.然后, 目录格式按下所示:src: ts文件放置目录js: ts编译转成js文件的放置目录.index.html: 这原创 2021-01-19 14:12:06 · 23878 阅读 · 0 评论 -
多次异步请求, 处理后让数据按序
多次异步请求, 处理后让数据按序talk is cheap, show the code!const axios = require('axios')// 获取数据function getData() { return new Promise((resolve ,reject)=> { const idList = [188, 187, 190, 191, 192, 193, 194, 189, 195, 196, 198] const dataLi原创 2021-01-19 09:44:26 · 220 阅读 · 1 评论 -
文字超出用省略号代替
文字用省略号代替单行文字省略号处理./*超过范围进行隐藏不显示*/overflow: hidden; /*文本溢出, 使用省略号 */text-overflow:ellipsis;/*连续的空白符会被合并,但文本内的换行无效*/ white-space: nowrap;多行文字省略号处理./*超过范围进行隐藏不显示*/overflow : hidden;/*文本溢出, 使用省略号 */text-overflow: ellipsis;/* 以webkit盒子展示, 比较适用原创 2021-01-19 09:39:22 · 384 阅读 · 0 评论 -
css3瀑布流实现
css3瀑布流实现效果图html代码 <div class="box"> <div class="box-item">这是1</div> <div class="box-item">这是2</div> <div class="box-item">这是3</div> <div class="box-item">这是4</div> &l原创 2020-07-28 09:49:52 · 116 阅读 · 0 评论 -
几个自己常用的前端开发CDN
几个常用的CDNjquery(ajax):<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>axios:<script src="https://unpkg.com/axios/dist/axios.min.js"></script>Vue:<script src="https://cdn.jsdelivr.net原创 2020-07-27 10:44:51 · 257 阅读 · 0 评论 -
flex布局
关于flex布局的使用1、flex布局模式图1、flex布局的开启父容器上的属性: /* 开启flex布局 */ display: flex; /* 规定主轴方向 */ flex-direction: row; /* 主轴方向上的摆放方式 */ justify-content: start; /* 交叉...原创 2020-07-23 15:34:07 · 97 阅读 · 0 评论 -
使用js将html格式的table =＞ excel格式文件
将html格式的表格导出为excel表格文件先下载辅助模块.将辅助模块导入到目标html页面利用DOM操作, 获取目标表格的内容.使用辅助模块的功能, 将内容保存为表格文件.下载辅助模块这里我使用的是fileSaver, 地址为: https://github.com/kebingzao/fileSaver_excel下载js(Blob、FileSaver)文件, 放进你的项目目录: - ## 将辅助模块导入到目标html页面- ## 利用DOM操作获取表格原创 2020-07-23 15:18:02 · 383 阅读 · 1 评论 -
使用正则,查找页面中指定内容
第一题/di.*[\-].*[0-9]\.html/dict/dict.*[\-].*\.html第二题如果用正则, 还不能做出来. 如果使用js, 代码如下:var list = document.getElementsByClassName("blue w44");var i;for (i = 0; i < list.length; i++) { x[i].innerText}```...原创 2020-07-07 13:28:41 · 493 阅读 · 0 评论 -
小白入职, 被第一个项目吓呆?
记入职的第一份项目(不包含具体项目内容)2020-07-01 正式入职第一份项目 Shop based on the Wechat min program先谈一下自己关于这个项目的几点看法(纯属小白自己不成熟见解), 后续内容将根据这几个点展开.1 项目代码耦合性高.2 单页面应用, 没有使用小程序的模块化开发思想.3 技术老旧(当时微信开发没有更新到现版本).好了, 下面从以上几个点阐述自己一点不成熟的看法(小白一枚, 求放过).第一点: 代码耦合性高, 这个先让你们看几张原创 2020-07-07 10:31:24 · 498 阅读 · 1 评论 -
Vue自定义轮播图组件
轮播图组件使用方法下载该组件,gitee地址: https://gitee.com/ideawang/vue_chart.git在项目中导入自定义组件给组件绑定数据使用演示下载后,将组件放在你的项目组件的文件夹内在你需要使用的组件内,导入该组件在模版中使用...原创 2020-04-11 22:37:02 · 1238 阅读 · 0 评论 -
Vuex学习笔记
VueX 的学习Vuex 是做什么的1、Vuex 是 Vue 的状态管理模式.可能有很多的租价需要使用一个数据,这时,将这个数据放在哪个文件里面进行管理都不好,所以使用 VueX 这个大管家.2、new 一个对象,视为管家,这样在使用的时候就可以多个组件之间共享,都可以修改并共用.而且是响应式的.3、其实可以使用 vue.prototype 就是 vue 的原型来进行共享这一个对象,但...原创 2020-04-06 17:26:09 · 143 阅读 · 0 评论 -
js中的对象合并
js中对象合并的几种方法Es6中的对象新增方法: Object.assign()1、基本用法:Object.assign方法用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）。const obj1 = { a: 1}const obj2 = { b: 2}Object.assign(obj1, obj2)console.log(o...原创 2020-04-05 15:00:13 · 2137 阅读 · 2 评论 -
记住今天,4月4日,顺带记录下让网页变灰的做法
记住今天2020年4月4日,今天是第一个定于清明节的国家悼念日, 悼念在抗击新冠肺炎疫情斗争中牺牲的烈士和逝世同胞.网页变成灰色1、由于我的项目是Vue项目, 所以直接在需要变灰的组件中, 对页面加上以下属性: /* 适配Chrome、Sarafi、Opera*/ -webkit-filter: grayscale(.95);/* Chrome, Safari, Op...原创 2020-04-04 20:00:33 · 191 阅读 · 0 评论 -
Vue中的keep-alive的使用·
<keep-alive>的使用使用背景:有些组件不需要多次的init,但是,vue中,每次点击对应的页面,每次都会进行重新的数据请求和页面DOM组件树的渲染用户在点击某个链接跳转到下个页面后,想返回上一个页面的时候,上次的操作痕迹还在.使用方法:使用vue中的keep-alive组件,组件地址:https://github.com/vuejs/vue/blob/dev...原创 2020-03-27 22:27:15 · 642 阅读 · 0 评论 -
Vue实现路由懒加载
Vue路由懒加载使用懒加载的原因1、如果项目比较大,在npm run build打包后, 生成的app.js(项目业务)文件会很大,用户在请求时,可能会造成短暂的页面空白,影响使用体验.2、使用懒加载后, 打包会形成多个业务.js文件,当用户路由到哪个页面时,就请求哪个页面,不用一一下子把所有的业务代码请过来,从而减少请求时间,提升用户的使用感受.如何实现懒加载1、普通页面路由注册:...原创 2020-03-24 11:47:17 · 216 阅读 · 0 评论 -
Vue中的route和router是什么以及之间的异同
vue中的route和router各自是什么以及之间的区别共同点使用时都需要加上$.原因: 因为在vue-router的源码中,vue-router和vue-route是被注册为了全局组件,在注册的时候,就是以$router和$route的名字命名的.源码:给Vue实例原型上注册了$route和$router两个全局组件 使用时,需要添加$符号.不同点idnam...原创 2020-03-24 11:27:42 · 1554 阅读 · 0 评论 -
将数据改为数组的几种方法
将数据改为数组的几种方法id方法使用场景1Array.from()1、类似数组的对象2、可遍历的对象2扩展运算符...1、获取函数的arguments参数对象2、Dom操作获取的NodeList3split('')1、分割字符串成数组1、Array.from()方法(es6中的方法)使用场景: 该方法只可以将类似数组的对象和可遍历的对象转...原创 2020-03-23 12:12:00 · 9360 阅读 · 0 评论 -
Js中的三个常用高阶函数
js中的三个常用高阶函数1、filter()获取大于3的值()使用filter()方法var data = [1,2,3,4]// 获取大于3的数字const result = data.filter(n => n>3)不使用filter()方法;var data = [1,2,3,4]for(let i = 0;i<data.length...原创 2020-03-22 16:30:27 · 437 阅读 · 0 评论 -
Js中的几种循环
Js中的几种循环遍历数组1 、for()var value = [1,2,3,4,5,6]for(let i = 0;i<value.length;i++){ console.log(i)}2、for…in…var value = [1,2,3,4,5]for(let i in value){ console.log(i)}3、for…of…var value...原创 2020-03-22 16:07:24 · 240 阅读 · 0 评论 -
Js常见简单编程题
利用js获取url中的参数和对应值.方法一:// 定义foo函数,参数为urlfunction foo(url) { var result = {} // 获取参数部分 url = url.split('?') // 获取每个参数和对应值 var map = url[1].split('&') // 遍历参数列表 for (let item ...原创 2020-03-22 14:46:29 · 320 阅读 · 0 评论 -
vue项目,使用eslint规范文件格式的常见问题解决
vue项目,使用eslint规范文件格式的常见问题解决问题: vue项目,method后面缺少空格报错解决方案: 在项目的eslint配置文件的rules里面加上:'space-before-function-paren': 0问题: vue项目,保存后自动加上“;”号解决方案:在prettier的配置文件里面加上:"singleQuote": true,问题: vue...原创 2020-02-06 18:08:44 · 1175 阅读 · 0 评论 -
安装uve-cli,并使用vue ui可视化界面创建第一个vue项目
安装uve-cli,并创建第一个vue项目下载vue-cli ,因为国内下载镜像比较慢,使用阿里的镜像仓库npm install -g cnpm --registry=https://registry.npm.taobao.org```再下载vue-clic...原创 2020-01-28 17:27:55 · 595 阅读 · 0 评论 -
利用html,css,js制作模糊切换页面Demo
利用html,css,js制作模糊切换页面Demohtml代码:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-sca...原创 2020-01-27 13:18:03 · 1597 阅读 · 0 评论 -
利用html,css,js制作分割页面
利用html,css,js制作分割页面html代码:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0...原创 2020-01-27 13:10:00 · 1087 阅读 · 0 评论