老汤前端博客-CSDN博客

原创 vue插件大全汇总，你要的都这里，赶紧收藏下！

Vue是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件特别整理了常用的vue插件，来了个大汇总，方便查找使用，便于工作和学习。很全的vue插件汇总，赶紧收藏下吧！一、UI组件及框架 element- 饿了么出品的Vue2的web UI工具套件 mint-ui- Vue 2的移...

2019-04-23 08:51:52 53771 6

原创前端新手，看下安装淘宝npm镜像和配置的方法

大家都知道npm服务器在国外，在国内用npm命令下载各种安装包很卡，导致我们有时经常出错，这是很头疼的事，幸好马云的团队，做了一个npm镜像，解决了我们的问题。只要简单的安装淘宝npm镜像和配置下npm，就好了。第一步：安装淘宝镜像在命令窗口执行如下命令： npm install --global cnpm回车键执行命令后，稍微等下就安装好了。第二步：...

2018-11-26 16:37:25 7673 1

原创 js中callee关键字有什么作用？

　　前端新手应该要知道js中callee关键字的作用，基础知识点要掌握下更好，知道的朋友可以温故而知新哦，补充下arguments关键字的知识，它的作用是可以在函数里边接收实参信息。　1.callee关键字的定义：在函数内部使用，代表当前函数的引用(名字)。　　2.callee关键字的作用：降低代码的耦合度。　　3.耦合度的定义：一处代码的修改会导致其他代码也要发生改变...

2018-09-27 10:53:44 766

原创大型网站的CSS代码初始化，你见过吗？

大型网站的CSS代码初始化，你见过吗？CSS代码之所以要进行初始化，是因为能尽量减少各浏览器之间的兼容性问题，比如：margin:0;padding:0一般都会去初始化下，今天看下大型网站的CSS代码初始化。1.淘宝官网，CSS代码初始化： body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, l...

2018-04-11 21:19:05 475

原创 self.setinterval是什么？

学了js的你，肯定知道setInterval方法是按照指定的周期（以毫秒计）来调用函数或计算表达，setInterval方法会不停地调用函数，直到clearInterval被调用或窗口被关闭，这个setInterval方法具体的介绍请看这篇文章《setTimeout()和setInterval()方法的区别？》，今天来看self.setinterval是什么意思？先看个例子代码如下：...

2017-03-29 12:34:52 4215

iframe是用来内嵌网页的，使用起来很方便，但也有优缺点，比如iframe能原封不动地把嵌入的网页展现出来，如果有多个网页引用iframe，那么只需要修改iframe的内容，就可以实现调用每一个页面的更改，方便快捷，iframe缺点会阻塞主页面的Onload事件，但有针对iframe的优缺点及改进方法。一、iframe内嵌网页使用实例代码：<iframe width="100%" height="100%" frameborder="0" scrolling="auto" allow.

2022-05-31 15:29:41 2423

转载 js宏任务和微任务有哪些？执行是怎样的？

js宏任务是什么？当前调用栈中执行的代码成为宏任务。js微任务是什么？当前宏任务执行完，在下一个宏任务开始之前需要执行的任务,可以理解为回调事件。宏任务中的事件放在callback queue中，由事件触发线程维护；微任务的事件放在微任务队列中，由js引擎线程维护。一、js宏任务和微任务分别有哪些？1、js宏任务有：<script>整体代码、setTimeout、setInterval、setImmediate、Ajax、DOM事件2、js微任务有：process.next.

2022-05-31 15:23:59 11046 3

原创移动端文字向左无缝滚动特效(原生纯js哦)

手机页面移动端，需求是文字向左无缝滚动marquee特效，用了几个都不行，达不到需求效果，有小bug，最后用了下面的这个原生纯js文字向左无缝滚动marquee特效，我测试了没有问题，可以正常使用它，原生纯js代码少，实用性强，具体看下代码。1.先看效果演示：2.原生纯js代码如下：var speed=10; //数字越大文字滚动速度越慢var tab=document.getElementById("demo");var tab1=document.getElementById(

2022-05-31 15:15:37 791

转载 css3伪元素有哪些(两个必会的伪元素)

一.css3伪元素是什么？css3伪元素用于向某些选择器设置特殊效果。已存在元素是指DOM中存在的，伪元素则是虚拟的一种，样式也是给这个虚拟的元素使用的。比如伪元素 :before和:after，这两个非常常用前端必会，用于在css渲染中向元素的头部或尾部插入内容，它们不受文档约束，也不影响文档本身，只影响最终样式。这些添加的内容不会出现在DOM中，仅仅是在css渲染层中加入。<!DOCTYPE html><html><head><meta

2022-04-26 08:48:17 3745 1

转载 css3有哪些新特性?有哪些改进

1.新增选择器p:nth-child(n){color: rgba(255, 0, 0, 0.75)}2.新增伪元素::before和::after3.弹性盒模型display:flex;4.多列布局column-count: 5;5.媒体查询@media (max-width: 480px) {.box: {column-count: 1;}}6.个性化字体@font-face{font-family: BorderWeb;src:url(BOR...

2022-04-11 15:59:58 4864

转载 css下拉菜单代码（用纯css实现下拉菜单）

用纯css代码写一个css下拉菜单，二级菜单opacity默认是0，鼠标在一级菜单hover时opacity就是1，opacity从0到1有一个transition过渡时间1秒钟，就实现了css下拉菜单动画缓慢出现效果，具体看下面例子代码。css下拉菜单代码：<style>ul {list-style: none;margin: 0;padding: 0;}ul li a {display: block;text-decorat.

2022-04-11 11:04:13 6406

转载 js截取字符串的方法（介绍3种常用的）

js截取字符串常用的字符截取函数有slice、substring和substr这3个，我们前端人必会这3种方法，我们将从这3个函数出发，看看在js中，这些函数是如何通过js截取字符串的。1.slice说明：该slice(start, end)方法返回start和end索引之间的字符串部分。slice像substring。第一个参数代表开始位置,第二个参数代表结束位置的下一个位置,截取出来的字符串的长度为第二个参数与第一个参数之间的差;若参数值为负数,则将该值加上字符串长度后转为正值;若第一个

2021-12-13 09:53:17 36474 3

转载 js时间格式化

有时候项目中需要用到时间，但返回的是毫秒数值，这样看着就很不方便，所以我们需要用js时间格式化，达到我们项目需求，让用户看时间一看就懂。时间格式化可以前端处理，也可以后端，下面这种js时间格式化方法，很简单很实用。代码如下： 1 2 3 4 5 6 7 8 9 10 11 12...

2020-01-05 09:22:05 864

原创前端开发写代码哪个软件更好用？

群里的朋友，经常问到web前端开发写代码用那个软件好？今天在这里统一回答下，主流的web前端开发写代码的软件有这些Webstorm、Vscode、Sublime Text、HBuilder、Dreamweaver、notepad++、editplus等，做前端这么多年了，下面谈下我的使用感受吧。1.WebStorm【推荐】 WebStorm 是jetbrai...

2019-11-13 11:00:09 9379 1

原创 js数组怎么删除指定元素？

js数组是js部分非常重要的知识，有时我们有这么个需求js数组删除指定元素，先定义一个函数来获取删除指定元素索引值，然后用js数组删除的方法，来删除指定元素即可，就两步不难，很简单。1、JS的数组对象定义一个函数，用于查找指定的元素在数组中的位置，也就是索引值，代码如下： 1 2 3 4 5 6 Array....

2019-11-13 10:56:01 7850

转载 css垂直居中布局的方法

上篇文章说到常见css布局水平居中的方法，前端开发css布局还有垂直居中，也是很常见的布局方法，本文分享3种垂直居中布局的方法，table-cell + vertical-align、absolute + transform、flex + align-items，很常见，很实用。垂直居中布局方法一：table-cell + vertical-align 1 2 ...

2019-09-28 15:14:11 259

转载 2019web前端开发视频教程资料（汇总整理）

web前端开发视频教程学习资料，免费领！Web前端开发工程师，是从事Web前端开发工作的工程师。主要进行网站开发，优化，完善的工作。资料分享给自学web前端开发的朋友，坚持下去，一份付出一份收获，加油！免费领取web前端开发视频教程资料资料如下： 1.html5深入学习：pan.baidu.com/s/1N5Dai7KcKJjsCL8Vgi9Omg 密码:...

2019-08-19 16:27:25 17107

原创前端开发者的福音：WebKit类浏览器将不再使用CSS属性前缀

今天的移动平台被基于WebKit的浏览器统治着，WebKit使用了大量非标准的-webkit前缀的CSS属性或特性，这些CSS属性被Web开发者广泛使用，导致的结果是市场占有率较小的浏览器不得不支持这些非标准特性。 WebKit前缀属性在浏览器开发商中间引发了争议，现在官方博客也承认WebKit前缀属性造成的伤害超过好处，宣布在实现实验性功能时不再使用前缀，而是使用运行时标记。...

2019-07-19 10:54:30 585

原创背景透明兼容各大浏览器的方法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta...

2019-07-19 10:49:45 893

原创 6种方法实现css布局水平居中

说到常见css布局，面试时经常也会考考大家，看对css知识掌握的咋样，对css盒模型理解没，比如会问css布局水平居中的方法或者css布局垂直居中的方法等，今天分享常见css布局水平居中的6种方法。方法一：margin + width 1 2 3 4 5 6 7 8 9 10 11 ...

2019-07-02 10:58:05 5135 3

原创 Vue 3.0马上要来了你准备好了吗？

尤大大大神在Vue.js 伦敦大会上简要介绍了 Vue 下一个主要版本要发布的内容，不久前，尤大大在 medium 个人博客上发布了 Vue 3.0 的开发路线，已经有一段时间了，不出意外2019年年底会正式发布3.0版本。掐指算一算日子，Vue3.0离我们不远了，想想就害怕，扑通跪下了，跪求尤大大别更新了，学不动了。我们先看下 Vue 3.0 会有哪些重大变化：...

2019-06-04 10:25:38 1647

原创详解CSS3中的border-radius样式

border-radius是CSS3中诞生的新样式，它可以使边框的边角变成弧形和圆角。以往制作按钮、弧形边框时需要使用背景切图的方式实现；不但臃肿，而且还容易产生布局BUG，不适于自适应框架的书写。1.首先介绍一下语法：border-radius：[<length>|<percentage>]{1,4} [ / [<length>|<...

2019-05-22 09:52:33 2399

转载用js实现动态数字时钟效果

js实现动态数字时钟效果用到主要知识点如下： 1.主要是通过数组的一些方法,如：Array.from() Array.reduce() Array.find() 2.时间的处理和渲染 3.js用到面向对象的写法实现的功能炫酷的数字时间效果直接看效果 html： <div class="wraper"&g...

2019-04-30 09:47:39 5157

原创 3种方法来定义vue全局组件

什么是组件？组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可。下面讲解vue全局组件定义的3种方法。方法1.使用 Vue.extend 配合 Vue.component 方法： 1 2 3 4 varlogin=Vue.ex...

2019-04-30 09:39:30 996

原创你熟悉css中的这个letter-spacing属性吗？

身为web前端开发人员，我们用DIV+CSS布局时，我们经常用line-height行高这个熟悉，大家肯定熟到家了吧，当height等于line-height时可以垂直居中，但是今天不是说这个。css中的这个letter-spacing属性，你应该知道。1.letter-spacing是什么？就是文字与文字间的间距，值可以负数，默认值normal2.兼容性所有浏览器都支持 le...

2019-04-24 17:32:58 3275

原创绑定vue样式的5种方法

vue是三大前端框架之一，深受着前端开发人员的喜欢，特别感谢尤大大啊，向大神致敬下，哈哈哈！不扯了，回归正题。本文总结的是vue的样式绑定方式，每种方式都有对应的例子给你看，让你一看就懂，希望对你学习vue的样式绑定有所帮助。第1种使用方式：传递一个数组，组值写类名就行了，但class 需要使用v-bind（简写为“:”）做数据绑定，请看下面的例子你就懂了：<h3 :cl...

2019-04-08 14:12:35 2338

原创 vue常用的事件修饰符

vue事件修饰符，有5个很常用的阻止冒泡：.stop、阻止默认事件：.prevent、添加事件侦听器时使用事件捕获模式：.capture、只当事件在该元素本身触发时触发回调：.self 、事件只触发一次：.once，5个常用的vue事件修饰符，举一个例子，其他4个你也懂了。1.阻止冒泡：.stop看个例子，你就懂了<!Doctype html>&lt...

2019-01-26 15:03:03 5673

原创这6个css隐藏内容的方法，用过没？

最近有个不同行的盆友问我，怎么把内容隐藏起来，我第一想到了用css的方法隐藏起来，我测试了以下这6中方法是可行，欢迎一起交流下，css的其他方法，我们最常用的应该是display:none就行了，其他5种方法好像有seo作弊的嫌疑，虽然能把内容隐藏起来，但我个人感觉正规网站不提倡使用。1.常用的display:none方法 1 <pstyle="di...

2018-12-20 10:54:10 1413

原创 css两端对齐,用css3多列属性轻松实现

要实现css两端对齐，我在网上找了很多方法，都不怎么实用，都是兼容性闹得，column是css3的属性，是多列布局，使用column来实现两端对齐简单实用，就要设置下模块的个数跟column的列数一致就行，先看它的的3个属性：1.column-count 属性规定元素应该被分隔的列数2.column-gap 属性规定列之间的间隔2.column-rule 属性设置列之间的宽度、样...

2018-12-14 17:17:44 1102

原创 ajax同步模式和异步模式有哪些区别？

ajax同步模式和异步模式的区别就是在于，xhr.open()方法第3个参数传入的bool值的区别，xhr.open()方法第3个参数的作用就是设置此次请求是否采用异步模式执行，默认为true ，那么同步模式xhr.open()方法第3个参数值就是false了。1.ajax异步模式：hr.open()方法第3个参数值为true(默认值) 1 2 3 4...

2018-08-22 14:32:31 1339

原创 es6变量let和const的区别与新特性

es6新增的变量let和const的知识点，作为一个web前端开发人员是必学必会的，今天整理下发到博客里，便于复习，也希望对大家有帮助吧。文章讲到，声明变量var和let的区别，let和const的共同特性，const具有的特性。一、声明变量var和let的区别：1. let不允许重复声明变量：<script type="text/javascript">let d...

2018-07-29 15:00:17 1649

原创你要会的，js闭包前端面试题

有工作经验的前端都知道，面试时基本都会问下js闭包问题，考查下你的js基础水平。作为新手前端刚入门的你，这个前端面试必备知识点，你会吗？不会的话，就赶快看下吧，补补课吧。1.闭包的概念：闭包就是一个函数，两个函数彼此嵌套，内部函数就是闭包形成闭包条件是内部函数需要通过return给返回出来。看下面的代码，你就懂了： 1 2 3 4 ...

2018-07-11 14:40:07 15680

原创剖析js函数返回值return

在javascript里边函数return除了可以返回基本类型的信息，其还可以返回function函数。在javascript里边，一切都是对象，今天来剖析下js函数返回值return。看，js函数返回值return：function 函数名称(){函数执行体代码...return 信息;xxxxxx}特别注意一下：1.console.log(函数名称())...

2018-02-03 10:31:44 3450

转载 jQuery图片手风琴特效一行代码搞定

jQuery图片手风琴特效挺好玩的，平时工作时也经常使用，原理挺简单的，除去入口函数和事件代码，就一行jQuery代码，所以标题写成了“jQuery图片手风琴特效一行代码搞定”，jQuery图片手风琴特效用了css3的属性有动画效果，这样才符合主流吧，具体的请看以下代码：<!doctype html><html><head><meta h...

2017-02-24 11:06:08 618

web前端开发博客