![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
文章平均质量分 71
luluan_lin
这个作者很懒,什么都没留下…
展开
-
typescript初探
stringbooleannumberanystring | numbernumber[] - 数组中只存在数字void - 什么都不返回元组 let x: [string, number] x = ['test', 12] // ok x = [12, 'test'] // error接口// interface 约束对象的类型interface Person { name: string; num: number; age?: numb原创 2020-07-08 18:16:53 · 248 阅读 · 0 评论 -
React Hooks 使用详解
React Hooks 使用详解本文是对 16.8 版本之后 React 发布的新特性 Hooks 进行了详细讲解,并对一些常用的代码进行演示,希望可以对需要的朋友提供点帮助。Hooks简介Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。Hooks 初体验import React, { u...原创 2020-02-27 10:05:39 · 594 阅读 · 0 评论 -
深入理解DOM事件机制
DOM事件类DOM事件级别DOM0事件 el.onClick = function() {}DOM2事件 el.addEventListener(‘click’, function() {} , false)false (默认值)在冒泡阶段执行, true代表在捕获阶段执行DOM3事件 el.addEventListener(‘keyup’, function () {},...原创 2020-02-18 19:45:36 · 231 阅读 · 0 评论 -
css盒模型以及BFC详解
css盒模型基本概念: 标准盒子 + IE盒子模型盒模型包含了元素的margin/border/padding/content(元素内容)标准模型与IE模型的区别宽度/高度计算方式不同标准盒子模型 width = content的宽度height = content的高度IE盒子模型 width = content的宽度 + padding + borderheight...原创 2020-02-18 17:36:15 · 630 阅读 · 0 评论 -
VUE 利用 webpack 给生产环境和测试环境配置不同的接口地址
VUE 利用 webpack 给生产环境和测试环境配置不同的接口地址在config/dev.env.js 以及 config/prod.env.js文件进行相应的配置// config/dev.env.js'use strict'const merge = require('webpack-merge')const prodEnv = require('./prod.env')m...原创 2019-10-31 15:05:16 · 1144 阅读 · 1 评论 -
安装React Devtools调试工具
安装React Devtools调试工具的步骤:去git上下载react-devtools文件到本地,react-devtools用npm安装依赖cd ~/Downloads/react-devtools-3npm install安装依赖成功后,打包一份扩展程序npm run build:extension:chrome打包完成之后,~/Downloads/react-dev...原创 2019-10-31 09:58:44 · 528 阅读 · 0 评论 -
揭开React Hooks神秘面纱
hookuseState例子// useState 中的函数只会执行一次function App (props) { const [ count, setCount ] = useState(() => { return props.count || 0 }) return ( <div> 点击次数: { count } ...原创 2019-10-29 16:27:40 · 281 阅读 · 0 评论 -
Javascript 深浅拷贝
深浅拷贝浅拷贝仅仅复制了引用,彼此之间的操作会互相影响Array.prototype.slice()Array.prototype.concat()对于一维Array来说,这两种方法似乎是深拷贝,但当数组为二维甚至多维的时候,只是对数组进行复制引用,所以,Array的slice以及concat方法都是浅拷贝let arr = [1, 2, 3, 4]let arr1 = ...原创 2019-10-24 16:08:46 · 115 阅读 · 0 评论 -
iview组件库中,Form组件里的Input,无法正确绑定on-enter事件
问题描述:FORM表单只有一个input的情况下,按回车会刷新页面iView 版本号^3.4.1操作系统/浏览器 版本号Ubuntu16.04/Chrome 61window/Chrome 61Vue 版本号^2.6.10<template> <Form ref="search-form" :model="searchModel" ...原创 2019-10-23 16:21:56 · 1892 阅读 · 0 评论 -
递归遍历对象 ——过滤对象中为null/undefined/''/[]/{}的属性值
// 过滤对象中为null/undefined/''/[]/{}的属性值 function clearDeep(obj) { if (!obj || !typeof obj === 'object') return const keys = Object.keys(obj) for (var key of keys) { const val = obj[k...原创 2019-10-23 09:34:45 · 3439 阅读 · 0 评论 -
interactjs 使用JavaScript实现拖放、缩放和多点触控手势
interactjs使用JavaScript实现拖放、缩放和多点触控手势InteractJS是一个JavaScript模块,它为最新的浏览器(包括IE8以上版本)增加了拖放、缩放和多点触控手势,并带有惯性和快照功能。这个库的主要目的是替换jQuery UI所提供的功能。 因此,使用InteractJS来编写的web应用在智能手机和平板上会更加易用。 InteractJS是一个轻量级的库,可以...原创 2019-08-12 14:43:10 · 5071 阅读 · 0 评论 -
nrm 快速切换npm 源
nrmnrm 是一个 npm 源管理器查看npm源地址npm config list安装npm install nrm -g --save使用用nrm ls命令查看默认配置,带*号即为当前使用的配置nrm lsnpm ---- https://registry.npmjs.org/cnpm --- http://r.cnpmjs.org/* taobao - https:...原创 2019-08-12 14:22:11 · 165 阅读 · 0 评论 -
vue移动端开发笔记
移动端开发多页面应用特点页面跳转,返回html优点:首屏时间快,搜索引擎效果好缺点:页面切换慢单页面应用特点(vue)页面跳转,js渲染优点:页面切换快缺点:首屏时间稍慢,搜索引擎(SEO)优化效果差服务器端渲染可以完美的解决单页面所遇到的问题Viewport 基础width 控制 viewport 的大小, device-width为设备的宽度init...原创 2019-08-10 18:29:22 · 446 阅读 · 0 评论 -
less以及scss常用函数
onresize 事件会在窗口或框架被调整大小时发生this.$nextTick( () => { window.onresize = function () { analysisChart.resize() }})drawCharts () { let dpr = document.querySelector('html').getAttribute('...原创 2019-07-31 09:58:12 · 680 阅读 · 0 评论 -
sass与less对比学习
区别一:(使用前提)sass基于Ruby语言开发,因此在开发之前必须安装Rubyless只需引入 '.less’文件即可开发区别二:(变量)sass以$定义变量less是以@定义变量//sass$color = #fff;.p { color: $color;}// less@color = #fff;p { color: $color;}区别三:(Mixins)...原创 2018-11-05 14:32:08 · 1241 阅读 · 0 评论 -
常用css样式总结
1.超出显示省略号.title { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }原创 2019-03-19 09:59:41 · 464 阅读 · 0 评论 -
location.href失效/解码(转码)/window对象/flex布局超出显示.../检查对象为空
安卓微信浏览器中window.location.href失效的问题原因:在手机WEB端,click事件会有 200~300 ms的延迟时间,所以请用tap或者touch代替click作为点击事件。最近接手一微信项目,测试功能时,发现跳转在android手机上不动了。iso系统可以正常跳转的。解决方法:window.location.href = url + ‘?v=’ + (new Date...原创 2019-03-28 09:29:28 · 1048 阅读 · 0 评论 -
AngularJS - 自定义指令
angular.module('app', []).directive('myDirective', function() { return { restrict:String, priority:Number, terminal:Boolean, template:String or Template Function, ...原创 2019-05-24 13:49:36 · 139 阅读 · 0 评论 -
AngularJS 之 Factory,Service,Provider
依赖注入的优点各模块之间的解耦,每个部分专注于自己的功能,对象的注入通过容器来完成避免全局对象的污染Provider// 语法糖app.provider('myProvider', function () { this.$get = function () { };});是唯一一种你可以传进 .config()函数的 service。当你想要在 service ...原创 2019-05-27 13:39:37 · 136 阅读 · 0 评论 -
AngularJS 弹出框 $modal
$modal.open(templateUrl:模态窗口的地址template:用于显示htmlscope:一个作用域为模态的内容使用controller:为$modal指定的控制器,该控制器可用$modalInstance注入resolve:定义一个成员并将他传递给$modal指定的控制器,相当于routes的一个reslove属性,如果需要传递一个objec对象,需要使用angula...原创 2019-05-23 11:06:25 · 1875 阅读 · 0 评论 -
vue init webpack my-project 时描述项目未响应
vuejs初始化项目时报错解决方案vue init webpack my-project 时,未响应// 命令行? project name my-project? project description (A Vue.js project)在网上百度了下解决方案,都说是node版本太高引起的。但事实却不是这样解决方案根据vue2.0官网重新执行以下操作npm install ...原创 2019-06-21 17:00:48 · 630 阅读 · 0 评论 -
Vue.js 2.0入门笔记
MVVM模式对于MVVM的理解面向dom开发(MVC)面向数据进行开发(MVVM)M层V层VM层vue实现:Object.defineProperty()虚拟DOM生命周期函数beforeCreate(创建前)created (创建后) data数据初始化beforeMount(载入前) <div id="app"></div>在挂载...原创 2019-06-27 17:10:19 · 182 阅读 · 0 评论 -
Haml基础入门
Haml官网它是一个命令行工具。需要先安装Ruby语言,再安装Hamlgem install hamlHaml可以通过三种方式使用:从命令行运行Haml,将haml文件一次性转为html文件haml input.haml output.html作为Ruby on Rails的插件在Gemfile文件中添加gem "haml"作为独立的Ruby模块haml的简化规则如下...原创 2019-07-05 14:36:35 · 3696 阅读 · 0 评论 -
jQuery解决$.trim()无效问题
jQuery中自带$.trim(),使字符串前后无空白符。但有的时候,使用此函数依旧存在留白。这样你就要考虑,你即将处理的留白符,是否真的是空白符。这就要求你查看此空白符的Unicode。如果它的Unicode是12288,那么就依据以下处理方式解决:str.replace(String.fromCharCode(12288), ‘’)...原创 2018-11-02 09:03:08 · 2120 阅读 · 0 评论