- 博客(123)
- 资源 (4)
- 收藏
- 关注
RSS订阅原创 5. vue2 事件 定义方法 执行方法 获取数据 改变数据 执行方法传值 以及事件对象
vue2 事件 定义方法 执行方法 获取数据 改变数据 执行方法传值 以及事件对象
2022-07-07 23:43:10
686
原创 css background
一、background-repeat设置是否及如何重复背景图像。值描述repeat默认。背景图像将在垂直方向和水平方向重复。repeat-x背景图像将在水平方向重复。repeat-y背景图像将在垂直方向重复。no-repeat背景图像将仅显示一次。inherit规定应该从父元素继承 background-repeat 属性的设置。二、background-position背景图像的起始位置。背景图像如果要重复，将从这一点开始。值
2022-05-15 20:58:30
327
原创 angular中的 :host 、:host-context、::ng-deep
一、 :host:host 表示选择当前的组件1.1 选择宿主元素使用 :host 伪类选择器，用来选择组件宿主元素中的元素（相对于组件模板内部的元素），没有子元素就相当于选择整个宿主元素。如有下面html:<app-detail></app-detail>组件 app-detail 的样式（整个app-detail 的样式）如下 ：:host { display: inline-block; background: red;}浏览器 Ele
2022-03-18 17:50:16
2008
原创 angular 内容投影
一、 ng-content 进行内容投影1.1 ng-contentng-content 元素是一个用来插入外部或者动态内容的占位符。父组件将外部内容传递给子组件，当 Angular 解析模板时，就会在子组件模板中 ng-content 出现的地方插入外部内容。我们可以使用内容投影来创建可重用的组件。这些组件有相似的逻辑和布局，并且可以在许多地方使用。一般我们在封装一些公共组件的时候经常会用到。1.2 为什么使用内容投影定义一个 button 组件：button-component.ts@C
2022-03-05 12:11:43
1696
原创 angular @Component 装饰器详解
一、 @Component 装饰器1.1 @Component 装饰器的用途声明一个组件时，在组件类的之上要用@Component装饰器来告知Angular这是一个组件。import { Component, OnInit } from '@angular/core';@Component({ selector: 'app-product-alerts', templateUrl: './product-alerts.component.html', styleUrls: ['./pr
2022-03-03 20:53:05
2228
原创 webpack学习总结
一、 webpack构建流程Webpack 的运行流程是一个串行的过程，从启动到结束会依次执行以下流程：初始化参数：从配置文件和 Shell 语句中读取与合并参数，得出最终的参数开始编译：用上一步得到的参数初始化 Compiler 对象，加载所有配置的插件，执行对象的 run 方法开始执行编译确定入口：根据配置中的 entry 找出所有的入口文件编译模块：从入口文件出发，调用所有配置的 Loader 对模块进行翻译，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理
2022-01-10 19:33:26
1477
原创 跨域请求的9中方式
同源策略同源如果两个 URL 的 协议、域名和端口都相同的话，则这两个 URL 是同源。这个方案也被称为“协议/主机/端口元组”，或者直接是 “元组”。下表给出了与 URL http://store.company.com/dir/page.html 的源进行对比的示例:URL结果原因http://store.company.com/dir2/other.html同源只有路径不同http://store.company.com/dir/inner/another.ht
2021-12-26 19:54:53
779
原创 angular基础16【动画】
16. 动画16.1 状态16.1.1 什么是状态状态表示的是要进行运动的元素在运动的不同时期所呈现的样式。16.1.2 状态的种类在 Angular 中，有三种类型的状态，分别为：void、*、customvoid：当元素在内存中创建好但尚未被添加到 DOM 中或将元素从 DOM 中删除时会发生此状态*：元素被插入到 DOM 树之后的状态，或者是已经在DOM树中的元素的状态，也叫默认状态custom：自定义状态，元素默认就在页面之中，从一个状态运动到另一个状态，比如面板的折叠和展开。
2021-12-26 19:50:31
677
原创 angular基础15【NgRx】
15. NgRx15.1 概述NgRx 是 Angular 应用中实现全局状态管理的 Redux 架构解决方案。@ngrx/store：全局状态管理模块@ngrx/effects：处理副作用@ngrx/store-devtools：浏览器调试工具，需要依赖 Redux Devtools Extension@ngrx/schematics：命令行工具，快速生成 NgRx 文件@ngrx/entity：提高开发者在 Reducer 中操作数据的效率@ngrx/router-store：将路由
2021-12-26 19:49:56
1138
原创 angular基础14【HttpClientModule】
14. HttpClientModule该模块用于发送 Http 请求，用于发送请求的方法都返回 Observable 对象。14.1 快速开始引入 HttpClientModule 模块// app.module.tsimport { httpClientModule } from '@angular/common/http';imports: [ httpClientModule]注入 HttpClient 服务实例对象，用于发送请求// app.component.ts
2021-12-26 19:37:33
799
原创 angular基础13【RxJS】
13. RxJS13.1 概述rxjs官网学习 RxJS13.1.1 什么是 RxJS ?RxJS 是一个用于处理异步编程的 JavaScript 库，目标是使编写异步和基于回调的代码更容易。13.1.2 为什么要学习 RxJS ?就像 Angular 深度集成 TypeScript 一样，Angular 也深度集成了 RxJS。服务、表单、事件、全局状态管理、异步请求 …13.1.3 快速入门可观察对象 ( Observable ) ：类比 Promise 对象，内部可以用
2021-12-26 19:30:30
1666
原创 angular基础12【路由】
12. 路由12.1 概述在 Angular 中，路由是以模块为单位的，每个模块都可以有自己的路由。12.2 快速上手创建页面组件、Layout 组件以及 Navigation 组件，供路由使用创建首页页面组件ng g c pages/home创建关于我们页面组件ng g c pages/about创建布局组件ng g c pages/layout创建导航组件ng g c pages/navigation创建路由规则// app.module.tsimport { Rout
2021-12-26 18:10:58
2047
原创 angular基础9-10【依赖注入&服务 Service】
9. 依赖注入9.1 概述依赖注入 ( Dependency Injection ) 简称DI，是面向对象编程中的一种设计原则，用来减少代码之间的耦合度。class MailService { constructor(APIKEY) {}}class EmailSender { mailService: MailService constructor() { this.mailService = new MailService("APIKEY1234567890") }
2021-12-26 17:34:43
679
原创 angular基础5-8【指令&管道&组件通讯&组件生命周期】
5. 指令 Directive指令是 Angular 提供的操作 DOM的途径。指令分为属性指令和结构指令。属性指令：修改现有元素的外观或行为，使用 [] 包裹。结构指令：增加、删除 DOM 节点以修改布局，使用*作为指令前缀5.1 内置指令5.1.1 *ngIf根据条件渲染 DOM 节点或移除 DOM 节点。<div *ngIf="data.length == 0">没有更多数据</div><div *ngIf="data.length >
2021-12-26 17:08:51
1033
1
原创 angular基础1-4【概述&架构预览&快速开始&组件模板】
博文简述了angular架构，快速开始一个angular项目，讲解了部分组件模板相关的知识
2021-12-26 16:57:14
432
原创 vscode解决打开一个文件，另一个文件就关闭的问题
1. 问题原因因为刚打开文件，vscode默认是预览状态，如果编辑过之后，就不会有这个问题。2. 解决方案2.1 双击打开我们一般打开一个文件都是鼠标左键单击打开，可以使用鼠标左键快速双击两下的方式打开，此时预览状态解除。2.2 配置setting将下面的setting配置为false："workbench.editor.enablePreview": false...
2021-12-07 15:28:45
11101
原创 css优先级
css优先级每个规则对应一个初始"四位数"：0、0、0、0若是 行内选择符，则加1、0、0、0若是 ID选择符，则加0、1、0、0若是 类选择符/伪类选择符，则分别加0、0、1、0若是 元素选择符，则分别加0、0、0、1算法：将每条规则中，选择符对应的数相加后得到的”四位数“，从左到右进行比较，大的优先级越高。选择器特殊性以10为基数的特殊性style=“color: red”1, 0, 0, 01000#id {}0, 1, 0, 0100#id
2021-12-02 17:55:02
245
原创 浏览器渲染原理
我们知道执行 JS 有一个 JS 引擎，那么执行渲染也有一个渲染引擎。同样，渲染引擎在不同的浏览器中也不是都相同的。比如在 Firefox 中叫做 Gecko，在 Chrome 和 Safari 中都是基于 WebKit 开发的。本博文是关于 WebKit 的这部分渲染引擎内容。一、 渲染过程1.1 浏览器接收到 HTML 文件并转换为 DOM 树当我们打开一个网页时，浏览器都会去请求对应的 HTML 文件。虽然平时我们写代码时都会分为 JS、CSS、HTML 文件，也就是字符串，但是计算机硬件是不
2021-12-02 16:59:53
748
原创 angular 跨平台&dom操作&组件嵌套&投影
angular 跨平台angular 是跨平台的，不仅仅可以再pc端运行。anulgar 为跨平台做的工作为了能够支持跨平台，Angular 通过抽象层封装了不同平台的差异。比如定义了抽象类 Renderer2 、抽象类 RootRenderer 等。此外还定义了以下引用类型：ElementRef、TemplateRef、ViewRef 、ComponentRef 和 ViewContainerRef 等。通过 模板变量、@ViewChild 等方法获取DOM元素。不要使用window、 docu
2021-11-30 20:32:47
862
原创 angular中的变更检测机制
angular中的变化检测机制什么是变更检测概括： 一种更改检测机制，用于遍历组件树，检查每个组件的变化，并在组件属性发生变化的时候触发DOM的更新变更检测的基本任务： 获得程序的内部状态并使之在用户界面可见。这个状态可以是任何的对象、数组、基本数据类型，…什么引起了变更基本上应用程序状态的改变可以由三类活动引起用户输入操作，比如点击，表单提交等请求服务端数据定时事件，比如 setTimeout，setInterval这几点有一个共同点，就是它们都是异步的，也就是说，所有的异步操作
2021-11-30 20:31:38
1718
原创 节流和防抖
防抖触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间实现方式每次触发事件时设置一个延迟调用方法，并且取消之前的延时调用方法//防抖debounce代码：function debounce(fn) { let timeout = null; // 创建一个标记用来存放定时器的返回值 return function () { // 每当用户输入的时候把前一个 setTimeout clear 掉 clearTimeo
2021-11-30 20:27:06
126
原创 常见六大Web安全问题
一、 XSSCross-Site Scripting（跨站脚本攻击）简称 XSS（因为缩写和 CSS重叠，所以只能叫 XSS），是一种代码注入攻击。攻击者通过在目标网站上注入恶意脚本，使之在用户的浏览器上运行。利用这些恶意脚本，攻击者可获取用户的敏感信息如 Cookie、SessionID 等，进而危害数据安全。原理XSS 的原理是恶意攻击者往 Web 页面里插入恶意可执行网页脚本代码，当用户浏览该页之时，嵌入其中 Web 里面的脚本代码会被执行，从而可以达到攻击者盗取用户信息或其他侵犯用户安全隐私
2021-11-26 17:37:02
7723
原创 前端小型脚手架plop
前端小型脚手架plop简介plop是一个轻量级的项目构建工具，plop可以通过命令行去生成、处理文件模板代码等。使用场景项目的每个模块的结构骨架都非常相似，引入模版内容相同就可以使用Plop来实现自动化了，Plop旨在根据模板文件自动化创建组件。plop安装要将plop安装到全局环境npm i plop -g如何使用在项目根目录中新建一个plopfile.js文件module.exports = plop => { // 这里的 c 是一个自己设定的名字，在执行命令行的时
2021-11-25 21:00:17
6817
原创 使用命令行打开vscode
vscode最新版的vscode不需要配置打开命令行工具（cmdr，git），进入项目目录，输入下面命令：code .旧版本需要配置一下手动打开vscodectrl + shift + p 打开命令面板（或者点击菜单栏 查看>命令面板）输入shell（选择"install code command in PATH"）打开终端 进入需要用IDE打开的文件夹 输入"code ."...
2021-11-25 10:56:38
28176
2
原创 Windows命令行工具cmder配置
简介经常使用cmd，window下的cmd奇丑无比，而且还不支持复制粘贴等功能。再来看看cmder，他支持复制粘贴，还可以设置窗口字体颜色，分屏多开窗口等功能。cmder是一个增强型命令行工具，不仅可以使用windows下的所有命令，更爽的是可以使用linux的命令,shell命令。下载官网地址：http://cmder.net/版本区别下载的时候，会有两个版本，分别是mini与full版；唯一的差别在于有没有内建msysgit工具，这是Git for Windows的标准配备；全安装版 cmde
2021-11-25 10:45:30
7965
原创 js 中四种循环对比
js 中四种循环对比for循环for循环的特点是简单，书写麻烦，使用如下：let arr = [1, 2, 3];for(let i = 0; i < arr.length; i++){ console.log(`${i} => ${arr[i]}`);}可以通过缓存数组长度的方式进行优化，当数组较大时效果比较明显。let arr = [1, 2, 3];let len = arr.length;for(let i = 0; i < len; i++){ con
2021-11-23 21:09:44
1913
原创 es6 Iterator（迭代器）
Iterator（迭代器）由来及意义在编程中，集合是个很重要的概念，js原有的集合主要是数组，对象，es6又添加了set，map。这样就有了四种集合，用户还可以根据需要组合适合的数据结构。有了4中集合之后，就需要一种统一的机制来遍历，访问这些数据结构。迭代器（Iterator）就是这样一种机制。它是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口，就可以完成遍历操作（即依次处理该数据结构的所有成员）。具体实现Iterator 的遍历过程是这样的。
2021-11-23 19:47:57
966
原创 Promise
Promise概览Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理且更强大。Promise最早是commonjs的标准，es2015（es6）将其写进了语言标准，统一了用法，并原生提供了Promise对象。Promise 对象有下面三种状态：Pending状态（进行中）Fulfilled状态（已成功）Rejected状态（已失败）并且一旦状态改变就不会再变 （两种状态改变：成功或失败）Pending -> FulfilledPending
2021-11-23 14:51:11
147
原创 Object.defineProperty()
Object.defineProperty()语法Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。Object.defineProperty(obj, prop, descriptor)obj要定义属性的对象。prop要定义或修改的属性的名称descriptor要定义或修改的属性描述符。规则第一次进行赋值操作（a.b = xx or a[b] = xx or a = { b: xxx })，相当于
2021-11-22 19:01:22
826
原创 JavaScript异步编程
js为什么是单线程的JavaScript单线程，与它的用途有关。作为浏览器脚本语言，JavaScript 的主要用途是与用户交互，以及操作 DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。比如，假定JavaScript同时有两个线程，一个线程在某个 DOM 节点上添加内容，另一个线程删除了这个节点，这时浏览器应该以哪个线程为准？所以，为了避免复杂性，从一诞生，JavaScript 就是单线程的。js单线程会遇到哪些问题js是单线程的，所以它执行代码时是顺序执行的，这样不可避免的会产生一
2021-11-06 19:51:32
781
原创 js函数式编程初解
函数式编程为什么要学习函数式编程有项有趣的调查，全球程序员的平均代码量为：5行/人天。也就是说一天中你花费7.5小时去阅读代码（主要是研究这5函代码在哪里写，怎么写），然后花费30分钟来写完这5行代码，这就是程序员一天的工作。我们所写的代码将来是要交给别人或者自己去维护，那么如何提高代码的可读性是项很重要的任务。函数式编程可以很好的做到这一点，所以学习函数式编程很重要的一点就是：提高代码可读性。当然还有其他因素：函数式编程随着react的流行受到越来越多的关注vue3也拥抱函数式编程函数式编程
2021-10-23 18:57:51
208
原创 css字体图标使用方法
1. 准备好要生成字体图标的svg图片2. 通过 https://icomoon.io/app/#/select 这个网站在线生成3. 页面引用字体文件woff和style.css文件
2021-09-02 15:06:16
393
react之旅（二）react项目目录结构，创建组件，绑定数据
2020-07-15
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人