熊宗的博客

toFixed [MDN](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed)toFixed() 方法使用定点表示法来格式化一个数值。一、保留小数点后两位四舍五入export function NumFilter (value) { // 截取当前数据到小数点后两位 let realVal = parseFloat(value).toFixed(2)

方法一：el-input “type=number“ 隐藏上下箭头/deep/ input::-webkit-inner-spin-button { -webkit-appearance: none !important;}/deep/ input[type='number'] { -moz-appearance: textfield !important;}方法二：事件控制（兼容）1.只允许输入整数或小数只保留小数点后两位<el-input size="small" o

处理：1.主要是鼠标触发提示框导致的，可设置tooltip: { triggerOn: ‘click’ }2.设置tooltip{ animation: false, }

一.经典示例var data = [ { name: "所有物品", children: [ { name: "水果", children: [{name: "苹果", children: [{name: '青苹果'}, {name: '红苹果'}]}] }, { name: '主食', children: [

// rem等比适配配置文件// 基准大小const baseSize = 1let rem;// 设置 rem 函数function setRem () { // 当前页面宽度相对于 1920宽的缩放比例，可根据自己需要修改。 const scaleX = document.documentElement.clientWidth / 1920 const scaleY = document.documentElement.clientHeight / 1080 // 需要取缩放.

main.js 中的 Vue.config.productionTip = false上面这行代码的意义，是阻止 vue 在启动时生成生产消息提示。如果没有这行代码，或者设置为true，控制台就会多出这么一段代码:You are running Vue in development mode.Make sure to turn on production mode when deploying for production.大概意思就是：您正在开发模式下运行Vue。在部署以进行生产时，请确.

逻辑分辨率：320*480  《==》 物理分辨率：640*690            最小字号：12px逻辑分辨率：320*658  《==》 物理分辨率：640*1136          最小字号：12px逻辑分辨率：375*667  《==》 物理分辨率：750*1334          最小字号：14px(13.5px)逻辑分辨率：414*736  《==》

前言HTML5 的 web Storage 存储方式有两种：localStorage 和 sessionStorage。这两种方式都是通过键值对保存数据，存取方便，不影响网站性能。他们的用法相同，存储时间不同。localStorage 的数据保存在本地硬件上，可以永久保存，可以手动调用api清除数据。sessionStorage 保存在 session 对象中，会在浏览器关闭时

最近在研究页面渲染及web动画的性能问题，以及拜读《CSS SECRET》（CSS揭秘）这本大作。本文主要想谈谈页面优化之滚动优化。主要内容包括了为何需要优化滚动事件，滚动与页面渲染的关系，节流与防抖，pointer-events:none 优化滚动。因为本文涉及了很多很多基础，可以对照上面的知识点，选择性跳到相应地方阅读。滚动优化的由来va

正文前言：之前分享过很多bootstrap常用组件，包括表格、表单验证、文件上传、复选下拉框、弹出框等。这段时间，博主又收藏了一些好用的组件（有些在项目中已经用起来了），经过两天的时间，已经整理出了一部分，本着“好东西要与人分享”的原则，今天还是来点福利，将博主收藏的东西分享出来，供需要的园友参考。组件大部分都是些开源组件，也有部分是博主自己在网上找到然后改写出来的效果，可能不尽如人意，有

本文翻译自Make-Your-React-Components-Pretty。欢迎转载，注明出处。本文从属于笔者的Web前端入门与最佳实践 中的React入门与最佳实践系列，同类型文章还包括React 代码风格约定。在Walmart Labs的产品开发中，我们进行了大量的Code Review工作，这也保证了我有机会从很多优秀的工程师的代码中学习他们的代码风格与样式。在这篇博文里我

VNode在刀耕火种的年代，我们需要在各个事件方法中直接操作DOM来达到修改视图的目的。但是当应用一大就会变得难以维护。那我们是不是可以把真实DOM树抽象成一棵以JavaScript对象构成的抽象树，在修改抽象树数据后将抽象树转化成真实DOM重绘到页面上呢？于是虚拟DOM出现了，它是真实DOM的一层抽象，用属性描述真实DOM的各个特性。当它发生变化的时候，就会去修改视图。但

普及：浏览器的兼容性问题，往往是个别浏览器（没错，就是那个与众不同的浏览器）对于一些标准的定义不一致导致的。俗话说：没有IE就没有伤害。贴士：内容都是自己总结的，不免会出现错误或者bug，欢迎更正和补充，本帖也会不断更新。Normalize.css不同浏览器的默认样式存在差异，可以使用 Normalize.css 抹平这些差异。当然，你也可以定制属于自己业务的 reset.

忘记了是怎么开始用的ST，应该是在网上看到别人推荐才用到吧，用了有一年多了。在windows下是绝对的神器，Notepad++之类的无可比拟，前端必备的敲码工具，大量便捷的快捷键跟丰富神器的插件，相当不错，推荐给你。安装Sublime Text 3官网 http://www.sublimetext.com/3选择对应的版本安装。完事后，要安装一个基础的、必备的包管理：Pac

编程这么多年，要是每次写遍历代码时都用 for 循环，真心感觉对不起 JavaScript 语言~对象遍历为了便于对象遍历的测试，我在下面定义了一个测试对象 obj。测试对象/ 为 Object 设置三个自定义属性（可枚举）Object.prototype.userProp = 'userProp';Object.

《Vue 2.5 发布了》我们很高兴宣布 Vue 2.5 Level E 的发布！本次发布包括多个功能提升并且我们推荐你查看发布说明来获取完整详细信息。 在这篇文章中，我们将重点介绍一些更重要的的变化：更好的 TypeScript 集成，更好的错误处理，更好地支持单文件组件中的函数式组件以及与环境无关的服务端渲染。《别了，Firebug！》

来自：GitHub - opendigghttps://github.com/opendigg/awesome-github-vue如有好文章投稿，请点击 → 这里了解详情UI组件element ★13489 - 饿了么出品的Vue2的web UI工具套件Vux ★8133 - 基于Vue和WeUI的组件库

一、什么是Ajax缓存原理？Ajax在发送的数据成功后，会把请求的URL和返回的响应结果保存在缓存内，当下一次调用Ajax发送相同的请求时，它会直接从缓存中把数据取出来，这是为了提高页面的响应速度和用户体验。当前这要求两次请求URL完全相同，包括参数。这个时候，浏览器就不会与服务器交互。二、Ajax缓存的好处这种设计使客户端对一些静态页面内容的请求，比如图片，c

怎么做前后端分离？大方向就是 后端专注于：后端控制层（Restful API） & 服务层 & 数据访问层； 前端专注于：前端控制层（Nodejs） & 视图层 本人认为的前后端分离模式应该是这样，当然这不一定正确：1、项目设计阶段，前后端架构负责人将项目整体进行分析，讨论并确定API风格、职责分配、开发协助模式，确定人员配备；设计确定后，前后端人员...

我尝试用jQuery控制HTML5视频，两个视频分别在两个tab中，我希望点中tab后，该tab里的视频可以立即播放，而另外tab里的视频能够停止。我的代码是这样的：123$('#playMovie1').click(function(){$('#movie1').play();});

Vue2 加了reader选项后, 再加上几种构建方式, 开局方式真是各种五花八门, 这里列几种常见的, 说说注意点我们先建立一个 app.vue 来当入口组件, 即所有页面都会以这个组件为模板 (下面代码中无特别说明, App 即指下面这个组件)  <div id="app">    <img src="./assets/log

移动端弹窗插件第二版，包括常见的 alert、confirm、toast、notice 四种类型弹窗，支持 jQuery 和 Zepto 库。特性支持常见的 alert、confirm、toast、notice 四种类型弹窗可选择使用 IOS 或者 Material Design 风格的弹窗可自定义按钮的文字、样式、回调函数，支持多个按钮多个弹窗状态改变回调函数

前言HTML5 的 web Storage 存储方式有两种：localStorage 和 sessionStorage。这两种方式都是通过键值对保存数据，存取方便，不影响网站性能。他们的用法相同，存储时间不同。localStorage 的数据保存在本地硬件上，可以永久保存，可以手动调用api清除数据。sessionStorage 保存在 session 对象中，会在浏览器关闭时

前言HTML5 中提供的文件API在前端中有着丰富的应用，上传、下载、读取内容等在日常的交互中很常见。而且在各个浏览器的兼容也比较好，包括移动端，除了 IE 只支持 IE10 以上的版本。想要更好地掌握好操作文件的功能，先要熟悉每个API。FileList 对象和 file 对象HTML 中的 input[type=”file”] 标签有个 multiple 属性，允许用户

面试对基础比较看重，然后需要你有两三个比较好的项目，一面重视面试者对前端基础的把握，还要手写代码，不过不难，二面部门的leader面，这一面比较难，面试官会对你的项目细节进行深挖，所以说项目要牛逼一点，最后还会有一道逻辑题，三面是HR面，如果你想进大公司的话，下面这些技术是肯定要掌握的：html5，css3，JavaScript，略懂一点jQuery源码，Node.

Cookies定义：让网站服务器把少量数据储存到客户端的硬盘或内存，从客户端的硬盘读取数据的一种技术；下载与引入:jquery.cookie.js基于jquery；先引入jquery，再引入：jquery.cookie.js；下载：http://plugins.jquery.com/cookie/12<script

setTimeoutsetTimeout()方法用于在指定的毫秒数后调用函数或计算表达式。setTimeout(function(){    console.log('hello')},1000)这段代码将会在1s后在控制台出‘hello’，setTimeout只运行一次，也就是说设定的时间到后就触发运

由于图片的加载是在dom加载完成之后进行的，于是，在手机端浏览网页时，经常会看到页面刚打开时很多内容叠在一起，当图片加载完成后，页面会由于图片加载完成出现明显的抖动针对这个问题，有以下几种解决方案媒体查询+pxremvmpadding媒体查询+px@mediascreenand(max - width:

在做H5项目时，需要在横竖屏变化时，做一些处理。毫无疑问，需要使用orientationchange来监听横竖屏的变化。方案1 orientationchange事件// 监听 orientation changeswindow.addEventListener("orientationchange",function(event)

匹配符 *、**、！、{}gulp.src('./js/*.js')              // * 匹配js文件夹下所有.js格式的文件gulp.src('./js/**/*.js')           // ** 匹配js文件夹的0个或多个子文件夹gulp.src(['./js/*.js','!./js/index.js

当我们在路由里面配置成以下代理可以解决跨域问题proxyTable: {            '/goods/*': {                target:'http://localhost:3000'            },            '/users/*': {        

CSS3弹性盒子(Flexible Box 或 Flexbox)，是一种用于在页面上布置元素的布局模式，使得当页面布局必须适应不同的屏幕尺寸和不同的显示设备时，元素可预测地运行。对于许多应用程序，弹性盒子模型提供了对块模型的改进，因为它不使用浮动，flex容器的边缘也不会与其内容的边缘折叠。浏览器对Flexbox的支持越来越好。使用它可以轻松实现一些复杂的UI用户界面，不需要任何的CSS或

定义：延迟加载也称为惰性加载，即在长网页中延迟加载图像。用户滚动到它们之前，视口外的图像不会加载。这与图像预加载相反，在长网页上使用延迟加载将使网页加载更快。在某些情况下，它还可以帮助减少服务器负载。举个例子来说明，当打开淘宝首页的时候，只有在浏览器窗口里的图片才会被加载，当你滚动首页向下滑的时候，进入视口内的图片才会被加载，而其它从未进入视口的图像不会也不会加载。那么延迟加载有什么好

移动端日期选择组件，压缩后只有几KBUsageimport：    import Picker from 'picker.min.js'    @import"picker.css"     直接引入：    <link href="picker.css"rel="stylesheet">

简介和 Lazy Load 一样，Echo.js 也是一个用于图像延迟加载 JavaScript。不同的是 Lazy Load 是基于 jQuery 的插件，而 Echo.js 不依赖于 jQuery 或其他 JavaScript 库，可独立使用。并且 Echo.js 非常小巧，压缩后不足 1KB。在线演示及下载在线演示本地下载兼容性Echo.js 使用

写在前面接着前面的移动端效果的研究，这次来看看picker选择器的实现原理移动端效果之Swiper代码看这里：github核心解析基本HTML结构<!--    说明：    1. 类 picker-3d 是为了提供3d视角，如果不需要可以去掉    2. 类 picker-sl

SVG 全称是 Scalable Vector Graphics，即，矢量图。在 Web 中使用 SVG 可以解决位图放大失真的问题。首先，不要把 SVG 和 CSS，Canvas，HTML 搞混。他们之间并没有你中有我，我中有你的关系。SVG 是通过 XML 的形式写在 HTML 文档中的。如何书写<svg x="0px"y="0px"

正文javascript中的this和函数息息相关，所以今天，我就给大家详细地讲述一番：javascript函数中的this一谈到this，很多让人晕晕乎乎的抽象概念就跑出来了，这里我就只说最核心的一点——函数中的this总指向调用它的对象，接下来的故事都将围绕这一点展开（提醒前排的筒子们准备好茶水和西瓜，我要开始讲故事啦！！）【故事】有一个年轻人叫”迪斯”（thi

关于Vue.jsVue.js是一款MVVM框架，上手快速简单易用，通过响应式在修改数据的时候更新视图。Vue.js的响应式原理依赖于Object.defineProperty，尤大大在Vue.js文档中就已经提到过，这也是Vue.js不支持E8 以及更低版本浏览器的原因。Vue通过设定对象属性的 setter/getter 方法来监听数据的变化，通过getter进行依赖收集，而每个se

什么是JSONP？先说说JSONP是怎么产生的：其实网上关于JSONP的讲解有很多，但却千篇一律，而且云里雾里，对于很多刚接触的人来讲理解起来有些困难，着用自己的方式来阐释一下这个问题，看看是否有帮助。1、一个众所周知的问题，Ajax直接请求普通文件存在跨域无权限访问的问题，甭管你是静态页面、动态网页、web服务、WCF，只要是跨域请求，一律不准。2、不过我们又发现