自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(9)
  • 收藏
  • 关注

原创 手动实现vue框架

手动实现vue框架概览html模板new MVVM构造函数实现mvvm函数实现compile模板编译实现Observer数据劫持实现Dep依赖收集实现watcher监听函数概览vue实现双向绑定的原理:vue是采用数据劫持配合发布者-订阅者的方式,通过Object.definderPorperty()来劫持各个属性的setter和getter,在数据变动时,发布消息给依赖收集器,去通知观察者,做出对应的回调函数,去更新视图。MVVM作为绑定的入口,整合Observe,Compile和Watcher三者

2020-09-18 13:15:56 190

原创 webpack4实现热更新

webpack4实现热更新前言npm包准备准备文件webpack.config配置参数前言首先,跟大家分享一个自己配置webpack热更新的小功能。npm包准备npm init -ynpm i webpack webpack-cli webpack-dev-server webpack-html-plugin --save-devnpm init -y 生成一个package.jsonwebpack和webpack-cli是运行webpack工具必备webpack-dev-server

2020-09-12 21:52:17 314

原创 css经典布局方式之圣杯与双飞翼

css布局方式之圣杯与双飞翼圣杯布局双飞翼布局圣杯布局1,什么是圣杯布局?   所谓圣杯布局就是用于实现一个两侧宽度固定,中间宽度自适应的三栏布局2,构建圣杯布局的步骤:    2.1,添加一个容器,在这个容器中添加放三个盒子(左、中、右);    2.2,设置两侧盒子(左、右)的宽度 ,使其宽度固定;    2.3,设置中间盒子的宽度为100%,这是中间盒子宽度自适应的关键;    2.4,设置容器的padding-left和padding-right属性,属性值分别为左盒子的宽度和右盒子

2020-08-22 11:21:06 139

原创 前端面试之css3盒模型

前端面试题之ccs3&html51.css3盒模型1.1标准盒模型1.2 IE盒模型1.3拓展面试问题1.3.1获取盒子的宽高1.3.2边距重叠(BFC)1.css3盒模型每个html都可以叫做盒模型,盒模型由外而内包括:边距(margin)、边框(border)、填充(padding)、内容(content)。页面中所占的实际宽度是它们全部加起来。盒模型有标准盒模型和IE盒模型。1.1标准盒模型可以通过box-sizing:content-box;设置1.2 IE盒模型可以通过box

2020-08-22 10:38:23 161

原创 TS装饰器3分钟上手

TS装饰器装饰器前言基础知识类装饰器属性装饰器:方法装饰器装饰器前言angularjs运用装饰器会比较多,它也是ts的一大特性,下面知识能够让大家对ts装饰器有一个初步的了解.基础知识装饰器:本质是一个方法,可以注入到类、方法、属性参数上来拓展类、属性、方法、参数的功能.分类:类装饰器、属性装饰器、方法装饰器、方法参数装饰器.装饰器的写法:普通装饰器(无法传参)、装饰器工厂(可传参).各种装饰器执行顺序:属性装饰器 > 方法参数装饰器 > 方法装饰器 > 类装饰器;如果每种

2020-08-10 18:57:44 6897

原创 angular9组件动态加载实现

angular9动态组件前言指令的创建动态组件的核心代码动态组件加载的html动态组件的tsad-item.tsad.component.ts组件统一注册组件的映射效果图参考资料前言按条件加载组件,实现组件的灵活切换,减少大量ngIf的使用,在angular中也是比较常见的操作,下面就来大家一起交流一下angular组件的动态使用.指令的创建在添加组件之前,先要定义一个锚点来告诉 Angular 要把组件插入到什么地方。在src/dynamic-banner/ad.directive.ts下im

2020-07-19 16:21:57 32643

原创 angular9拦截器的使用

angular9拦截器的简单使用拦截器统一添加token拦截器使用拦截器实现后的效果参考资料拦截器统一添加token我们在做一个后台管理系统时,需要给每个请求的请求头里面添加token,所以下面我们来了解一下angular的拦截器,并使用拦截器使用1.创建http.service.ts,用于网络请求import { Injectable } from '@angular/core';import { HttpClient } from '@angular/common/http';@Inje

2020-07-06 22:10:29 39015

原创 angular9路由守卫使用

三分钟上手路由守卫路由守卫是什么组件的创建守卫路由相关核心代码在路由中使用守卫参考资料路由守卫是什么任何用户都能在任何时候导航到任何地方。但有时候出于种种原因需要控制对该应用的不同部分的访问。可能包括如下场景:该用户可能无权导航到目标组件。可能用户得先登录(认证)。在显示目标组件前,你可能得先获取某些数据。在离开组件前,你可能要先保存修改。你可能要询问用户:你是否要放弃本次更改,而不用保存它们?组件的创建1.home组件创建2.login组件创建3.home下的first和second

2020-06-27 18:10:21 37602

原创 angular9使用echarts地图

3D地图新建一个angualr9的工程下载echarts创建容器创建地图实例效果图片参考资料新建一个angualr9的工程1.安装了@angular-cli的脚手架2.ng -v查看版本3. ng new my-project(项目名)下载echartsnpm i echarts创建容器src/app/app.componnet.html<div id="main" style="width:800px;height:500px"></div>创建地图实例

2020-06-13 16:20:30 38972 2

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除