生如夏花 炫至茶靡

前言react中，我们通过this.setState()方法去改变自身组件的state，以及子组件的props，然后触发组件重新渲染。那么，当我们setState之后，新的state和旧的state值是一样，页面也会进行重新渲染，这是不必要的，也是损耗性能的。举例写一个demoimport React, { Component } from 'react';//子组件const...

//获取url中的参数function getQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); var result = window.location.search.substr(1).match(reg); if (result != null)...

项目中，一个表单中经常有好几个input，但是微信小程序并不像vue那样实现双向绑定，所以我们要自己去实现当用户输入的时候，实时获取用户输入的值。方法比较简单，就两个步骤。1.wxml <input data-name='form.base.name' bindinput="inputChange" name="text" value="{{ form.base.name }}...

背景目前遇到这么一个问题：我有一个可以向下展开的下来菜单，菜单初始高度大于300px左右，没有超过手机屏幕高度，当展开的时候如果超过手机屏幕高度时让父元素出现滚动条滚动，就是说内容的高度是动态的。描述此前我通过js动态获取屏幕高度，并设置为父元素的max-height。然后设置父元素overflow-y: scroll;起初，我大概的代码布局如下： <div className...

跳转链接：<router-link :to="{path:'libraryDetail/', query:{library_id:data.library_id}}">获取参数：library_id = this.$route.query.library_id;

本次项目基于vue和element-ui，需要在前端用户输入的时候去校验输入的内容中是否含有特殊符号，如果有，则提示用户不支持输入特殊符号。校验规则方法export function checkSpecificKey(str) { var specialKey = "[`~!#$^&*()=|{}':;',\\[\\].<>/?~！#￥……&*（）——|{}...

前言面试中常常被问到，如何使用css来实现一个元素的垂直水平方向上居中，特别是笔试题的时候，这道题目的出现频率还是比较高的，当然，在我们的生活中，也常常会有垂直水平居中的需求。css实现垂直水平居中的三种方案### 1.容器内元素display:inline/inline-block 这种情况就比较容易了，直接设置容器的text-align就可以实现内容元素的水平居中，设置垂直居中...

将@click改为@click.native='logoutHandle';即可监听选项的点击事件。 退出

相信经常使用webpack的人已经深刻体验到自动化工具给我们带来的便利。我自己最常用的是vue,平时就是使用vue-cli或者nuxt构建的项目，聪明的前辈已经为我们配好了项目，可以让我们不必去配置就可以轻松使用。然而在真正的项目中，我们常常需要写一些简单的页面，并不基于vue这样比较大的框架，比如我明天上班就要做的这个公众号介绍，只有几个页面，但是我又希望能使用webpack来辅助我更好完成

在git服务器已经搭建好的情况下，仓库：1-进入你服务器的git目录下：2-使用git init --bare test.git 初始化一个名为test的仓库；3-使用chown -R git:git test.git  将原本ownner为root改为git所有4-本地新建一个空目录，进入这个空目录下，通过： git clone git@0.0.0.0:/var/git/te

有时候我们写的开源的项目，可能有一些打包出来的静态页面需要直观的展示给他人，github上我们除了可以上传源码之外，还可以上传我们的打包出来的静态页面，用户通过访问相应的链接就可以直接访问到这些页面。1--使用git checkout -b gh-pages在你本地切一个gh-pages的分支2-打包你的项目，将打包出来的页面（我这里打包出来的是dist目录,注意如果你的gitignore

鼠标上移图标旋转效果在企业的项目中经常会使用到，特别是顶部导航栏，比如：接下来就是要使用css实现鼠标上移图标旋转效果。 div,img,body{ margin: 0; padding: 0; } .box{ heigh

现在要在微信小程序中实现点击控件修改样式，如下：微信小程序中不支持直接操作dom，要实现这种效果，我们需要通过设置data，然后利用数据和界面的双向绑定来实现它。第一步：在wxss中定义被点击和未被点击的样式，如下：.service_selection .is_checked{ border: 1px solid #FE0002 ; color: #FE0002

1.下载进入mysql官网进行下载，选择适合你的操作系统，我选择的如下：点击download你会进入如下页面，以上两个按钮分别是登录和注册，因为我们一般使用不到收费的功能，所以选择底下的No thanks, just start my download.点击下载即可。下载完成之后解压，放在你目录下，此目录将作为你的安装目录，我的是：D:\software\mys

在my.ini文件中的 [mysqld] 添加 skip-grant-tables这一句。然后net stop mysql停止mysql;然后net start mysql重启即可。

拨打电话：a href="tel:020-8888888">a>打开qq:a class="o-btn" href="http://wpa.qq.com/msgrd?v=3&uin=您的qq&site=oicqzone.com&menu=yes">联系客服a>table消除表格间隙：table

mounted(){this.currentRouterPath=window.location.pathname;},watch: {'$route' (to,from) {consolg.log("当前路由路径",this.$route.path);}}

代码报红对于追求优美代码的强迫症患者来说看着很不舒服，报红如下：控制台中也会有：(Emitted value instead of an instance of Error) : component lists rendered with v-for should have explicit keys. See https://vuejs.org/guide/list.html#key

nuxt.config.js中配置module.exports = {/*** Headers of the page*/head: {title: 'front',meta: [{ charset: 'utf-8' },{ name: 'viewport',content:'width=device-width, initial-scale=1'

1.在/assert目录下建立一个page-transletion.css文件，里面包含过渡动画内容，内容如下：.page-enter-active, .page-leave-active {transition: opacity .5s;}.page-enter, .page-leave-active {opacity: 0;}2.在nuxt.

使用Nuxt构建的项目，默认是开启了ESLint代码检查，我们写的代码格式一点点不符合规范，如空格太多等问题的时候，npm run dev就会报err不能正常运行，这对于新手来说是非常头痛的。当然，我们可以关掉ESLint，只需要在nuxt.config.js中注释掉以下：build: {/*** Run ESLint on save*/// extend

将build/webpack.prod.conf.js 中的module: {rules: utils.styleLoaders({sourceMap: config.build.productionSourceMap,extract: false,usePostCSS: true})},中的extrat改为false，就可以了，这是我改过后的。

使用npm run dev时运行是ok的，但是npm run build打包时iview报错，如下：原因是iview中使用了es6语法，然而uglifyJs是不支持的，打开我们的build/webpack.prod.conf.js文件，可以看到// UglifyJs do not support ES6+, you can also use babel-minify

如果我们git clone的下载代码的时候是连接的https://而不是git@git (ssh)的形式，当我们操作git pull/push到远程的时候，总是提示我们输入账号和密码才能操作成功，频繁的输入账号和密码会很麻烦。解决办法：git bash进入你的项目目录，输入：git config --global credential.helper store

用angular测试请求本地的json数据，请求出错，提示跨域，我的代码如下： angular使用http请求数据 angular使用http请求数据 请求结果：{{resultData}} var module=angular.module("app",[]); module.controller("testCtrl",funct

近期项目中也使用到了Echarts来画图表，也是两个tab切换页面中都存在图表，页面加载完成后都对所有图表进行了初始化和绘制，然而在tab切换中出现了如下动图中的问题：图中可以看到，第一个tab显示是很正常的，但是第二个tab中内容显示不完整。我的解决方式如下：1--在tab导航中加入radio单选按钮并隐藏，当第二个tab被选中的时候，再初始化图表数据

最近在做注册登陆页面，都要涉及到验证11位有效手机号码，这里贴出代码，希望能帮到有这个开发需求的朋友。 function isPoneAvailable($poneInput) { var myreg=/^[1][3,4,5,7,8][0-9]{9}$/; if (!myreg.test($poneInput.val())) {

近期开发遇到一个问题，命名给body设置了宽高，然后给body设置背景，背景仍然会铺满整个屏幕。以下是我的代码： body{ width: 200px; height:200px; margin: 0 auto; background: green;

1.减少http请求1--图片地图2--css sprites3--内联图片4--合并脚本和样式表2.使用内容发布网络--CDN3.添加expires头4.压缩组件5.将样式放在顶部6.将脚本放在底部7.避免css表达式8.使用外部js和css9.减少cdn查找10.精简javascript11.避免重定向12.删除重复脚本13.配置

1.新语义元素：HTML5提供了新的语义元素来明确一个Web页面的不同部分。：描述了文档的头部区域，于定义内容的介绍展示区域：定义导航链接的部分。：定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分，section通常 包含了一组内容及其标题。：定义独立的内容。：定义页面主区域内容之外的内容（比如侧边栏）。：标签规定独立的流内

最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。为了能让旧版本的浏览器正确显示这些元素，可以设置 CSS 的 display 属性值为 block:header, section, footer, aside, nav, main, article, figure