WEB前端框架
文章平均质量分 93
WEB前端框架教程
一笑程序猴
工欲善其事,必先利其器
展开
-
web前端高级React - React从入门到进阶之使用PropTypes进行类型检查
第二部分:React进阶系列文章目录第一章:React从入门到进阶之初识React第一章:React从入门到进阶之JSX简介第三章:React从入门到进阶之元素渲染第四章:React从入门到进阶之JSX虚拟DOM渲染为真实DOM的原理和步骤第五章:React从入门到进阶之组件化开发及Props属性传值第六章:React从入门到进阶之state及组件的生命周期第七章:React从入门到进阶之React事件处理第八章:React从入门到进阶之React条件渲染第九章:React从入门到进阶之原创 2021-01-29 17:24:07 · 5643 阅读 · 0 评论 -
web前端高级React - React从入门到进阶之Render Props
第二部分:React进阶系列文章目录第一章:React从入门到进阶之初识React第一章:React从入门到进阶之JSX简介第三章:React从入门到进阶之元素渲染第四章:React从入门到进阶之JSX虚拟DOM渲染为真实DOM的原理和步骤第五章:React从入门到进阶之组件化开发及Props属性传值第六章:React从入门到进阶之state及组件的生命周期第七章:React从入门到进阶之React事件处理第八章:React从入门到进阶之React条件渲染第九章:React从入门到进阶之原创 2021-01-28 12:24:22 · 5496 阅读 · 0 评论 -
web前端高级React - React从入门到进阶之高阶组件
第二部分:React进阶系列文章目录第一章:React从入门到进阶之初识React第一章:React从入门到进阶之JSX简介第三章:React从入门到进阶之元素渲染第四章:React从入门到进阶之JSX虚拟DOM渲染为真实DOM的原理和步骤第五章:React从入门到进阶之组件化开发及Props属性传值第六章:React从入门到进阶之state及组件的生命周期第七章:React从入门到进阶之React事件处理第八章:React从入门到进阶之React条件渲染第九章:React从入门到进阶之原创 2021-01-27 14:58:04 · 5616 阅读 · 0 评论 -
web前端高级React - React从入门到进阶之Refs&DOM以及Refs转发
第二部分:React进阶系列文章目录第一章:React从入门到进阶之初识React第一章:React从入门到进阶之JSX简介第三章:React从入门到进阶之元素渲染第四章:React从入门到进阶之JSX虚拟DOM渲染为真实DOM的原理和步骤第五章:React从入门到进阶之组件化开发及Props属性传值第六章:React从入门到进阶之state及组件的生命周期第七章:React从入门到进阶之React事件处理第八章:React从入门到进阶之React条件渲染第九章:React从入门到进阶之原创 2021-01-21 20:29:10 · 5557 阅读 · 0 评论 -
web前端高级React - React从入门到进阶之组件的懒加载及上下文Context
第二部分:React进阶系列文章目录第一章:React从入门到进阶之初识React第一章:React从入门到进阶之JSX简介第三章:React从入门到进阶之元素渲染第四章:React从入门到进阶之JSX虚拟DOM渲染为真实DOM的原理和步骤第五章:React从入门到进阶之组件化开发及Props属性传值第六章:React从入门到进阶之state及组件的生命周期第七章:React从入门到进阶之React事件处理第八章:React从入门到进阶之React条件渲染第九章:React从入门到进阶之原创 2021-01-19 22:04:07 · 5585 阅读 · 0 评论 -
web前端高级React - React从入门到进阶之组件的组合使用
系列文章目录第一章:React从入门到进阶之初识React第一章:React从入门到进阶之JSX简介第三章:React从入门到进阶之元素渲染第四章:React从入门到进阶之JSX虚拟DOM渲染为真实DOM的原理和步骤第五章:React从入门到进阶之组件化开发及Props属性传值第六章:React从入门到进阶之state及组件的生命周期第七章:React从入门到进阶之React事件处理第八章:React从入门到进阶之React条件渲染第九章:React从入门到进阶之React中的列表与key原创 2021-01-18 23:32:29 · 5606 阅读 · 0 评论 -
web前端高级React - React从入门到进阶之组件的状态提升
系列文章目录第一章:React从入门到进阶之初识React第一章:React从入门到进阶之JSX简介第三章:React从入门到进阶之元素渲染第四章:React从入门到进阶之JSX虚拟DOM渲染为真实DOM的原理和步骤第五章:React从入门到进阶之组件化开发及Props属性传值第六章:React从入门到进阶之state及组件的生命周期第七章:React从入门到进阶之React事件处理第八章:React从入门到进阶之React条件渲染第九章:React从入门到进阶之React中的列表与key原创 2021-01-16 17:38:20 · 5539 阅读 · 0 评论 -
web前端高级React - React从入门到进阶之表单以及受控组件和非受控组件
系列文章目录第一章:React从入门到进阶之初识React第一章:React从入门到进阶之JSX简介第三章:React从入门到进阶之元素渲染第四章:React从入门到进阶之JSX虚拟DOM渲染为真实DOM的原理和步骤第五章:React从入门到进阶之组件化开发及Props属性传值第六章:React从入门到进阶之state及组件的生命周期第七章:React从入门到进阶之React事件处理第八章:React从入门到进阶之React条件渲染第九章:React从入门到进阶之React中的列表与key原创 2021-01-10 23:09:45 · 5566 阅读 · 0 评论 -
web前端高级React - React从入门到进阶之列表元素及元素中key的作用
系列文章目录第一章:React从入门到进阶之初识React第一章:React从入门到进阶之JSX简介第三章:React从入门到进阶之元素渲染第四章:React从入门到进阶之JSX虚拟DOM渲染为真实DOM的原理和步骤第五章:React从入门到进阶之组件化开发及Props属性传值第六章:React从入门到进阶之state及组件的生命周期第七章:React从入门到进阶之React事件处理第八章:React从入门到进阶之React条件渲染文章目录系列文章目录一、列表元素的渲染二、列表组件的封装三原创 2021-01-08 18:14:59 · 5578 阅读 · 1 评论 -
web前端高级React - React从入门到进阶之React条件渲染
系列文章目录第一章:React从入门到进阶之初识React第一章:React从入门到进阶之JSX简介第三章:React从入门到进阶之元素渲染第四章:React从入门到进阶之JSX虚拟DOM渲染为真实DOM的原理和步骤第五章:React从入门到进阶之组件化开发及Props属性传值第六章:React从入门到进阶之state及组件的生命周期第七章:React从入门到进阶之React事件处理文章目录系列文章目录一、React元素的条件渲染二、元素变量三、与运算符&&四、三目运算符五、原创 2021-01-08 15:55:11 · 5546 阅读 · 3 评论 -
web前端高级React - React从入门到进阶之React事件处理
系列文章目录第一章:React从入门到出门之初识React第一章:React从入门到出门之JSX简介第三章:React从入门到出门之元素渲染第四章:React从入门到出门之JSX虚拟DOM渲染为真实DOM的原理和步骤第五章:React从入门到出门之组件化开发及Props属性传值文章目录系列文章目录一、State二、在类组件中使用生命周期方法正确的使用State一、State本节中我们将介绍React组件中的一个新的概念:“State”。在前面元素渲染一章中我们用函数组件做了一个时钟的例子,原创 2021-01-07 19:31:24 · 5594 阅读 · 0 评论 -
web前端高级React - React从入门到进阶之state及组件的生命周期
系列文章目录第一章:React从入门到出门之初识React第一章:React从入门到出门之JSX简介第三章:React从入门到出门之元素渲染第四章:React从入门到出门之JSX虚拟DOM渲染为真实DOM的原理和步骤第五章:React从入门到出门之组件化开发及Props属性传值文章目录系列文章目录持续更新中。。。。。...原创 2021-01-06 18:00:45 · 5545 阅读 · 0 评论 -
web前端高级React - React从入门到进阶之组件化开发及Props属性传值
系列文章目录第一章:React从入门到出门之初识React第一章:React从入门到出门之JSX简介第三章:React从入门到出门之元素渲染第四章:web前端高级React 文章目录系列文章目录一、React组件的定义及分类二、函数式组件三、类组件四、组件的渲染五、组合组件六、提取组件七、Props 的只读性一、React组件的定义及分类组件允许我们可以将UI拆分成一个个独立的可复用的代码片段,并且可以对每个片段进行独立构思和管理。从概念上讲,组件类似于JavaScript中的函数,它接收原创 2021-01-06 17:50:23 · 5648 阅读 · 2 评论 -
web前端高级React - React从入门到进阶之元素渲染
五、使用 JSX 指定子元素在JSX中,如果标签内没有内容我们可以使用单闭合标签当然JSX的标签中还可以包含多层嵌套的后代标签,这时就需要使用双闭合标签了const element = <img src={user.photo} /> //单闭合标签//双闭合标签const body = <div> <h1>Hello</h1> <h2>Good morning world</h2> </div>原创 2021-01-05 21:18:21 · 5568 阅读 · 0 评论 -
web前端高级React - React从入门到进阶之JSX简介
系列文章目录文章目录系列文章目录一、pandas是什么?二、使用步骤1.引入库2.读入数据总结一、pandas是什么?示例:pandas 是基于NumPy 的一种工具,该工具是为了解决数据分析任务而创建的。二、使用步骤1.引入库代码如下(示例):import numpy as npimport pandas as pdimport matplotlib.pyplot as pltimport seaborn as snsimport warningswarnings.filterwa原创 2021-01-05 18:59:48 · 5710 阅读 · 0 评论 -
web前端高级React - React从入门到进阶之初识React
系列文章目录第一章:React从入门到出门之初识React.文章目录系列文章目录一、React是什么?二、React的特点二、React的安装及使用四、项目目录介绍五、总结一、React是什么?React官方给出的解释是:React是一个声明式,高效且灵活的用于构建用户界面的JavaScript库。使用React可以将一些简短、独立的代码片段组合成赋值的UI界面,这些代码片段被称为“组件”简单来说:React就是一个JavaScript库,它可以用来构建UI界面,特点是:声明式、高效、灵活二原创 2021-01-05 18:54:50 · 5757 阅读 · 0 评论 -
web前端高级React - React从入门到进阶之JSX虚拟DOM渲染为真实DOM的原理和步骤
JSX虚拟DOM渲染为真实DOM的原理和步骤分析与思考前面我们已经学习了JSX的一些基本语法,通过前面的学习我们知道:在js文件中通过调用ReactDOM.render()方法,并传入一堆JSX代码(可以理解为虚拟DOM)。当程序运行时这些JSX代码就会被转换为真实的DOM元素然后呈现在页面上;那么这些JSX虚拟DOM是如何被转换为真实DOM的呢,原理又是怎样的呢?当我们用react脚手架创建好一个项目后,会生成一个package.json文件,在这个文件的最下面有这样一段代码"babel原创 2020-12-30 18:39:43 · 5915 阅读 · 0 评论 -
web前端高级webpack - webpack常见面试题及手写loader和plugin
webpack常见面试题有哪些常见的Loader?你用过哪些Loader?css-loader:加载 CSS,支持模块化、压缩、文件导入等特性style-loader:把 CSS 代码注入到 JavaScript 中,通过 DOM 操作去加载 CSSpostcss-loader:扩展 CSS 语法,使用下一代 CSS,可以配合 autoprefixer 插件自动补齐 CSS3 前缀-** babel-loader**:把 ES6 转换成 ES5file-loader:把文件输出到一个文件原创 2020-12-30 09:58:24 · 6097 阅读 · 0 评论 -
web前端高级VUE - vue项目的优化总结包括代码层面及webpack层面
vue项目优化总结vue代码层面data 尽可能扁平化处理(vue数据劫持方面的优化)不需要修改的数据使用object.freeze冻结处理v-if与v-show分场景使用v-if:通过控制元素的添加和删除来实现显示和隐藏v-show:直接控制元素的display来实现元素的显示和隐藏如果需要频繁控制元素的显示和隐藏则建议使用v-show如果需要根据用户角色来控制某元素是否显示则建议使用v-ifv-for循环时,注意key的作用,设置唯一key值可避免元素复用对于没有使用v原创 2020-12-30 09:20:29 · 5672 阅读 · 0 评论 -
web前端高级webpack - webpack的手动配置及多入口多出口打包
webpack配置入口(entry)及出口(output)配置前面一篇文章已经介绍了webpack的四个核心概念:入口,出口,loader和插件,下面围绕这四个核心概念,我们来对webpack进行手动配置默认情况下我们运行在webpack打包时,webpack会把src下面的index.js作为入口文件;打包后会默认生产一个dist目录,里面生成一个main.js文件如果我们想手动指定入口文件和输出目录及文件,那么可以手动修改配置文件的方式来实现在webpack项目下新建一个webpa原创 2020-12-29 23:52:17 · 5868 阅读 · 1 评论 -
web前端高级webpack - 初识webpack 的安装运行及核心概念
初识webpack本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。这是官网给出的解释通俗的讲:webpack就是一个打包工具,通过webpack可以将js、css、sass、scss、jpg、png等等文件分门别类打包生成一个js/css/jpg等文件原创 2020-12-29 19:45:39 · 5486 阅读 · 0 评论 -
web前端高级VUE - vue2.0与vue3.0双向数据绑定的实现原理及区别
vue2.0实现双向数据绑定原理vue2.0中通过利用Object.defineProperty方法监听属性的get和set方法来实现对数据的双向绑定,看如下示例:<!DOCTYPE html><html><head><style> </style></head><body>Name: <span id="txtName"></span><br /><i原创 2020-10-12 14:36:28 · 6608 阅读 · 0 评论 -
web前端高级VUE - vuex中的state/mutations/actions/modules/getters的基本解析及基于代码分析vuex的原理
vuexstate用于存放组件间互相通信的属性值。原则上state中的属性只能在各个组件之间使用,而不能修改,如果要修改需要在mutations中修改mutations这里存放的都是一些函数,用于修改state中的属性值这里的函数中只接收两个参数:state和options如果某组件中需要修改state中的属性值,则需在该组件中用this.$store.commit(‘方法名’, 参数)的方式来调用,即需要用commit方法来调用mutations中的函数原创 2020-12-25 10:40:28 · 5573 阅读 · 1 评论