web前端
輕描淡寫以後的以後
这个作者很懒,什么都没留下…
展开
-
vue 解决密码框 input 中type=“password“时,浏览器会回显之前保存的用户名和密码
浏览器会回显之前保存的用户名和密码解决转载 2022-10-12 19:07:58 · 1938 阅读 · 0 评论 -
前端常用轮子
置顶React UI 组件库Ant Design :https://ant.design/React Bootstrap: https://react-bootstrap.github.io/MATERIAL-UI : https://material-ui.com/Vue UI组件库Element : https://element.eleme.io/#/zh-CNvant : https://youzan.github.io/vant/#/zh-C%E2%80%A6View UI :原创 2021-10-09 15:17:18 · 237 阅读 · 0 评论 -
前端开发规范
https://guide.aotu.io/ 京东http://tgideas.qq.com/doc/index.html 腾讯https://github.com/ecomfe/spec/blob/master/javascript-style-guide.md 百度https:// github.com/standard/standardhttps://cn.vuejs.org/v2/style-guide/index.htmlhttp://es6.ruanyifeng.com/#do...原创 2021-08-09 15:03:35 · 72 阅读 · 0 评论 -
axios解析http链接代码
contentHtml 为解析后的代码axios.get(_content, {withCredentials: false} ).then(res => { this.contentHtml = res; var start=this.contentHtml.lastIndexOf("<body>") var end=this.contentHtml.lastIndexOf("</body>") this.contentHtm.原创 2020-12-21 15:25:29 · 515 阅读 · 0 评论 -
vue文字间歇无缝向上逐个滚动
<div class="marquee-wrap"> <ul class="marquee-list" :class="{'animate-up': animateUp}"> <li v-for="(item, index) in listData" :key="index">{{item.name}}</li> </ul> </div>Ts animateUp = f...原创 2020-11-26 14:41:38 · 1048 阅读 · 0 评论 -
js中apply、call和bind的区别
在JS中,这三者都是用来改变函数的this对象的指向的,他们有什么样的区别呢。在说区别之前还是先总结一下三者的相似之处:1、都是用来改变函数的this对象的指向的。2、第一个参数都是this要指向的对象。3、都可以利用后续参数传参。那么他们的区别在哪里的,先看一个例子。var xw = { name : "小王", gender : "男", age : 24, say : function() { alert(this.name + " , " + t...转载 2020-11-03 10:21:52 · 255 阅读 · 0 评论 -
js数组去重的几种方式
1,indexOf方法实现思路:新建一个数组,遍历要去重的数组,当值不在新数组的时候(indexOf 为 -1)就加入该新数组中;function unique(arr){ var newArr = []; for(var i = 0; i < arr.length; i++){ if(newArr.indexOf(arr[i]) == -1){ newArr.push(arr[i]) } } retur原创 2020-10-30 11:14:20 · 180 阅读 · 0 评论 -
节流和防抖的区别,以及如何实现
防抖触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间实现方式:每次触发事件时设置一个延迟调用方法,并且取消之前的延时调用方法 缺点:如果事件在规定的时间间隔内被不断的触发,则调用方法会被不断的延迟//防抖debounce代码:function debounce(fn) { let timeout = null; // 创建一个标记用来存放定时器的返回值 return function () { // 每当用户输入的时候把前一转载 2020-10-29 10:15:57 · 1210 阅读 · 0 评论 -
vue总结
vue框架篇vue的优点轻量级框架:只关注视图层,是一个构建数据的视图集合,大小只有几十kb;简单易学:国人开发,中文文档,不存在语言障碍 ,易于理解和学习;双向数据绑定:保留了angular的特点,在数据操作方面更为简单;组件化:保留了react的优点,实现了html的封装和重用,在构建单页面应用方面有着独特的优势;视图,数据,结构分离:使数据的更改更为简单,不需要进行逻辑代码的修改,只需要操作数据就能完成相关操作;虚拟DOM:dom操作是非常耗费性能的,不再使用原生的dom操转载 2020-07-16 23:06:06 · 357 阅读 · 0 评论 -
css3实现三角形(上下左右)
实现三角形的绘制很简单。第一步:新建一个div。<div class="kailong"></div>第二步:为盒子添加样式。1.向上.kailong{ width:0; height:0; border-right:50px solid transparent; border-left:50px solid transparent; border-bottom:50px solid red;}2.向下.k...转载 2020-06-09 16:26:57 · 1234 阅读 · 0 评论 -
图片转base64的高效方法
https://www.css-js.com/tools/base64.html原创 2019-03-27 11:16:50 · 1604 阅读 · 0 评论 -
for in 和for of的区别
1 遍历数组通常用for循环ES5的话也可以使用forEach,ES5具有遍历数组功能的还有map、filter、some、every、reduce、reduceRight等,只不过他们的返回结果不一样。但是使用foreach遍历数组的话,使用break不能中断循环,使用return也不能返回到外层函数。Array.prototype.method=function(){ conso...转载 2018-12-26 16:54:27 · 449 阅读 · 0 评论 -
vue 非父子组件之间传值 bus / 总线
一、在Vue 的原型中创建一个属性 bus Vue.prototype.bus=new Vue();二、子组件中绑定事件 比如叫 handleClick,在子组件中定义 hanleClick 方法 ,handleClick 方法中使用 this.bus.$emit('change',this.contentmsg); 触发事件 ‘ change ’ ,携带th...原创 2018-09-21 11:38:18 · 586 阅读 · 0 评论 -
使用命令创建VUE项目
使用命令创建vue项目环境要求: 安装有 Node.js、 vue、 vue-cli 。创建项目:vue init webpack projectName进入项目,下载依赖:npm install 或者 cnpm install运行项目:npm run dev...原创 2018-09-26 15:36:51 · 597 阅读 · 0 评论 -
使用 better-scroll 页面不能点击
better-scroll 默认会阻止浏览器的原生 click 事件。当设置为 true,better-scroll 会派发一个 click 事件,我们会给派发的 event 参数加一个私有属性 _constructed,值为 true。 const options = {click: true,taps: true}this.scroll = new BScroll(th...原创 2018-09-20 15:50:24 · 4068 阅读 · 0 评论 -
手机端line-height
ios系统上上下相差两个像素但是Android上相差比较大,而且不同的机型相差数目不一样产生原因line-height对一部分Android手机不起作用,有自己默认的行高,默认行高为22px解决办法line-height:normal; padding:5px 0;原创 2017-11-20 15:07:53 · 557 阅读 · 0 评论 -
js 打乱数组 可自由选择多少个 组成新数组
//从原数组中随机取出10个数组成新数组var arr=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];function shuffle(array) { var m = array.length, t, i; while (m) { i = Math.floor(Math.random() * m--);原创 2018-01-26 11:43:29 · 291 阅读 · 0 评论 -
CSS3动画 跳动bug
在动画元素中加 -webkit-backface-visibility: hidden; -webkit-transform-style: preserve-3d;原创 2018-03-07 11:17:38 · 1119 阅读 · 0 评论 -
CSS3 一个元素执行多个动画CSS写法
-webkit-animation-name:bounceInLeft1, bounce1; -webkit-animation-duration:2s, 1.5s; -webkit-animation-timing-function:ease, linear; -webkit-animation-delay:5.2s, 7.2s; -webkit-animatio...原创 2018-03-08 09:51:03 · 8450 阅读 · 0 评论 -
vue 打包
项目=>config=>index.js 配置服务器相对路径module.exports = { assetsPublicPath: './',}打开终端 进入项目 npm run build生成的 dist 目录 放到服务器原创 2018-03-22 09:56:39 · 309 阅读 · 0 评论 -
淘宝npm镜像使用方法
淘宝 npm 地址: http://npm.taobao.org/1.临时使用npm --registry https://registry.npm.taobao.org install express12.持久使用npm config set registry https://registry.npm.taobao.org1配置后可通过下面方式来验证是否成功 npm config get reg...原创 2018-03-26 16:47:03 · 10361 阅读 · 0 评论 -
5分钟让你明白HTTP协议
一、HTTP简介1.http协议介绍HTTP协议(HyperText Transfer Protocol,超文本传输协议)是因特网上应用最为广泛的一种网络传输协议,所有的WWW文件都必须遵守这个标准。HTTP是基于TCP/IP通信协议来传递数据(HTML 文件, 图片文件, 查询结果等)HTTP协议通常承载于TCP协议之上,有时也承载于TLS或SSL协议层之上,这个时候,就成了我们常说的HTTPS...转载 2018-05-02 09:51:16 · 1287 阅读 · 0 评论 -
vue生命周期面试题
什么是vue生命周期?vue生命周期的作用是什么?vue生命周期总共有几个阶段? 1、什么是vue生命周期?答: Vue 实例从创建到销毁的过程,就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程,我们称这是 Vue 的生命周期。2、vue生命周期的作用是什么?答:它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻辑。...转载 2018-05-15 11:28:48 · 2862 阅读 · 0 评论 -
自己使用Vue全家桶问题合集(很多eslint规范问题)
遇到很多问题一一道来。1.vue报错 Do not use built-in or reserved HTML elements as component id:header组件,不能和html标签重复header组件,h5新标签重复由于在模板需要插入到 DOM 中,所以模板中的标签名必须能够被 DOM 正确地解析。主要有三种情况: 一是完全不合法的标签名,例如 </>; ...转载 2018-05-24 10:10:21 · 6041 阅读 · 0 评论 -
vue 切换到新路由时 想要页面滚到顶部
在 Router 中添加代码scrollBehavior (to, from, savedPosition) { return { x: 0, y: 0 }}详情可以看官网https://router.vuejs.org/zh/guide/advanced/scroll-behavior.html#%E5%BC%82%E6%AD%A5%E6%BB%9A%E5%8A%A8 ...原创 2018-09-19 10:25:31 · 1603 阅读 · 0 评论 -
CSS 居中方法
水平方向上针对inline, 内联块inline-block, 内联表inline-table, inline-flex元素及img,span,button等元素.text_div{ text-align:center;}复制代码不定宽块状元素居中.text_div{ margin:0 auto;//且需要设置父级宽度}复制代码通过给父元素设置 fl...原创 2018-09-25 11:25:12 · 138 阅读 · 0 评论 -
html标签中物理标记和逻辑标记区别
关于html标签中物理标记和逻辑标记区别因为两者所达到的效果一样,所以人们就没有太在意这两个到底有什么区别,那么今天我来告诉大家,是有区别的。 它们的区别就再于一个是物理标记(实体标记),一个是逻辑标记。什么是物理标记?什么是逻辑标记? 物理元素所强调的是一种物理行为,比如说我把一段文字用b标记加粗了,我的意思是告诉浏览器应该给我加粗了显示这段文字,从单词的语义也可以分析得转载 2017-08-29 15:10:06 · 3523 阅读 · 0 评论