- 博客(32)
- 收藏
- 关注
RSS订阅原创 配置 Webpack（ webpack.config.js ）
/** * 处理项目 * 项目根目录创建一个 webpack.config.js 配置文件 * 需要下载webpack和webpack-cli依赖（webpack@4.41.6 webpack-cli@3.3.11） */const { resolve } = require('path') // reslove用来拼接绝对路径const HtmlWebpackPlugin = require('html-webpack-plugin')const { CleanWebpackPlugin }
2022-01-20 10:16:50
9703
原创 了解 Webpack（ 简介 ）
文章目录一、webpack 是什么二、核心概念2.1 零配置2.2 配置文件2.3 Entry2.4 Output2.5 Mode2.6 Loader2.7 Plugins2.8 Chunk2.9 Bundle三、环境搭建四、配置及打包一、webpack 是什么webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。在 webpack 看来, 前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理。它将根据模块的依赖关系进行静态分析，打
2022-01-20 09:55:23
964
原创 使用 Vue 实例（ 全局 API ）
文章目录『 总览 』『 Vue.extend 』『 Vue.nextTick 』『 Vue.set 』『 Vue.delete 』『 Vue.directive 』『 Vue.filter 』『 Vue.component 』『 Vue.use 』『 Vue.mixin 』『 Vue.compile』『 Vue.version 』『 总览 』Vue.extend(options) // 通过继承一个 option 对象来创建一个 Vue 实例Vue.nextTick(
2022-01-19 17:24:48
1276
原创 配置 Vue 实例（ 路由 ）
客户端中的路由，实际上就是 DOM 元素的显示和隐藏。当页面中显示 home 内容的时候，about 中的内容全部隐藏，反之也是一样。客户端路由有两种实现方式：基于 hash 和基于 html5 history api。一、基本概念1.1 route（单条路由）定义每一条路由const indexRoute = { path: '/index', component: Index }const userRoute = { path: '/user', component: User }1.2
2021-10-27 09:53:37
1117
原创 抓包工具（ Charles ）
文章目录一、简介二、环境三、配置3.1 截取 PC 端网络请求3.2 截取移动端网络请求3.2.1 PC 端配置3.2.1.1 设置代理3.2.1.2 安装证书3.2.1 移动端配置3.2.1.1 设置代理3.2.1.2 安装证书3.3 解决乱码问题一、简介Charles 通过将自己设置成系统的网络访问代理服务器，使得所有的网络访问请求都通过它来完成，从而实现了网络封包的截取和分析。除了在做移动开发中调试端口外，Charles 也可以用于分析第三方应用的通讯协议。配合 Charles 的 SSL 功能
2021-08-20 14:34:15
236
原创 React.js（函数式组件）
一般，在一个文件中，我们应该只写一个类组件，其他子组件最好是函数式组件，但是用 javascript 实现的函数式组件不能访问 this.ref 和 this.state ，而且也没有生命周期钩子函数，所以在 typescript 中官方还提供了 React.FC<> 来创建函数式组件，它是 typescript 中的一个泛型，这个泛型提供了：userState 实现 this.state 以及 this.setState()useEffect 实现 componentWillU
2020-09-09 09:44:39
3570
原创 React.js（优化项目结构——组件）
文章目录一、简介二、创建2.1 函数式组件（无状态）2.2 类组件（有状态）三、通讯3.1 逐层通讯3.1.1 父→子（推荐）3.1.2 子→父3.1.3 路由3.2 集中式管理（临时）3.2.1 Node.js Events模块3.2.2 状态管理一、简介组件是 React 的核心、精髓。组件有输入（props）、输出（render）以及自身状态（state）二、创建2.1 函数式组件（无状态） 该方式是为了创建纯展示组件，这种组件只负责根据传入的 props 来展示，不涉及到要 state
2020-09-08 16:54:08
443
原创 栅格布局（ 栅格 ）
文章目录一、开启栅格布局（display）——父容器二、配置行和列（grid-template-rows/grid-template-columns）——父容器三、配置行和列（grid-template）——父容器四、控制网格项的位置与大小（grid-row/grid-column）——子元素五、网格区域命名（grid-template-areas——父容器&&grid-area——子元素）一、开启栅格布局（display）——父容器栅格布局能将网页分成简单属性的行和列；Grid(网格)
2020-07-20 09:19:03
10625
原创 # 剑指前端（前端入门笔记系列）—— Ajax
文章目录一、介绍1.1 优缺点1.2 XHR1.2.1 属性1.2.2 方法二、封装2.1 ajaxGet2.2 ajaxPost2.3 jsonp一、介绍 Ajax是一种能够向服务器请求额外的数据而无需写在页面的技术，它能带来更好的用户体验，改变了以往“单击，等待”的交互模式，可以实现无刷新加载页面。【注】其实ajax可以运行在非服务器环境，但是因为某些原因，ajax请求的文件，必须在服...
2020-01-17 13:37:38
293
原创 AMap（地图组成与名词解释）
一、组成使用高德地图 JS API 创建的地图通常由这几部分组成：地图容器（Container） 即在准备阶段所创建的指定了id的div对象，这个div将作为承载所有图层、点标记、矢量图形、控件的容器。图层（Layers） 图层是指能够在视觉上覆盖一定地图范围，用来描述全部或者部分现实世界区域内的地图要素的抽象概念，一幅地图通常由一个或者多个图层组成。如上图中处于整个地图容器最下...
2020-01-10 11:25:59
5232
原创 AMap（创建基础地图）
实现代码<!doctype html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="initial-scal...
2020-01-10 11:14:32
2858
原创 AMap（高德官方图层）
实现代码：<!doctype html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="initial-sca...
2020-01-10 11:13:22
3571
原创 # 剑指前端（前端入门笔记系列）——Promise
文章目录一、简介1.1 问题场景1.2 优化方案1.3 作用1.4 组成二、详解2.1 开启方式2.2 核心方法一、简介 Promise 是异步编程的一种解决方案：从语法上讲，promise是一个对象，从它可以获取异步操作的消息；从本意上讲，它是承诺，承诺它过一段时间会给你一个结果。promise有三种状态：pending(等待态)，fulfiled(成功态)，rejected(失败态)；状...
2019-12-18 16:35:16
173
原创 实用样式（ loading ）
<!doctype html><html><head><meta charset="utf-8"><title>Loading</title> <style> *, *:before, *:after { box-sizing: border-box; margin: 0; padding: 0; } body { background: black; padding-top:80px;} .co
2019-10-28 12:42:42
269
原创 智能布局（ 弹性盒 ）
文章目录一、开启弹性盒布局（display）——父容器二、伸缩换行 (flex-wrap)——父容器三、排列方式(flex-direction)——父容器四、伸缩流方向与换行(flex-flow)——父容器五、主轴横向对齐 (justify-content)——父容器六、主轴纵向对齐 (align-content)——父容器七、侧轴对齐（align-items/align-self）——父容器/子...
2019-10-27 20:44:57
781
原创 Vue.js（全家桶）
文章目录一、vue-cli（脚手架）1.1 安装1.2 项目结构1.3 项目结构详解1.4 创建项目二、vue-dev-tools（调试工具）三、vue-router（路由）3.1 安装3.2 配置示例3.3 渲染示例3.4 跳转示例3.4.1 声明式跳转3.4.2 编程式跳转3.4.3 接收参数和数据3.5 导航守卫3.5.1 全局守卫3.5.2 路由独享的守卫3.5.3 组件内的守卫四、vue...
2019-10-04 21:27:00
810
原创 Vue.js（组件）
文章目录一、简介二、创建2.1 定义2.2 注册(拼装)2.2.1 全局2.2.2 局部2.3 调用2.4 综合性案例三、通讯（传值）3.1 逐层传递3.1.1 父→子（推荐）3.1.2 子→父3.1.3 兄弟→兄弟3.1.4 爷→孙3.1.5 路由（vue-router）3.2 集中式管理（临时）3.2.1 订阅发布模式3.2.2 公共总线（vue）3.2.3 $root(vue)3.2.4 状...
2019-09-28 18:14:16
292
原创 使用 Vue 实例（指令 | 修饰符）
文章目录一、 指令1.1 更新元素的文本内容1.2 更新元素的HTML内容1.3 条件指令1.4 循环指令1.5 事件绑定1.6 属性绑定1.7 在表单上创建双向数据绑定1.8 插槽1.9 不编译，原样输出1.10 编译完成后再显示1.11 只渲染元素和组件一次二、修饰符2.1 .sync修饰符一、 指令指令系统是 Vue 的一大特色，DOM 的接管首先是由浏览器来完成的，浏览器不能识别指令，从而避开浏览器的接管，然后转入 Vue 的接管，指令里面可以写语句，它是一种特殊的 HTML 自定义属性，用来操
2019-09-18 11:50:11
356
原创 # 剑指前端（前端入门笔记系列）——设计模式
文章目录一、设计模式1.1 什么是设计模式1.2 为什么使用设计模式：1.3 有哪些设计模式（来自W3Cschool，23种）：二、单例模式三、组合模式四、观察者模式五、代理模式六、适配器模式七、抽象工厂模式7.1 什么是工厂模式7.2 为什么要用工厂模式7.3 工厂模式怎么用一、设计模式1.1 什么是设计模式 一套经过反复使用、多人知晓的、经过分类的、代码设计经验的总结1.2 为什么使...
2019-09-14 11:10:08
232
原创 # 剑指前端（前端入门笔记系列）—— JS基本数据类型&&类型转换
文章目录一、基本数据类型1.1 Undefined1.2 Null1.3 Boolean1.4 Number1.5 String1.6 特殊的值二、强制（显式）类型转换2.1 字符→数值2.2 数值→字符三、隐式类型转换3.1 数值→字符3.2 字符→数值一、基本数据类型 ECMAScript中有5中简单数据类型性（也称为基本数据类型）:Undefined、Null、Boolean、Numb...
2019-09-14 10:40:18
327
原创 # 剑指前端（前端入门笔记系列）——事件
文章目录一、事件的解析二、事件对象简介2.1 事件对象的解析2.2 获取2.3 作用2.4 默认事件的阻止三、事件流3.1 事件冒泡3.2 事件捕获3.3 DOM事件流四、事件处理程序4.1 DOM0级事件处理程序（无兼容）4.2 DOM2级事件处理程序（有兼容）4.2.1 非IE下4.2.2 IE下4.2.3 兼容处理4.3 内存和性能4.4 事件委托五、事件类型整理六、总结一、事件的解析（...
2019-09-14 09:37:55
280
原创 配置 Vue 实例（ 选项 ）
文章目录一、总览二、DOM2.1 el && template 选项2.2 render 选项2.3 renderError 选项三、数据3.1 data 选项3.2 props 选项3.3 propsData 选项3.4 computed 选项3.5 watch 选项3.6 methods 选项四、生命周期钩子函数——全部组件4.1 简介4.2 图示4.3 辅助理解4.4 使用4.5 多组件生命周期关系五、生命周期钩子函数——缓存组件六、资源6.1 directives 选项6.2 fil
2019-09-13 11:24:25
877
原创 Vue.js（预备知识）
文章目录一、Vue.js简介1.1 优缺点1.1.1优点1.1.2 缺点1.2 安装1.3 引入Vue二、 编程思想2.1 面向事件2.2 面向过程2.3 面向对象一、Vue.js简介 &emspVue.js是一个轻巧、高性能、可组件化的MVVM框架，同时拥有非常容易上手的API。它一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核...
2019-09-13 10:34:14
1270
原创 NodeJS（核心模块→静态文件托管&&动态数据请求）
文章目录一、http模块1.1 引入http模块1.2 创建一个http对象（服务）1.3 监听1.4 场景案例二、fs模块2.1 引入fs模块2.2 读取文件（异步）2.3 场景案例2.4 静态文件托管2.4.1 简介2.4.2 静态页面托管模块三、url模块3.1 引入url模块3.2 解析url3.3 转为字符串3.4 场景案例四、querystring模块4.1 引入querystring...
2019-08-21 10:12:16
2000
原创 # 剑指前端（前端入门笔记系列）——Math对象&&Date对象
文章目录一、Math对象1.1 属性1.2 方法二、Date对象2.1 创建2.1.1 默认参数2.1.2 传入一个字符参数2.1.3 传入多个数值参数2.2 获取（get系列）2.3 设置（set系列）2.4 格式化三、总结一、Math对象 ECMAScript将一些常用的数学公式和信息封装到了一个对象中——Math对象，为我们实现数学方面的计算功能提供了便捷，而且该对象还提供了辅助完成这...
2019-08-18 14:04:14
1165
3
原创 # 剑指前端（前端入门笔记系列）——数组
文章目录一、简介二、基本语法2.1 创建2.1.1 使用Array构造函数2.1.2 使用字面量表示法创建2.2 表示2.3 操作（通过自身的属性）2.3.1 查（访问）2.3.2 增2.3.3 删2.3.4 改2.4 方法2.4.1 ES5-2.4.2 ES5一、简介 除了Object之外，Array类型恐怕是ECMAScript中最常用的类型了，而且ECMAScript中的数组与其他语言...
2019-08-18 11:55:06
1216
1
原创 # 剑指前端（前端入门笔记系列）——DOM（属性节点操作）
文章目录一、简介二、操作2.1 内置（系统提供的）2.1.1 可见（在代码中能够书写的）2.1.2 不可见（不能在代码中书写的）2.2 自定义（自己设置）2.2.1 可见（在代码中能够书写的）2.2.2 不可见（在代码中能够书写的）一、简介 属性节点没有过参加家族关系中,其专用选择器：attributes，返回值为对象的形式，它的键是索引值，也就是用对象模拟了一个伪数组，DOM中选择器返回的...
2019-08-18 09:42:34
1211
1
原创 # 剑指前端（前端入门笔记系列）——DOM（元素节点操作）
文章目录一、增二、删三、改四、查（选择器）4.1 基本选择器4.1.1 常规4.1.2 ES5新增4.2 关系选择器五、总结一、增 新增一个元素节点分为两步（二者缺一不可），第一步：创建元素节点，第二步：将创建的元素节点插入到指定元素节点中（也就是插入指定元素节点的儿子元素节点）<div id="box">原本存在的</div><script type="t...
2019-08-18 09:00:00
1238
原创 # 剑指前端（前端入门笔记系列）——DOM（基本组成与操作）
文章目录一、简介二、Node类型2.1 常量2.2 属性2.2.1 自身信息2.2.2 节点关系三、总结一、简介 DOM是针对HTML和XML文档的一个API（应用程序编程接口）。DOM描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。他给文档提供了一种结构化的表达方式，可以改变文档的内容和呈现方式，我们最关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。所谓的D...
2019-08-17 15:13:25
1285
原创 # 剑指前端（前端入门笔记系列）——BOM
文章目录一、简介二、window对象2.1 属性（窗口位置）：2.2 方法：三、子对象3.1 history对象（包含浏览器访问过的url）3.3.1 属性3.3.2 方法3.2 location对象（包含当前url的相关信息，而history对象不能具体反映url的相关信息）3.2.1 属性3.2.2 方法3.3 navigator对象（浏览器信息）：3.3.1 属性3.4 frames对象（包...
2019-08-16 22:39:47
1173
原创 NodeJS（预备知识）
文章目录一、NodeJs简介1.1 作用1.2 优缺点1.3 注意点1.4 运行1.4.1 DOS1.4.2 Linux/Centos(git):1.4.3 Node命令行二、NPM2.1 简介2.2 安装（Windows）三、服务器3.1 简介3.2 分类3.3 开发模式3.3.1 前后端耦合（大后端）3.3.2 前后端分离（大前端）一、NodeJs简介 NodeJs是运行在服务端的Jav...
2019-08-16 16:58:09
1315
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人