- 博客(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
259
原创 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
449
原创 css经典布局方式之圣杯与双飞翼
css布局方式之圣杯与双飞翼圣杯布局双飞翼布局圣杯布局1,什么是圣杯布局? 所谓圣杯布局就是用于实现一个两侧宽度固定,中间宽度自适应的三栏布局2,构建圣杯布局的步骤: 2.1,添加一个容器,在这个容器中添加放三个盒子(左、中、右); 2.2,设置两侧盒子(左、右)的宽度 ,使其宽度固定; 2.3,设置中间盒子的宽度为100%,这是中间盒子宽度自适应的关键; 2.4,设置容器的padding-left和padding-right属性,属性值分别为左盒子的宽度和右盒子
2020-08-22 11:21:06
197
原创 前端面试之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
265
原创 TS装饰器3分钟上手
TS装饰器装饰器前言基础知识类装饰器属性装饰器:方法装饰器装饰器前言angularjs运用装饰器会比较多,它也是ts的一大特性,下面知识能够让大家对ts装饰器有一个初步的了解.基础知识装饰器:本质是一个方法,可以注入到类、方法、属性参数上来拓展类、属性、方法、参数的功能.分类:类装饰器、属性装饰器、方法装饰器、方法参数装饰器.装饰器的写法:普通装饰器(无法传参)、装饰器工厂(可传参).各种装饰器执行顺序:属性装饰器 > 方法参数装饰器 > 方法装饰器 > 类装饰器;如果每种
2020-08-10 18:57:44
7065
原创 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
32858
原创 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
39130
原创 angular9路由守卫使用
三分钟上手路由守卫路由守卫是什么组件的创建守卫路由相关核心代码在路由中使用守卫参考资料路由守卫是什么任何用户都能在任何时候导航到任何地方。但有时候出于种种原因需要控制对该应用的不同部分的访问。可能包括如下场景:该用户可能无权导航到目标组件。可能用户得先登录(认证)。在显示目标组件前,你可能得先获取某些数据。在离开组件前,你可能要先保存修改。你可能要询问用户:你是否要放弃本次更改,而不用保存它们?组件的创建1.home组件创建2.login组件创建3.home下的first和second
2020-06-27 18:10:21
37742
原创 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
39101
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人