- 博客(96)
- 资源 (1)
- 收藏
- 关注
原创 React.js实现一个todo-list案例
一、创建项目首先通过create-react-app todo-list命令创建一个名为todo-list的项目,前提是react基本环境已安装好。结构目录如下所示:二、新建父组件如上图所示,在src下新建views文件夹,在该文件夹下添加todo-list.js文件。代码如下所示:import React, { Component, Fragment } from 'react';import '../css/style.css';import TodoItem from '..
2020-06-17 10:54:08 365
原创 leetcode算法题8:字符串转换整数 (atoi)
题目:请你来实现一个atoi函数,使其能将字符串转换成整数。首先,该函数会根据需要丢弃无用的开头空格字符,直到寻找到第一个非空格的字符为止。接下来的转化规则如下:如果第一个非空字符为正或者负号时,则将该符号与之后面尽可能多的连续数字字符组合起来,形成一个有符号整数。假如第一个非空字符是数字,则直接将其与之后连续的数字字符组合起来,形成一个整数。该字符串在有效的整数部分之后也可能会存在多余的字符,那么这些字符可以被忽略,它们对函数不应该造成影响。注意:假如该字符串中的第一个非空格字符不是..
2020-05-14 17:58:59 283
原创 leetcode算法题7:整数反转
题目:给出一个 32 位的有符号整数,你需要将这个整数中每位上的数字进行反转。示例1:输入: 123输出: 321示例 2:输入: -123输出: -321示例 3:输入: 120输出: 21注意:假设我们的环境只能存储得下 32 位的有符号整数,则其数值范围为[−231,231− 1]。请根据这个假设,如果反转后整数溢出那么就返回 0。解析:方法一:转字符串反转var reverse = function (x) { x=x.toStr...
2020-05-14 16:25:39 238
原创 微信小程序wxParse插件解析html
1、在app.json中添加插件 "plugins": { "wxparse": { "version": "1.0.10", "provider": "wx5d60c080635009b1" } }2、在需要使用的页面.json文件中添加组件{ "navigationBarTitleText":"商品详情", "...
2020-04-07 17:58:17 506
原创 跨域请求携带cookie的实现
跨域时,前端向服务器发起请求时,需要将XMLHttpRequest 对象的withCredentials 属性设置为 true,如下所示: $.ajax({ type: "POST", url: url, data:{}, dataType: '...
2020-04-03 16:30:28 628
原创 vue中的全屏事件,按esc退出全屏
1、vue页面中根据是否全屏判断当前显示icon图标,isFull为true时表示全屏,默认值为false,并绑定click事件 <div class="screen-icon-box"> <i :class="isFull?'el-icon-crop':'el-icon-full-screen'" @click="fullScreenEven...
2020-03-23 21:54:56 2663
原创 Vue通过递归实现多级菜单展示
1、模拟后台返回的菜单JSON数据如下data.json文件{ "data": { "router": [ { "path": "", "name": "Home", "component": "Layout", "r...
2020-03-17 11:27:32 2573
原创 git本地仓代码推送到远程仓报错:refusing to merge unrelated histories
当从远程仓库拉取代码到本地时,报错拒绝合并不相关的历史,如下图所示:发生上图原因是由于本地仓库和远程仓库实际上是独立的两个仓库,可以通过使用命令:$git pull origin master --allow-unrelated-histories合并两个独立启动仓库的历史。上面是将远程仓库的文件拉取到本地仓库了。接着将本地仓库的提交推送到远程github仓库上:$...
2020-03-11 22:32:02 291
原创 vue项目打包后字体文件路径出错的解决办法
打包后,css里加载的font文件路径变成了:rootpath/static/css/static/fonts,而期望的应该是rootpath/static/fonts。修改方式:在build/utils的ExtractTextPlugin.extract里加上 publicPath: '../../':// generate loader string to be used with ...
2019-06-27 09:21:32 2171
原创 vue-cli webpack打包开启Gzip报错
在根目录config/index.js中build内找到productionGzip: false,把false改为true。与productionSourceMap 刚好相反。 然后npm run build。此时会提示找不到"Cannot find module 'compression-webpack-plugin'"。 npm install --save-de...
2019-05-26 21:56:49 449
原创 vue视图刷新的几种方法
更新数组时,如果直接通过下标修改数组属性的话,vue页面不会更新。通过以下几个方法更新数组push()、pop()、shift()、unshift()、splice()、sort()时,vue才能检测到数组更新。如果想直接通过下标修改数组的话,可使用vm-set 方法来通知vue更新了这个数组。语法为:vm.$set( target, key, value );数组修改:Vue.se...
2019-05-19 20:09:49 5349
原创 微信小程序开发步骤(二)页面搭建
在上一章中讲述了如何创建项目,这一章主要讲述小程序中代码目录架构,以及创建新页面。一、目录架构1、app.js是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。调用框架提供的丰富的 API,如本例的同步存储及同步读取本地数据。//app.jsApp({ onLaunch: function () { // 展示本地存储能力 v...
2019-05-07 22:00:58 557
原创 时间戳转为年月日时分秒格式
1、小于10前面补0function add0(m){ return m<10?'0'+m:m }2、转为年-月-日 时:分:秒格式function timeFormat(ts){ var time = new Date(ts); var y = time.getFullYear(); var m = time.getMonth()+1; ...
2019-04-29 23:22:34 2476
原创 百度地图的常用事件和方法
1、滚轮缩放 map.enableScrollWheelZoom(); //启用滚轮放大缩小,默认禁用 map.enableContinuousZoom(); //启用地图惯性拖拽,默认禁用2、拖拽 map.enableDragging(); //开启拖拽 map.enableInertialDragging(); //开启惯性拖拽3、事...
2019-04-29 22:56:21 5136
原创 vue项目报错Uncaught SyntaxError: Unexpected token <
vue项目在引入第三方依赖的 JS 文件时,报如下错误:Uncaught SyntaxError: Unexpected token <检测后发现原来我的 JS 文件是放在 /src/utils 文件夹下的,但引入 /src 和 /static 的文件是有区别的。解决办法是将第三方依赖的 JS 文件放到 /static/utils 目录下。因为src目录下的资源只能impo...
2019-04-23 09:26:23 1464
原创 微信小程序开发步骤(一)项目创建
一、申请账号进入小程序注册页注册自己的小程序帐号,如下图所示:登录小程序后台,可在菜单 “设置”-“开发设置” 看到小程序的AppID了 。二、安装开发工具前往开发者工具下载页面,根据自己的操作系统下载对应的安装包进行安装。下载完成之后,打开小程序开发者工具,用微信扫码登录开发者工具。三、建立项目新建项目选择小程序项目,选择代码存放的硬盘路径,填入刚刚申请...
2019-04-21 23:01:29 1283
原创 已知某一点坐标、线段长度和旋转角度,求另一点坐标
/** 已知某一点坐标,旋转角度,长度,求另一点坐标 */export const calculateCoordinatePoint = (originPoint, degree, len) => { let rotate = (degree - 90 + 360) % 360; //这里是因为一开始以y轴下方为0度的 let point = { x:...
2019-03-31 21:39:06 11151 2
原创 计算某一点绕另一点旋转一定角度后的坐标
/** * 计算某一点旋转后的坐标点 * @param point * @param degree */export const calculateRotate = (point, degree) => { let x = point.x * Math.cos(degree * Math.PI / 180) + point.y * Math.sin(degree * Ma...
2019-03-31 21:22:31 7380
原创 高阶函数之sort
1、排序算法是在程序中经常用到的算法。无论使用冒泡排序还是快速排序,排序的核心是比较两个元素的大小。通常规定,对于两个元素x和y,如果认为x < y,则返回-1,如果认为x == y,则返回0,如果认为x > y,则返回1(升序)。这样,排序算法就不用关心具体的比较过程,而是根据比较结果直接排序。如下所示:var arr = [10, 20, 4, 6];arr.sort(fu...
2019-03-23 21:20:59 394
原创 Vue和Element-UI做一个简单的登录页面
如下所示,是vue+ElementUI写的一个登录页面:Login.vue部分<template> <el-form :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left" label-width="0px" class="d
2019-03-01 11:09:19 7385 4
原创 Element组件之Form表单
这里主要介绍Element组件中的Form表单,它是由输入框、选择器、单选框、多选框等控件组成,用以收集、校验、提交数据。典型表单:在 Form 组件中,每一个表单域由一个 Form-Item 组件构成,表单域中可以放置各种类型的表单控件,包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker。行内表单:设置inline属...
2019-03-01 11:08:13 12757 1
原创 vue中的 ref 和 $refs
1.ref 加在普通的元素上,用this.$refs.refName 获取到的是dom元素2.ref 加在子组件上,用this.$refs.refName 获取到的是组件实例,可以使用组件的所有方法。 <el-form :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left" label...
2019-03-01 09:48:16 486
翻译 vue中的 render: h => h(App) 具体含义
render: h => h(App)是下面内容的缩写:render: function (createElement) { return createElement(App);}进一步缩写为(ES6 语法):render (createElement) { return createElement(App); }...
2019-03-01 09:33:47 762
原创 let 和 const 命令与var的区别
1、基本用法ES6 新增了let和const命令,用来声明变量。它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效。{ let a = 10; var b = 1;}a // ReferenceError: a is not defined.b // 1而const声明一个只读的常量。一旦声明,常量的值就不能改变。对于const来说,只声明不赋值,...
2019-02-28 15:50:59 292
原创 vue项目中配置title图标和文字
在项目的index.html 中引入图片:<head> <title>标题</title> <link rel="icon" href="./favicon.ico" type="image/x-icon"></head>其中,favicon.ico图片在项目根目录下。接着就是修改 buil
2019-02-28 11:25:06 2548
原创 VUE+ElementUI开发后台功能,隐藏左侧菜单栏再展开有白框问题解决方法
在methods里的collapse 函数里增加监测左边导航栏offsetWidth值为0则修改,如下所示://折叠导航栏 collapse:function(){ this.collapsed=!this.collapsed; var menuWidth = document.getElementById('menuClass'); if(menuWidth.o...
2019-02-28 09:32:04 10327
原创 vue中引入font-awesome报错
npm install --save font-awesome 之后在main.js中这样引入import 'font-awesome/css/font-awesome.css'报错如下图 This dependency was not found:* font-awesome in ./src/main.jsTo install it, you can run...
2019-02-27 14:45:49 3072 1
转载 2018年最值得关注的30个Vue开源项目
NO.1Element:一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库 [Github star:22004]。NO.2iView:一套高质量的UI组件库 [Github star:12175]。NO.3Best-resume-ever:用Vue和LESS简单、快速建立许多漂亮的简历,并创建你最好的简历。[Github star:8839]。NO....
2019-02-26 09:07:51 391
原创 npm install报错之解决方法
npm install时报错如下图所示:D:\Vue\demo>npm installnpm WARN deprecated browserslist@2.11.3: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.npm WARN deprecated bfj...
2019-02-24 20:33:32 4172
原创 浏览器工作原理之树的构建
一、DOM树的构建 DOM 输出的树,也就是解析树,是由DOM元素及属性节点组成的。DOM是文档对象模型的缩写,它是html文档的对象表示,作为html元素的外部接口供js等调用。树的根是“document”对象。 DOM和标签基本是一一对应的关系,例如,如下的标签:<html><body><p>Hello DOM</p...
2019-01-27 22:30:17 262
原创 浏览器工作原理
一、浏览器的主要功能浏览器的主要功能是将用户选择的web资源呈现出来,它需要从服务器请求资源,并将其显示在浏览器窗口中,资源的格式通常是HTML,也包括PDF、image及其他格式。用户用URI(Uniform Resource Identifier统一资源标识符)来指定所请求资源的位置。 HTML和CSS规范中规定了浏览器解释html文档的方式,由W3C组织对这些规范进行维护,W3C是...
2019-01-27 22:16:13 211
原创 http和https介绍
一、基本概念http: 超文本传输协议,是互联网上应用最为广泛的一种网络协议, 是一个客户端和服务器端请求和应答的标准(TCP), 用于从WWW服务器传输超文本到本地浏览器的传输协议, 它可以使浏览器更加高效,使网络传输减少。https: 是以安全为目标的HTTP通道,简单讲是HTTP的安全版, 即HTTP下加入SSL层,HTTPS的安全基础是SSL, 因此加密的详细内容就需要SSL。 h...
2019-01-13 21:48:57 424
原创 CSS之水平垂直居中布局的实现方法
前端HTML部分代码如下:<div class="parent"> <div class="child">Test</div></div>里面的容器和外面的容器宽高是不确定的,实现这三种布局的方法如下:一、水平居中布局1、inline-block+text-align这种方法下IE6、IE7不支持inline-block...
2019-01-13 21:24:55 207
原创 apply, call和bind的区别
三者都可以把一个函数应用到其他对象上,注意不是自身对象。apply和call是直接执行函数调用,bind是绑定,执行需要再次调用。 apply和call的区别是apply接受数组作为参数,而call是接受逗号分隔的无限多个参数列表。function Person() { }Person.prototype.sayName() { alert(this.name); } ...
2018-12-31 19:33:54 158
原创 Vue的生命周期
1、什么是Vue的生命周期?Vue 实例从创建到销毁的过程,就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程,称之为 Vue 的生命周期。2、简介beforeCreate(创建前):在数据观测和初始化事件还未开始 。created(创建后):完成数据观测,属性和方法的运算, 初始化事件,$el属性还没有显示出来。beforeMou...
2018-12-31 19:25:12 164
原创 cookies,sessionStorage 和 localStorage 的区别
cookie是网站为了标示用户身份而储存在用户本地终端(Client Side)上的数据(通常经过加密)。 cookie数据始终在同源的http请求中携带(即使不需要),且会在浏览器和服务器间来回传递。sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。 存储大小: cookie数据大小不能超过4k。 sessionStorage和localStora...
2018-12-31 19:12:29 140
原创 clone
题目:实现一个函数clone,可以对JavaScript中的5种主要的数据类型(包括Number、String、Object、Array、Boolean)进行值复制。方法一:Object.prototype.clone = function() {var o = this.constructor === Array ? [] : {};for (var e in this) {o[...
2018-12-31 19:04:31 231
转载 前端资源汇集
1、综合类:前端知识体系 http://www.cnblogs.com/sb19871023/p/3894452.html 前端知识结构 https://github.com/JacksonTian/fks Web前端开发大系概览 https://github.com/unruledboy/WebFrontEndStack Web前端开发大系概览-中文版 h...
2018-12-05 08:33:15 189
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人