oneheart初心-CSDN博客

原创 React组件通信的几种方式（未完待续）

一、父传子二、子传父三、跨级组件四、兄弟组件兄弟组件通信的方式events子传父传子context代码App.js（父组件）import logo from "./logo.svg";import "./App.css";import React from "react";import About from "./components/About";import Home from "./components/Home";import Child1 from "./comp

2021-02-19 13:49:21 250 2

原创 GIT推送错误error: RPC failed； curl 92 HTTP/2 stream 0 was not closed cleanly: CANCEL (err 8)

情况一Counting objects: 100% (25515/25515), done.Delta compression using up to 4 threadsCompressing objects: 100% (18794/18794), done.error: RPC failed; curl 92 HTTP/2 stream 0 was not closed cleanly: CANCEL (err 8)fatal: the remote end hung up unexpecte

2021-02-07 22:23:23 26217 7

原创解决img和div高度不同的问题（img额外产生的高度）

问题：img在div中会在底部产生额外的空隙<style> div { color: #fff; background-color: blue; } img { background-color: #fff; }</style><body> <div class="content"> <img class="img" src="../../images/nature-1

2020-12-20 00:20:33 2118 1

原创 html元素高度塌陷的几种情况

1. html元素高度塌陷的几种情况子元素浮动（float）绝对定位（absolute）固定定位（fixed）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"> <titl

2020-12-11 10:28:59 323

原创 CSS3之渐变，转换，过渡，动画

1. 渐变1.1 线性渐变linear-gradient()函数<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style&gt

2020-11-16 00:35:17 220

原创 CSS3之选择器

1. 基本选择器<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* 标签选择器 */ div

2020-11-15 20:50:39 375

原创 CSS3之背景和边框

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><style> body { backgrou

2020-11-14 21:22:52 70

原创 HTML5之拖放

1. 常用拖放事件进行拖放操作时需要对放置的元素阻止默认行为。因为浏览器默认阻止拖放。ev.preventDefault()这句通常写在dragover,dragleave,drop绑定的事件中。源元素事件：dragstart 拖放开始drag 正在拖拽dragend 整个拖放过程结束目标元素事件：dragover 拖拽经过目标元素上dragenter 拖拽经过目标元素上dragleave 离开可目标元素drop 已放置在目标元素上2. web API接口DataTran

2020-11-14 20:05:51 90

原创盒子垂直水平居中的七种方法

一、直接及算法1. margin =（父盒子宽度 - 子盒子宽度）/ 2<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style&

2020-11-07 18:00:42 377

原创 HTML5之Canvas旋转和位移

1.实现矩形变色<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #canvas { posi

2020-11-07 15:53:11 518

原创 HTML5之Canvas画布常用方法

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <canvas id="canv

2020-11-05 20:53:14 146

原创 HTML5地理定位，Web存储

一、获取位置信息向navigator.geolocation.getCurrentPosition方法传入一个自定义名称的回调函数(这里是success)，如果获取位置成功，则该回调函数可以接收一个参数(这里自定义名称position)，通过该参数可以获取到详细的地理位置信息。关于回调函数接收的参数（position）：是一个GeolocationPosition对象。该对象有两个二、相关接口1.Geolocation 接口是一个用来获取设备地理位置的可编程的对象，它可以让Web内容访问到设备的地理

2020-11-05 00:00:49 701

原创 JSON.stringify和JSON.parse

JSON是JavaScript标准内置对象。它自带两个函数parse和stringifytypeof JSON // "object"typeof JSON.parse // "function"typeof JSON.stringify// "function"一、JSON.stringifyJSON.stringify()将一个JavaScript对象/值转化为字符串，字符串为JSON格式。()中可以填的内容JSON.stringify('abc') // ""abc""JSON

2020-11-04 22:59:21 746

原创 CSS盒子模型box-sizing属性详解

1.content-boxchrome浏览器默认的盒子属性值。content-box的width和height从content算起，不包含border和padding。2.border-boxIE浏览器默认的盒子属性值。border-box的width和height从border算起,包含border和padding<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8" />

2020-11-03 01:36:57 12079

原创解决IE8浏览器不兼容HTML5的问题

在<head></head>中加入以下注释：IE8及以下版本的浏览器会自动识别该注释，并将其渲染为<script>标签。cdn地址：https://cdn.bootcss.com/html5shiv/

2020-11-02 23:38:56 245

原创 Git提交到Github后中文文字乱码

可能原因：1.编译器使用的字符集非UTF-8格式。（如：VSCode右下角的字符集非UTF-8）2.浏览器使用的字符集非UTF-8格式。（Chrome默认为UTF-8）

2020-11-01 18:42:02 590

原创 ESLINT 报错 Unnecessary use of boolean literals in conditional expression

ESlint报错：Unnecessary use of boolean literals in conditional expression在使用三元运算符时，如果给定的返回的结果是boolean值则会出现这个错误。假设有如下方法：var a = [1,2,3]function fun(array) {return array.length > 0 ? true : false}console.log(fun(a)) // true错误原因：array.length > 0 这

2020-08-04 16:28:06 4565 1

原创 Vue 监听子组件事件的几种方法

1.在Vue实例模板上监听，并调用Vue实例的方法直接使用v-on绑定事件并调用即可。<body> <div id="app"> <button @click="vueSay(0)">组件0</button> </div> <script> new Vue({ methods: { vueSay(num) { console.log('组件' + num +

2020-07-22 00:23:52 5628

原创 webpack 入门知识（二）babel、Vue、Vue router的配置

前置知识ES6中的导入和导出ES6导入模块：import 模块名 from “模块标识符” / import “表示路径”ES6向外暴露成员：export default / exportexport.jsexport default{ name:'name', age:20}export var title = "导出的标题"export var cotent = "导出的内容"export var color = "blue"export default向外暴露成员

2020-07-09 14:54:02 305

原创 Vue 入门基础知识（三）条件渲染和列表渲染

一、条件渲染v-if v-else v-else-if指令用法与if else else if类似。v-showv-show 的元素始终会被渲染并保留在 DOM 中。v-if和v-show的区别v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-if 是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。v-show 总是会渲染元素，并且只是简单地基于 CSS 进行切换（CSS的display

2020-07-06 16:03:38 171

原创 Vue入门基础知识（二）指令、Class与Style绑定、事件处理

一、指令指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。常用指令v-text更新元素的 textContent。如果要更新部分的 textContent，需要使用 {{ Mustache }} 插值。如果值为代码会直接显示代码而不是渲染对应的标签。<span v

2020-07-06 15:56:31 445

原创 Vue入门基础知识（一）Vue的介绍、安装和模板语法

前置知识框架和库框架：是一套完整的解决方案，对项目的侵入性较大，如果需要更换框架，则需要重新架构整个项目。库：提供一个小功能，对项目的侵入性较小，如果某个库无法完成某些需求，可以很容易切换到其他库实现需求。一、Vue介绍与安装vue的特点核心只关注视图层轻量，灵活适用于移动端项目渐进式框架对渐进式的理解声明式渲染组件系统客户端路由（vue-router）大规模状态管理（vuex）构建工具（vue-cli）###安装vue//cdn的方式<script src="

2020-07-06 13:20:50 103

原创 webpack入门知识（一）webpack、webpack-dev-server、html-webpack-plugins和loader的配置

为什么要使用webpack前置知识nrm：提供了一些最常用的NPM包镜像地址，能够让我们快速切换安装包时候的服务器地址。npm install nrm -gnrm ls //查看镜像列表nrm use taobao //使用这个镜像nrm use cnpm //使用这个镜像nrm use npm //使用这个镜像！ nrm只是提供了几个常用地URL地址，并能够让我们在这几个地址之间切换。但是我们每次装包的时候使用的装包工具都是npm。在网页中会引用哪些常见的静态资源？JS

2020-07-03 22:04:42 389

原创数据结构-排序算法-快速排序

快速排序快速排序思想：在排序表中任取一个元素作为分割点。将这个表分成两部分，左边的数小于分割点，右边的数大于分割点，分割点放在中间。用递归分别对两个子表实行以上操作，直到表中只剩一个元素或者为空。#include<stdio.h>/** * @ function QuickSort 用递归将数组排序，每一趟让中心点左边的数小于中心点，右边的大于中心点。最后的结果是从小到大排序。 * @ param a[] 需要排序的数组 * @ param from 需要排序的起始位

2020-06-26 16:48:49 227

原创 Vue利用计算属性和侦听属性实现简易计算器

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="./js/vue.js" type="text/javascript" charset="utf-8"></script> <script src="js/vue-router.js" type="text/javascript

2020-06-24 14:53:30 1821

原创 vue-router 命名视图-嵌套

如果 < router-view >设置了名称，则会渲染对应的路由配置中 components 下的相应组件。一个视图使用一个组件渲染，因此对于同个路由，多个视图就需要多个组件。.parent{ background-color: #aaa; height: 200px;}.child1{ background-color: #FF0000; height: 50px;}.child2{ background-color: #FFFF00; height: 50px;.

2020-06-23 23:29:35 291

原创 vue-router 命名视图-同级

.v-enter, .v-leave-to { opacity: 0; transform: translateX(20px);}.v-enter-active, .v-leave-active { transition: all .3s ease;}<div id="app"> <h1>命名视图-单路由多组件切换</h1> <ul> <li> <router-link to="/">/</route

2020-06-23 21:07:45 138

qq_34466755的博客