- 博客(31)
- 资源 (6)
- 收藏
- 关注
RSS订阅原创 React: setState解析
作用更新 State 中的数据因为 React 不允许直接更改 state 中的数据，所以引入了 setState() 方法。当调用 setState 时，会重新执行 render 函数，进而根据最新的 State 来创建 ReactElement 对象，以此实现对 DOM 的更新这是用于更新用户界面以响应事件处理器和处理服务器数据的主要方式用法setState(updater, callback)通过 this.setState() 进行调用setState 异步更新constructo
2020-07-01 17:30:22
238
原创 两行CSS代码实现瀑布流
/*分几列*/column-count: 3;/*不留白*/break-inside: avoid;/*列间距，可有可无，默认30px*/column-gap: 20px;其他CSS属性自行设置
2020-06-30 15:48:58
232
原创 CSS Flex布局
定义Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性用法任何一个容器都可以指定为Flex布局.box{ display: flex;}行内元素也可以使用Flex布局.box{ display: inline-flex;}设为Flex布局后，子元素的float、clear和vertical-align属性将失效概念采用Flex布局的元素为Flex容器，容器的所有子元素为Flex项目容器有两根轴，主轴（main axis
2020-05-17 16:55:57
196
原创 前端路由和 VueRouter
前端路由核心：改变url，但页面不进行整体的刷新，即不向后台发请求如何实现通过修改hash方式实现location.hash通过H5中的history实现history.pushState(data, title, url); //这种方式可以返回之前的页面history.replaceState(data, title, url); //这种方式无法返回之前的页面，...
2020-04-28 16:57:28
156
原创 vue中使用watch实现父子组件双向绑定
在子组件中使用watch进行双向绑定先实现父组件向子组件传值，子组件使用props进行数据的接收因为Vue规定props中的数据不能随意改动，所以需要将props中的数据本地化，具体方法是在data中定义新属性,将props中的数据赋值给新属性props:{ number: Number },data(){ return{ childNum: this.nu...
2020-01-13 11:44:33
1594
原创 ES6：let和const的使用及注意点
块级作用域在ES5中只有全局作用域和函数作用域，ES6中用let命令新增了块级作用域，使外层作用域无法访问到内层作用域，避免了变量泄漏为全局变量带来的麻烦，而且在块级作用域中不存在变量提升。一对大括号{}内的区域是块级作用域的作用范围，包括判断语句和循环语句中的大括号（如if语句和for循环）。另外，在块级作用域中可以声明函数，但应该避免这样做，因为会产生浏览器解析和语法规则不一致的情况（具...
2020-01-03 16:37:09
550
原创 vue生命周期函数
在vue中，共有8种生命周期函数beforeCreate() —— 实例创建前 created() ——实例创建完成 beforeMount() ——模板渲染之前 mounted() ——模板渲染完成 beforeUpdate() ——数据更新之前 updated() ——数据更新完成 beforeDestroy() ——实例销毁之前 destroyed() ——实...
2019-10-14 17:02:15
282
4
原创 JSONP跨域的原理及实现
JSONP是一种解决跨域问题的方法，并不是一种数据格式（不同于JSON），是一种绕过同源策略实现跨域获取数据的解决方案，是一种非正式传输协议一、同源策略：要实现跨域，必须知道什么是同源策略？同源策略是一种安全策略，所有支持JavaScript的浏览器都会使用同源策略同源是指协议、端口、域名相同，不同源将无法请求到对应数据一个网址：http://www.abc.com/page...
2019-07-18 15:50:11
837
转载 SVG图像入门
推荐阮一峰老师的《SVG图像入门教程》：http://www.ruanyifeng.com/blog/2018/08/svg.html写的非常详细，通俗易懂！
2019-06-27 10:35:06
163
原创 在Html显示拼音的方法
<ruby>标签，一般配合 <rt> 标签或<rp> 标签使用<ruby>前端小学生<rt>qiánduāndàlǎo</rt></ruby>定义：<ruby>被用来展示东亚文字注音或字符注释，<rp>定义当浏览器不支持 "ruby" 元素时显示的内容如果要使拼音和...
2019-06-21 10:44:49
5237
转载 JavaScript RegExp对象（正则表达式）总结
什么是正则表达式？正则表达式是对字符串操作的一种逻辑公式，用事先定义好的一些特定字符、及这些特定字符的组合，组成一个字符串规则，用来匹配符合规则的字符串。常在注册界面以及个人信息填写时会用到。RegExp是正则表达式（regular expression）的缩写如何声明正则表达式？1.规则（pattern）写在两个斜杠 / / 之间，属性（attributes）写在第二个斜杠后面...
2019-06-13 16:12:32
487
原创 JS异步加载的三种方法
JavaScript默认是同步加载（又称阻塞模式），这种模式在加载js文件时，会影响后续页面的渲染，一旦网速不好，整个页面将会等待js文件的加载，从而不进行后续页面的渲染，这也是提倡将<script>标签放在</body>标签之前的原因。另外，有些js文件是按需加载的，用的时候加载，不用时不必加载。所以引入了异步加载模式（非阻塞模式），即浏览器在下载执行js文件时，会同...
2019-06-12 09:12:53
5041
原创 css中px，em，rem的区别
pxpx，指像素，相对长度单位，是相对于屏幕分辨率而言的特点：比较稳定和精确 IE无法调整使用px作为单位的网页的字体大小emem，相对长度单位，相对于其父级定义的大小特点：em的值并不是固定的 em会继承父级元素的字体大小，如果父级没有设置，会继续向上寻找，直到浏览器的默认字体大小举例：<style> body{ font...
2019-06-10 11:27:07
445
原创 DocumentFragment
定义：创建一个新的空白的文档片段let fragment = document.createDocumentFragment();一般用法：将元素追加到 fragment 中，再将 fragment 追加到DOM树上，并且 fragment 被自身子元素代替,即DOM树中不会显示 fragment, 只显示 fragment 中的元素var ulinfo = document.cr...
2019-05-28 11:12:22
876
2
原创 JS中的数据类型
数据类型：JS中的数据类型分为两种：基本数据类型和引用数据类型基本数据类型：Number、Boolean、String、undefined、null、Symbol (es6中新增)引用数据类型：Object、Array、Function、Date、RegExp 等区别：讲区别之前，需要先了解堆( heap )和栈( stack )，堆和栈都是一种内存的分配方式栈：在栈内存...
2019-05-22 10:53:02
135
原创 JavaScript 中的继承方式
1. 属性拷贝继承//创建父级对象var parent = { name: 'xiaoming', age: '40', sex: 'male', showName: function(){ console.log(this.name); }}//创建子级对象var child = {};//通过遍历将父级对象的属性和方法...
2019-05-10 17:25:57
131
原创 ES6 中的 Set 和 Map 数据结构
SetSet 这种数据结构类似于数组，不同的是，Set 成员的值都是唯一的，不能有重复的值Set 本身是一个构造函数，用 new Set（）生成const arr = [ 1, 1, 2, 2, 3, 3 ]; const set = new Set(arr);console.log(set); // 1, 2, 3Set 结构的实例具有的属性：- Set.pro...
2019-05-07 17:03:10
170
原创 JavaScript中的原型和原型链
什么是原型？原型（prototype）是function对象的一个属性，它定义了构造函数制造出的实例对象的公共祖先。通过同一个构造函数生产出的对象，可以继承该原型的属性和方法，原型本质上也是对象。什么是原型链？所有对象（Object除外）都有一个隐式原型属性：__proto__（前后都是两个下划线），属性值为它的构造函数的prototype的属性值。当查找某个对象的属性时，如果这...
2019-04-26 16:52:55
373
原创 JavaScript中的预编译
预编译函数预编译（发生在函数执行前）创建AO对象（Activation Object） 将函数中的形参和变量声明作为AO对象的属性名，值为undefined 将实参赋值给相对应的形参，即实参和形参相统一 寻找函数体中的函数声明，并将函数名作为AO对象的属性名，值为相对应的函数体全局预编译创建GO对象（Global Object） 将全局中变量声明作为GO对象的属性名，值为...
2019-04-15 15:51:35
189
原创 SQL语句总结
SQL：SQL是结构化查询语言的缩写，用来访问和操作数据库系统DDL语句：允许用户创建、删除、修改表。通常由数据库管理员执行DML语句：允许用户提添加、删除、修改、更新数据DQL语句：允许用户查询数据基本查询语句：select * from <表名>条件查询语句：select * from <表名> where <条件表达式>条件...
2019-02-20 16:05:14
142
1
原创 主流浏览器及其内核
浏览器 内核IE trident，俗称IE内核Chorme（谷歌） 以前是 webkit 内核，现在是 blink 内核Firefox（火狐） GeckoOpera（欧朋） 以前是 presto 内核，现在是 bl...
2019-01-07 17:22:47
397
1
原创 Vue中非父子组件传值的方式
只需三个步骤：1.创建一个公共的js文件（如vueEvent.js），引入并实例化Vue，然后暴露这个实例。//创建vueEvent.jsimport Vue from 'vue'var vueEvent = new Vue();export default vueEvent 并在参与传值和接收值的组件中，引入vueEvent2.在传值的组件中，通过vueEvent...
2018-12-06 17:15:53
959
1
原创 &和&&、| 和 || 的区别
&和&&相同之处：&和&&都表示：符号两端必须同时为真，最后的结果为真；其中一端为假，则最后的结果为假不同之处：用&时，左端为假，还需要继续判断右端真假；用&&时，左端为假，则不需要判断右端真假，即右端不需要进行运算| 和 ||相同之处：| 和 || 都表示：符号两端中有一端为真时，最后的结果为...
2018-12-04 16:08:06
2277
原创 Vue中父子组件传值的方式
父组件向子组件传值父组件调用子组件时，在标签上绑定动态属性<template> <div id='parent'> <v-child :title='title' :run='run'></v-child> </div></template><script>impor
2018-11-21 10:29:38
333
1
原创 如何通过vue-cli（脚手架）创建一个vue项目
首先，你的电脑上必须要有node环境，最新的node安装包自带NPM,通过NPM来安装vue-cli安装vue-cli：在命令行敲入如下代码：npm install -g vue-cli安装成功后，可通过vue list 进行查看创建项目：在你想要创建项目的位置输入如下代码：vue init webpack vuedemo01(项目名)接下来会出现如下界面（...
2018-10-30 10:42:38
305
1
原创 vue2.0全部引入element-ui2.x版本报错的解决方法
在用vue2.0全部引入element-ui2.x版本时，会发生如下报错大致意思是element-ui包里的字体文件解析错误。我们只需要在vue项目中找到webpack.config.js中修改如下部分：在test里加上 | woff | ttf 既可解决...
2018-10-25 09:52:33
3128
1
原创 CSS权重
CSS权重，从高到低依次为：!important infinity（无穷大）行内样式 1000ID选择器 100类选择器(class)|属性|伪类 10标签选择器|...
2018-10-20 19:01:11
176
原创 什么是DOM？
DOM（Document Object Model）的缩写，即文档对象模型。是针对XML并经过扩展用于HTML的应用程序编程接口（API）所以DOM本质上是一种接口（API)，是专门操作网页内容的API标准DOM把整个页面映射为一个多层节点结构，HTML或XML页面中的每个组成部分都是某种类型的节点。借助DOM提供的API，开发人员可以删除、添加、替换或修改任何节点...
2018-10-16 21:37:25
17814
原创 DIV高度自适应浏览器高度方法
*{ margin: 0; padding: 0;}html, body{ width: 100%; height: 100%;}div{ position: absolute; top: 0; left: 0; width: 100%; min-height: 100%; height: auto; ...
2018-10-15 15:48:14
35992
1
原创 CSS中实现文字两端对齐的方法，登陆注册界面经常用到
在写登陆或注册界面时，经常会遇到文字两端对齐(word中有类似对齐方式)的问题，如下图：用户名和密码并没有两端对齐，那么该怎样处理其实只需要两行CSS代码就可以解决：关键两行是：text-align:justify; text-align-last:justify;如果是行内标签的话，再添加一个display:inline-block;即可最终效果图如下：希望对大...
2018-08-29 22:31:11
3439
2
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人