Web前端
文章平均质量分 54
Super_LD
来非有意去无心,流水闲云自在行~
展开
-
Vue项目,Echarts组件封装通用模板,内含NoData、resize处理逻辑
1、resize.js 主要处理Echarts组件自适应原创 2021-11-15 17:28:37 · 1568 阅读 · 0 评论 -
Element-UI 常用(后续会持续更新)
1、表格文字过长...,当鼠标hover的时候显示全称:show-overflow-tooltip原创 2021-10-20 16:58:07 · 403 阅读 · 0 评论 -
Vue Element校验validate 限制输入指定类型
Vue Element校验validate官方文档限制输入指定类型添加type限制即可,type包括以下值:例子:rules: { bannerType: [ { required: true, message: '请选择类型', trigger: 'change'} ], associateId: [ { required: true, message: '请选择公告', trigger: 'change'} ], associateDat...转载 2020-09-23 08:57:01 · 2554 阅读 · 0 评论 -
Server-Sent Events 教程(转载)
Server-Sent Events 教程分享按钮作者:阮一峰日期:2017年5月27日服务器向浏览器推送信息,除了WebSocket,还有一种方法:Server-Sent Events(以下简称 SSE)。本文介绍它的用法。一、SSE 的本质严格地说,HTTP 协议无法做到服务器主动推送信息。但是,有一种变通方法,就是服务器向客户端声明,接下来要发送的是流信息(streaming)。也就是说,发送的不是一次性的数据包,而是一个数据流,会连续不断地发送过来。这时,客户端...转载 2020-09-21 14:55:32 · 463 阅读 · 0 评论 -
Vue 中英文 组件 样式 写法
Vue 中英文 组件 样式 写法Vue 项目国际化样式处理一、全局(main.js)添加自定义指令:v-lang 会自动添加 语言对应的 class 【中:zh,英:en】Vue.directive('lang', { // 当被绑定的元素插入到 DOM 中时…… inserted(el) { el.classList.add(i18n.locale); },});二、在需要兼容 英文 样式的组件内添加指令<div v-lang class="wrap转载 2020-09-21 14:46:48 · 678 阅读 · 0 评论 -
轮询、长轮询、长连接、websocket
轮询、长轮询、长连接、websocket阅读目录(Content)①轮询 ②长轮询(comet) ③长连接(SSE) ④WebSocket 四种Web即时通信技术比较 Web端即时通讯技术:即时通讯技术简单的说就是实现这样一种功能:服务器端可以即时地将数据的更新或变化反应到客户端,例如消息即时推送等功能都是通过这种技术实现的。但是在Web中,由于浏览器的限制,实现即时通讯需要借助一些方法。这种限制出现的主要原因是,一般的Web通信都是浏览器先发送请求到服务器,服务器再进行响应完成数据的转载 2020-09-19 16:30:01 · 630 阅读 · 0 评论 -
vscod代码(vue)格式化 vscode settings.json配置
vscod代码格式化:{//vscode默认启用了根据文件类型自动设置tabsize的选项"editor.detectIndentation":false,//重新设定tabsize"editor.tabSize":4,//#每次保存的时候自动格式化"editor.formatOnSave":true,//#每次保存的时候将代码按eslint格式进行修复"eslint.autoFixOnSave":true,//#...原创 2020-09-19 14:43:13 · 1245 阅读 · 0 评论 -
Webpack原理
webpack原理查看所有文档页面:全栈开发,获取更多信息。原文链接:webpack原理,原文广告模态框遮挡,阅读体验不好,所以整理成本文,方便查找。工作原理概括基本概念在了解 Webpack 原理前,需要掌握以下几个核心概念,以方便后面的理解:Entry:入口,Webpack 执行构建的第一步将从 Entry 开始,可抽象成输入。Module:模块,在 Webpack 里一切皆模块,一个模块对应...转载 2018-06-13 23:47:05 · 1204 阅读 · 0 评论 -
Webpack html插件优化、devServer、热更新(二)
一、clean-webpack-plugin:在每次生成dist目录前,先删除本地的dist文件(每次自动删除太麻烦)2、安装clean-webpack-plugin npm/cnpm i clean-webpack-plugin --save -dev3、在我们的webpack.config.js文件中引入 const cleanWebpackPlugin=require('clea...原创 2018-06-21 23:23:11 · 1652 阅读 · 0 评论 -
vue 事件总线( vue-bus)非父子组件传值
vue-bus一个 Vue.js 事件中心插件,同时支持 Vue 1.0 和 2.0原因Vue 2.0 重新梳理了事件系统,因为基于组件树结构的事件流方式实在是让人难以理解,并且在组件结构扩展的过程中会变得越来越脆弱。虽然依然保留了父子组件间的事件流,但有诸多限制,比如不支持跨多层父子组件通信,也没有解决兄弟组件间的通信问题。Vue 推荐使用一个全局事件中心来分发和管理应用内的所有事件,详见文档。...转载 2018-06-14 23:28:16 · 6341 阅读 · 1 评论 -
React创建组件的三种方式及其区别
React创建组件的三种方式及其区别React推出后,出于不同的原因先后出现三种定义react组件的方式,殊途同归;具体的三种方式:函数式定义的无状态组件es5原生方式React.createClass定义的有状态组件组件 (不推荐使用)es6形式的extends React.Component定义的有状态组件组件 虽然有三种方式可以定义react的组件,那么这三种定义组件方式有什么不同呢?或者...转载 2018-06-23 17:45:05 · 215 阅读 · 0 评论 -
React 组件生命周期详解
Ract生命周期React 生命周期分为三种状态 1. 初始化 2.更新 3.销毁一、初始化1、getDefaultProps()设置默认的props,也可以用dufaultProps设置组件的默认属性.2、getInitialState()在使用es6的class语法时是没有这个钩子函数的,可以直接在constructor中定义this.state。此时可以访问this.propsconstru...转载 2018-06-23 21:10:40 · 336 阅读 · 0 评论 -
JSX基本语法(React )
原创 2018-06-16 22:11:22 · 217 阅读 · 0 评论 -
Webpack的核心原理(配置详解、loaders三种写法)
Webpack是目前基于React和Redux开发的应用的主要打包工具。我想使用Angular 2或其他框架开发的应用也有很多在使用Webpack。当我第一次看到Webpack的配置文件时,它看起来非常的陌生,我非常的疑惑。经过一段时间的尝试之后我认为这是因为Webpack只是使用了比较特别的语法和引入了新的原理,因此会让使用者感到疑惑。这些也是导致Webpack不被人熟悉的原因。因为刚开始使用W...转载 2018-06-30 22:22:48 · 1725 阅读 · 0 评论 -
css重置下拉列表select的默认样式
select的一些默认样式我们很难修改,比如图标的替换。接下来就说说如何修改这些默认样式:html代码:<div> <select name=""> <option value="芝士">芝士</option> <option value="奶油">奶油</转载 2018-06-19 22:19:10 · 2123 阅读 · 0 评论 -
HTML5 新增 form、input属性
HTML5 的新的表单属性本章讲解涉及 <form> 和 <input> 元素的新属性。新的 form 属性:autocompletenovalidate新的 input 属性:autocompleteautofocusformform overrides (formaction, formenctype, formmethod, formnovalidate, formt...转载 2018-06-19 22:42:05 · 471 阅读 · 0 评论 -
Angular vs React 最全面深入对比
摘要:如今,Angular和React这两个JavaScript框架可谓红的发紫,同时针对这两个框架的选择变成了当下最容易被问及或者被架构设计者考虑的问题,本文或许无法告诉你哪个框架更优秀,但尽量从更多的角度去比较两者,尽可能的为你在选择时提供更多的参考意见。选择的方法在选择之前,我们尝试带着一些问题去审视你将要选择的框架(或者是任何工具),尝试用这些问题的答案来帮助我们更加了解框架,也更加让选择...转载 2018-06-27 22:33:34 · 990 阅读 · 0 评论 -
Angular入门小Demo(开发几步走)
示例代码:原创 2018-09-25 22:24:12 · 832 阅读 · 0 评论 -
Angular五种服务详解
(转自http://www.cnblogs.com/liulangmao/p/4078246.html)在这之前angular学习笔记(十五)-module里的'服务'这篇文章里,已经大致讲解了ng中的'服务',在之后的很多地方也用到了服务,但是,所有的服务都是使用app.factory来创建的.但其实,创建服务有5种方法,这篇文章就来具体讲解ng中的五种服务类型.首先,为了举栗子,先写好...转载 2018-10-10 11:26:20 · 1577 阅读 · 0 评论 -
React组件通信(属性传值)
在<Person>组件中添加name和count属性以及文本内容,如下图所示:在Person.js中使用如下方式获取组件传过来的值,props形参可用其他值代替,建议使用props界面展示结果如下:...原创 2018-06-11 12:10:13 · 421 阅读 · 0 评论 -
安装React
React 可以直接下载使用,下载包中也提供了很多学习的实例。本教程使用了 React 的版本为 15.4.2,你可以在官网 http://facebook.github.io/react/ 下载最新版。你也可以直接使用 BootCDN 的 React CDN 库,地址如下:<script src="https://cdn.bootcss.com/react/15.4.2/react.min...转载 2018-06-07 00:16:21 · 411 阅读 · 0 评论 -
SASS快速入门
Sass (Syntactically Awesome StyleSheets)Sass 是一款强化 CSS 的辅助工具,它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能,这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库(如 Compass)有助于...转载 2018-05-30 23:45:38 · 237 阅读 · 0 评论 -
Less几种使用方式
在Vue中使用Less1、安装依赖处理普通的.css 文件, 需要安装css-loader,style-loader .less 文件, 需要安装 less-loader //.sass 文件,需安装 sass-loadernpminstall css-loader style-loader --save-devnpminstall less-load...原创 2018-05-30 23:29:05 · 10884 阅读 · 1 评论 -
jQuery图片延迟加载插件jQuery.lazyload
插件描述:jQuery图片延迟加载插件jQuery.lazyload,使用延迟加载在可提高网页下载速度。在某些情况下,它也能帮助减轻服务器负载。使用方法引用jquery和jquery.lazyload.js到你的页面12<script src="jquery-1.11.0.min.js"></script><script src="jquery.lazyload.js...转载 2018-05-28 22:15:36 · 223 阅读 · 0 评论 -
React-双向数据绑定
1、在Person.js中添加如下代码:2、在App.js中按照如下步骤,添加代码3、页面展示为:4、变更输入框内容,页面展示:原创 2018-06-11 18:02:47 · 390 阅读 · 0 评论 -
React-属性传值(传事件)
1、如下图在App.js中,使用红色框内方式,将myClick属性设置为changeName,并设置参数在Person.js中,在h2元素的click事件使用{props.myClick}获取组件传递过来的事件没有触发h2元素绑定的事件之前,页面展示:触发h2元素绑定的事件之后:因为触发了changeName事件,其中person的name是传入的"通过传递事件触发",count是通过setSta...原创 2018-06-11 17:26:05 · 1184 阅读 · 0 评论 -
React组件通信(state方式)
在App.js中,按如下图步骤添加对应代码,第一步:设置state属性第二步:使用state属性替换元素属性;并在button元素上绑定click事件第三步:实现changeName方法,通过setState改变属性值。点击button按钮前页面展示:点击button按钮后展示:...原创 2018-06-11 13:07:56 · 305 阅读 · 0 评论 -
React第一个组件(不同方式)
方式一:类方式(推荐),在项目src下面创建一个HelloReact.js,内容如下:然后在App.js中引入HelloReact组件,方式如下: 启动项目,npm start,界面展示红色框中的内容:方式二:函数方式(不推荐),在项目src下创建Person.js然后在App.js中引入Person.js,如下图:<Person /><Person></Pers...原创 2018-06-11 11:43:31 · 195 阅读 · 0 评论 -
三张图搞懂JavaScript的原型对象与原型链
三张图搞懂JavaScript的原型对象与原型链对于新人来说,JavaScript的原型是一个很让人头疼的事情,一来prototype容易与__proto__混淆,二来它们之间的各种指向实在有些复杂,其实市面上已经有非常多的文章在尝试说清楚,有一张所谓很经典的图,上面画了各种线条,一会连接这个一会连接那个,说实话我自己看得就非常头晕,更谈不上完全理解了。所以我自己也想尝试一下,看看能不能把原型中的...转载 2018-05-27 22:42:04 · 247 阅读 · 0 评论 -
Element-UI 安装
原创 2018-05-27 22:29:30 · 1704 阅读 · 0 评论 -
Swiper4.x使用方法(HTML,JS)
Swiper4.x使用方法1.首先加载插件,需要用到的文件有swiper.min.js和swiper.min.css文件。可下载Swiper文件或使用CDN。<!DOCTYPE html><html><head> ... <link rel="stylesheet" href="path/to/swiper.min.css">&转载 2018-06-03 22:10:28 · 1056 阅读 · 0 评论 -
Flex布局看这篇就足够了!
Flex基本概念在 flex 容器中默认存在两条轴,水平主轴(main axis) 和垂直的交叉轴(cross axis),这是默认的设置,当然你可以通过修改使垂直方向变为主轴,水平方向变为交叉轴,这个我们后面再说。在容器中的每个单元块被称之为 flex item,每个项目占据的主轴空间为 (main size), 占据的交叉轴的空间为 (cross size)。这里需要强调,不能先入为主认为宽度...转载 2018-05-28 22:23:15 · 1206 阅读 · 0 评论 -
HTML-meta标签总结
<!DOCTYPE html> <!-- 使用 HTML5 doctype,不区分大小写 --><html lang="zh-cmn-Hans"> <!-- 更加标准的 lang 属性写法 http://zhi.hu/XyIa --><head><!-- 声明文档使用的字符编码 --><meta charse转载 2018-05-28 22:49:23 · 198 阅读 · 0 评论 -
JavaScript中defer和async的区别
一般情况按照惯例,所有script元素都应该放在页面的head元素中。这种做法的目的就是把所有外部文件(CSS文件和JavaScript文件)的引用都放在相同的地方。可是,在文档的head元素中包含所有JavaScript文件,意味着必须等到全部JavaScript代码都被下载、解析和执行完成以后,才能开始呈现页面的内容(浏览器在遇到body标签时才开始呈现内容)。 对于那些需要很多JavaScr...转载 2018-05-28 23:01:55 · 181 阅读 · 0 评论 -
Less入门介绍
心得在没接触less之前,CSS可能是我最头疼的部分了,因为它往往需要书写大量看似没有逻辑的代码,不方便维护及扩展,不利于重用。而且我还要思考怎样写出组织良好且易于维护的CSS代码。与JavaScript,java等语言不同的是,CSS是一门非程序设计语言,没有变量、函数、作用域等概念。所以这对习惯了OOP思想的我来说,看似没有逻辑的代码意味着繁重的体力劳动。 直到我遇到了less,它在CSS的语...转载 2018-05-30 23:06:16 · 356 阅读 · 0 评论 -
Webpack4.x 文件多入口、多出口、html插件使用(一)
一、多个文件打包在一起(打包成一个文件),例如将这两个js文件打包成一个js文件:(多个入口,一个出口)webpack.config.js配置如下:entry入口,数组形式,按顺序打包,output出口,然后运行:npm run build (备注:在package.json文件scripts中配置如下即可)运行完命令后,如下图,证明打包完成打包好的boundle.js内容如下图:二、多个入口,多...原创 2018-06-20 23:33:25 · 5538 阅读 · 0 评论 -
CSS3绘制各种常见图形(圆形-椭圆形-三角形-五角星...)
圆形-椭圆形-三角形-倒三角形=左三角形-右三角形-菱形-平行四边形- 星形-六角星形-五边形-六边形-八角形-心形-蛋形-无穷符号-消息提示框-吃豆人1制作圆形:要使用CSS来制作一个圆形,我们需要一个div,被给它设置一个ID<div id="circle"></div> 圆形在设置CSS时要设置宽度和高度相等,然后设置border-radius属性为宽度或高度的一半即...转载 2018-06-20 21:57:16 · 11943 阅读 · 0 评论 -
Vue学习笔记一
Vue.js 是什么?Vue.js 是一套构建用户界面的渐进式框架。采用的是自底向上增量开发的设计(与其他重量级框架不同点)。Vue的核心库只关注图层,不仅易于上手,还便于与第三方库或既有项目整合。起步# helloword注意:不能将id = ‘app’写在body或者html中<script src = './vue.js'><script><div id = ...转载 2018-06-12 23:17:45 · 541 阅读 · 0 评论 -
Vue.js入门教程-过滤器
一、过滤器1.1 概述(1)过滤器(Filters)提供了一种 执行文本转换的方法,比如说都转换成大写字母或者几乎做任何我们想做的事情。(2)过滤器既可以在 双花括号插值 中使用,也可以在 v-bind 指令的 表达式 中使用。1.2 注意(1)Vue 中的过滤器 不能替代 methods、computed 或者 watch,因为过滤器 不改变真正的 data,而只是改变渲染的结果,并返回过滤后的...转载 2018-05-29 23:42:23 · 284 阅读 · 0 评论 -
vuex最简单、最详细的入门文档
如果你在使用 vue.js , 那么我想你可能会对 vue 组件之间的通信感到崩溃 。我在使用基于 vue.js 2.0 的UI框架 ElementUI 开发网站的时候 , 就遇到了这种问题 : 一个页面有很多表单 , 我试图将表单写成一个单文件组件 , 但是表单 ( 子组件 ) 里的数据和页面 ( 父组件 ) 按钮交互的时候 , 它们之间的通讯很麻烦 :<!--父组件中引入子组件-->...转载 2018-05-29 23:35:09 · 233 阅读 · 0 评论