- 博客(53)
- 收藏
- 关注
RSS订阅原创 1rem、1em、1vh、1px各自代表的含义
rem页面所有使用rem单位的长度都是相对于根元素<html>元素的font-size大小。即1rem等于根元素元素的font-size大小。em子元素字体大小的em是相对于父元素字体大小。元素的width/height/padding/margin用em的话是相对于该元素的font-size。vh、vw全称是 Viewport Width 和 Viewport Height，视口的宽度和高度，1vh相当于 视口高度的 1%。pxpx像素（Pixel），相对长度单位。像素px
2021-05-03 11:48:12
3004
转载 双飞翼布局
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>双飞翼布局</
2021-05-03 11:29:28
127
原创 圣杯布局
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>圣杯布局</t
2021-05-03 11:28:46
139
原创 apply()、call()、bind()的区别
Function.prototype.apply()MDN：apply() 方法调用一个具有给定this值的函数，以及以一个数组（或类数组对象）的形式提供的参数。调用有指定this值和参数的函数，返回的是结果，这点与call相同与call()相比接收的参数是参数数组func.apply(thisArg, [argsArray])Function.prototype.call()MDN：call() 方法使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数。调用有
2021-05-03 10:14:51
106
原创 JS 手写深拷贝
var oldObj = { name: '范德彪', age: '43', designation: ['水库浪子','彪记靓汤总经理','彪哥解梦馆'], relationship: { jiefu: '马大帅', girl: '桂英', }}function deepClone(obj) { if(typeof obj !== 'object' || obj == null){ return obj; } let result = unde
2021-05-02 20:26:30
267
原创 VSCode配置vue用户代码片段Snippets
1、在导航栏找到并点击文件>首选项>用户片段2、选择创建什么样的代码片段，以Vue为例3、可以自定义自己的代码片段了，在下面的示例中，当输入vue会提示body中的内容
2020-11-06 17:41:55
1462
原创 VueCLI使用VSCode开发结合ESLint与Vetur格式化代码
1、在使用VueCLI创建项目时选择ESLint校验2、VSCode安装Vetur和ESLint插件3、在setting.json中添加下面几行配置"editor.codeActionsOnSave": { "source.fixAll.eslint": true, },4、对Vetur进行配置，让其不对js代码格式化5、检查ESLint是否启用6、最后，我们可以在项目根目录下的.eslintrc.js中自定义eslint规则...
2020-11-06 13:57:04
379
原创 在微信小程序开发中使用 @antv/wx-f2可视化方案
关于微信小程序使用 npm 安装第三包1、首先我们需要npm安装@antv/wx-f2npm install @antv/wx-f2 --save --production2、在需要使用的页面或组件的json文件中，引入第三方组件{ "usingComponents": { "f2": "@antv/wx-f2" }}3、在wxml中使用组件<view class="container"> <f2 class="f2-chart" onIn
2020-11-01 12:17:21
2440
4
原创 CSS 文字两行显示，超出隐藏
// 两行显示，超出隐藏display: -webkit-box;overflow: hidden;-webkit-box-orient: vertical;-webkit-line-clamp: (2);
2020-10-27 19:14:34
2223
原创 简单的根据浏览器窗口宽度的响应式布局
// 当浏览器窗口宽度大于1000px且小于1200px时的布局样式@media screen (min-width: 1000px) and (max-width: 1200px) { #content { position: relative; width: 20%; background-color: #eeeeee; margin: 0; padding: 0; box-shadow: 0 0 10px 0 #333333; }}..
2020-10-20 20:36:34
510
原创 （VUE）JS判断滚动条滑动到底部加载更多数据，并防止事件多次触发
首先在mounted中添加滚动条scroll监视事件 mounted() { //监视scroll滚动条 window.addEventListener("scroll", this.isRefresh, true); },在isRefresh函数中，当第一次到达底部时我们将isRefreshBool变量变为false（禁止refresh()加载数据函数多次触发），当我们的refresh()函数中请求完成后再将isRefreshBool设为true（允许到达底部执行refr.
2020-10-20 09:26:35
2587
1
原创 微信小程序开发npm安装第三方包
1、初始化项目，在小程序根目录下执行npm init2、npm安装第三方库，例如 antv/wx-f2npm install @antv/wx-f2 --save3、在开发详情的本地配置中勾选使用npm模块4、在工具栏中选择构建npm，完成构建后点击确定5、使用第三方包；打开json文件，引入组件{ "usingComponents": { "f2": "@antv/wx-f2" }}...
2020-10-19 14:58:06
734
原创 CentOS 7 安装MySQL5.7 踩坑集合
[Warning] TIMESTAMP with implicit DEFAULT value is deprecated. Please use --explicit_defaults_for_timestamp server option (see documentation for more details).解决方案：在/etc/my.cnf的[mysqld]配置文件添加：explicit_defaults_for_timestamp=true/usr/local/mysql/bin/my.
2020-10-19 14:36:09
207
原创 Nodejs笔记 path模块
var path = require('path')//动态的获取路径var dirPath = __dirname //当前文件所处目录的绝对路径var filePath = __filename //当前文件的绝对路径var textPath = path.join(__dirname,'text.js') //text.js的绝对路径
2020-10-10 16:45:02
64
原创 JavaScript异步编程 Promise 笔记
var fs = require('fs')var p1 = new Promise(function (resolve, object) { fs.readFile('./a.txt', 'utf8', function (err, data) { if (err) { object("error") } resolve(data.toString()) })})var p2 = new Promise(fun
2020-10-08 21:15:34
55
原创 CSS组合器：“,“逗号，“ “空格，“>“大于号，“+“加号，“~“波浪号
选择器组 A,B匹配A或BA,B{ color:red;}后代选择器 A B匹配A的后代BA B{ color:red;}子选择器 A>B匹配A的一代子节点BA>B{ color:red;}相邻兄弟选择器 A+B匹配A的下一个紧邻的兄弟节点BA+B{ color:red;}通用兄弟选择器A之后的全部兄弟节点BA~B{ color:red;}...
2020-07-04 09:19:55
250
原创 Vue生命周期函数：实例生命周期钩子函数
生命周期 ？：从Vue实例的创建、运行、到销毁期间，伴随着各种各样的事件，这些事件统称为生命周期生命周期钩子？：是指生命周期事件主要的生命周期函数分类：创建期间的生命周期函数：beforeCreate :实例刚在内存中被创建出来，此时,还没有初始化data和methods属性created :实例已经在内存中创建完成 ,此时data和methods已经创建好,此时还没有开始编译模板，这里是最早可以操作data数据和调用methods函数的地方beforeMount :此时已经完成了
2020-05-28 10:26:06
303
原创 Vue.js自定义指令及其钩子函数
对普通 DOM 元素进行底层操作，会用到自定义指令，我们以输入框获取焦点为例：当页面加载时，输入框将获得焦// 注册一个全局自定义指令 `v-focus`// Vue.directive('指令名', {钩子函数} )Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… inserted: function (el) { // 聚焦元素 el.focus() }})// 这里是Vue实例中注册一个局部指令 `v-focu
2020-05-27 18:30:37
971
原创 ES6中新增的字符串补全方法 padStart 和 padEnd
padStart 和 padEnd作用类似，都是当字符串字符串的长度不够时，用特定的字符填充字符串，是字符串长度达到指定的长度；区别在于padStart再字符串前端进行填充，二padEnd再字符串尾部填充padStart 和 padEnd都有两个参数：参数1：指定字符串长度参数2：当长度不足时，指定进行填充的字符例如：var string1 = "1";console.log( string.padStart(2,'0') );// 输出结果为 "01"console.log( st
2020-05-26 16:17:57
544
原创 Vue绑定内联样式：Style 绑定
对象语法：v-bind:style 的对象语法和CSS语法很像，但他其实是一个 JavaScript 对象<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' ,line-height: '50px'}"></div>data: { activeColor: 'red', fontSize: 30}直接绑定到一个样式对象：<div v-bind:style="styleObj
2020-05-26 15:57:19
2889
原创 Vue.js关于绑定 HTML Class 类样式
给 v-bind:class 一个对象，以动态地切换 class：<div v-bind:class="{ active: isActive }"></div><!-- 在对象中传入更多字段来动态切换多个 class --><div v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>这里类active是否生效取决于变量isActive值的真假当 is
2020-05-26 15:30:29
193
1
原创 Vue 自定义按键修饰符与自定义按键修饰符别名
在监听键盘事件时，我们经常需要检查详细的按键。实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：<!-- 只有在 `key` 是 `Enter` 时调用 `vm.add()` --><input v-on:keyup.enter="add()">Vue提供了常用的按键码的别名：.enter.tab.delete (捕获“删除”和“退格”键).esc.space.up.down.left.righ
2020-05-26 11:27:17
578
原创 Vue-CLI 4.0 build打包配置
module.exports = { // 公共路径(必须有的) publicPath: "./", // 输出文件目录 outputDir: "dist", // 静态资源存放的文件夹(相对于ouputDir) assetsDir: "assets", // eslint-loader 是否在保存的时候检查(果断不用，这玩意儿我都没装) ...
2020-05-07 16:53:28
4762
原创 Vue-Cli 4.0创建项目过程
在Vue-CLI4中运行以下命令来创建一个新项目：vue create hello-world然后提示选取一个 preset。可以选默认的包含了基本的 Babel + ESLint 设置的 preset，这里我们选“手动选择特性”来选取需要的特性（键盘上下键即可切换）选择自定义的配置，我一般选择这几个插件按空格键选中取消选择是否使用路由 history routerY选择使...
2020-05-07 16:47:19
2381
原创 Vue项目关闭ESLint + Prettier代码规范
我们用Vue-Cli脚手架新建项目时会选择使用ESLint + Prettier来统一我们的前端代码风格，但这对新手使用有很大困难，严格的格式要求容易出现很多警告和错误，这时最好关闭ESLint + Prettier。在src下新建文件.eslintrc.js，并如下配置：module.exports = { root: true, env: { node:...
2020-05-01 16:00:10
5628
原创 出现警告：warning Replace `'xxx'` with `"xxx"` prettier/prettier，关闭Prettier代码格式化工具
我们用Vue-Cli脚手架新建项目时会选择使用ESLint + Prettier来统一我们的前端代码风格，但这对新手使用有很大困难，严格的格式要求容易出现很多警告和错误，这时最好关闭Prettier。在.eslintrc.js文件中配置关闭Prettier；在rules中增加一行："prettier/prettier": "off"...
2020-05-01 15:52:01
21850
原创 Vue2使用a标签的@click事件函数进行Router编程式导航，跳转后路径错误消失但页面跳转渲染正常，双击后退才能返回前一页面
跳转前路径是：http://localhost:8080/#/HelloWorld/Rogin跳转后路径是：http://localhost:8080/#/页面从Rogin跳转到了Rogon，是正确的但应该的路径是：http://localhost:8080/#/HelloWorld/Rogon我的a标签原来是这样写的：<a @click="changego('/...
2020-04-29 10:07:46
761
原创 Vue-cli 4脚手架Router嵌套路由
1、router/index.js中需要在 VueRouter 的参数中使用 children 配置const router = new VueRouter({ routes: [ { path: '/user/:id', component: User, children: [ { // 当 /user/:id/info匹配成功， ...
2020-04-29 09:36:20
1667
原创 Vue-cli4脚手架开发有关Axios的跨域解决方案
我们常在Vue中用Axios来发送请求，但Axios本身并不能跨域，需要额外的配置1、安装Axios$ npm install axios2、在main.js中导入配置axiosimport Axios from 'axios'Vue.prototype.$axios = Axios3、需要在vue.config.js文件中配置devServer.proxy选项来解决跨域问题...
2020-04-19 10:36:32
2301
2
原创 Vue使用mavon-editor插件解析markdown编辑预览
1、安装mavon-editor插件npm install mavon-editor --save2、在main.js中引入mavon-editor//全局注册import mavonEditor from 'mavon-editor'import 'mavon-editor/dist/css/index.css' //解决编辑器的功能显示问题Vue.use(mavonEditor)...
2020-04-19 10:02:19
5569
12
原创 新版vue-cli 4.2如何引入新字体
1、首先下载tff格式的字体2、在src中新建文件夹common，把下载的tff字体文件放在common中，并在common中新建样式文件font.css进行如下编辑@font-face{ font-family: "newfont"; src: url(./AvantGarde\ Book.ttf); font-weight: normal; font-sty...
2020-04-13 17:26:06
1601
原创 calc()函数 invalid property value 无效的属性值
在前端网页中有时候使用了 calc()函数，出现了invalid property value；比如width:calc(100%-12px);**calc()**函数是一个进行四则运算的函数，在其中的运算符的两侧都要保留一个空格才会生效:width:calc(100% - 12px);...
2020-04-07 15:44:22
1768
原创 通过php存入MySQL8.0文件路径“/”消失问题
把 " \ " 换成 " \\\\ " ，例如 E:\work\space 换成 E:\\\\work\\\\space
2020-03-08 16:15:42
221
原创 Windows平台安装PHP7.3+Apache2.4+MySQL8.0
1、准备安装包Apache2.4下载PHP7.3下载MySQL8下载2、安装PHP7.32.1、解压php7.3压缩包到安装目录2.2、修改D:\Program Files\php-7.3.11目录下配置文件php.ini-development文件名为php.ini并打开进行一下编辑：2.2.1、修改拓展目录extension_dir = "D:/Program Files/ph...
2020-03-08 10:11:47
1722
1
原创 主流消费级固态硬盘SSD接口
2.5英寸SATA接口M.2接口(NVMe协议)M.2接口(SATA协议)mSATA接口(mini-SATA)PCI-E接口
2019-12-03 15:17:09
272
原创 Java实训之航空航班管理系统(连接MySQL数据库)
Plane对象：在Plane对象里定义了飞机的编号id、航班号、目的地、起飞日期。生成了构造方法和toString()方法；以及getting()和setting()方法，但在程序里没用到。package com.hangkong;public class Plane { private int id;//编号 private String planeNum;//航班号 priv...
2019-08-29 20:03:37
2672
2
原创 用java写一个简单的加减乘除计算器
import java.awt.*;import java.awt.event.*;import javax.swing.*;import java.awt.FlowLayout;import javax.swing.*;@SuppressWarnings("unused")class Sumjp { JOptionPane jp = new JOptionPane(); ...
2019-08-02 19:54:49
2472
2
原创 BFS 广搜理解与C语言
#include <iostream>#include <queue>#include <algorithm>#include <string.h>using namespace std;bool vis[201][201];//记录访问过没有 bool取值false和true，0为false，非0为true。int dx[4] =...
2019-05-26 10:01:24
456
原创 HDU 1548 A strange lift 最短路 题解
Problem DescriptionThere is a strange lift.The lift can stop can at every floor as you want, and there is a number Ki(0 <= Ki <= N) on every floor.The lift have just two buttons: up and down.W...
2019-05-22 20:32:01
115
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人