- 博客(18)
- 收藏
- 关注
RSS订阅原创 前端学习计划
前言2020届毕业生，目前一直使用的前端框架是angular，工作一年半，做的项目类型较单一，最近工作内容轻松，打算系统学习一下前端，准备面试学习目标：前端知识储备总结项目开发经验根据招聘网站应聘要求学习新技术跳槽成功！学习内容：html+css+js基础html5 + css3 +es6新特性angular（开发项目中使用）reduxVue（热门框架）webpack打包学习时间：工作时间碎片化学习周一至周五晚上 8 点—晚上10点周六周末下午 3 点
2022-01-25 11:22:24
1320
原创 vue学习第一天
vue搭建一、搭建vue项目一、搭建vue项目假设Vscode、nodejs等已经安装好了。全局安装vue-cli，vue-cli可以帮助我们快速构建Vue项目npm install -g vue-cli安装webpack，它是打包js的工具npm install -g webpack创建一个文件夹用来存放项目，用vscode打开对应的文件夹，并在终端cd到对应的文件夹。比如我的文件夹是myvue，创建项目vue init webpack myvue运行项目。cd到项目文件夹，执行命令np
2021-11-10 16:09:21
584
原创 angular自动去除input框前后空格（angular2-trim-directive）
angular去除input框前后空格（angular2-trim-directive）要解决的问题使用angular2-trim-directive1. 安装ng2-trim-directive2. 在使用input框的module中导入InputTrimModule2. 在input框或textarea中使用angular2-trim-directive使用demo要解决的问题用户在输入框输入数据时，不小心多按了空格，然后提交了数据；或者搜索是，多按了空格，会导致想搜索的条目搜索不到；这就需要
2021-10-27 16:31:33
1340
原创 JSON.stringify()与JSON.parse()的区别、用法
1.JSON对象与JSON字符串 const person = { "name": "tom", "age": '19', "sex": "man" }; console.log(person, typeof (person), person.name); // { "name": "tom", "age": '19', "sex": "man" } object tom const personStr = '{"name": "tom", "age":"19", "sex":"ma
2020-11-24 15:10:37
150
原创 forkJoin与combineLatest
前言之前在项目中用到了forkJoin，用来处理多个异步http请求完成后执行回调函数，今天在处理将路由参数快照更改为参数订阅问题时，看到使用combineLatest，就学习整理一下1.forkJoin在进行http请求时，forkJoin与combineLatest并没有什么区别，因为http请求只会执行一次就结束。用forkJoin合并的请求，只会触发一次subscribe里的回调函数。会在所有异步请求执行完之后，触发一次subscribe里的回调函数。2. combineLates
2020-09-17 10:53:23
364
原创 路由参数快照snapshot与参数订阅subscribe
1.参数快照snapshot参数快照不会动态的知道值的变化，其表现为:直接在浏览器地址栏中改变参数当前页面不会发生跳转->比如将原来的地址http://localhost:4200/#/division/?key=31000000&&category=1更改为http://localhost:4200/#/division/?key=31000001&&category=1当前页面仍然停留在key=31000000的页面，想要发生跳转只能输入全部的地址（不
2020-09-17 10:18:13
376
原创 学习Redux第二天（基于angular的toDoList）
文章目录前言一、toDoList二、代码总结前言学习Redux第一天（基于angular的非常简易的小demo-实现组件间通讯）今天其实是学习redux的第三天hhhhhhhh, 不过今天在做项目没怎么学，整理一下昨天的demo一、toDoList先附上运行截图：由于一点样式没加，简陋了写，不过丑是丑了，redux也是用起来了。还是先看组件分布，最外层组件父组件（红框），add-to-do组件（蓝框）， doing组件（黑框），done组件（紫框），也不用管组件之间的关系，毕竟咱组件交互用
2020-09-11 16:52:45
180
原创 学习Redux第一天（基于angular的简易小demo-实现组件间通讯）
文章目录前言一、官方文档二、Action Reducer Store1.核心概念2.快速上手总结前言最近项目临近结束，作为前端小白的我也没多少工单要做，前端头头就布置了一个学习任务：今天开始自学Redux，并且用redux做一个组件间通讯的demo出来。当时的我对Redux也没多少了解，懵懵ing…一、官方文档想大概了解一下redux，自然是要去看官方文档的。之前我在学习过程中，也有时候会看教程，可能更容易理解，但是效率太低，罗里吧嗦看个一天可能才知道点皮毛。打开百度，搜索redux，进入官方文
2020-09-11 16:07:20
362
原创 angular 文件上传、预览、下载demo（angular-file）
angular-file — Quick Start、Examples、Directive1. npm install angular-file --save-dev2.
2020-09-03 10:55:48
3007
原创 angular ForkJoin实现多异步请求结束后执行某些操作（demo）
ForkJoin实现多异步请求结束后执行某些操作1.引入import { forkJoin } from 'rxjs';2.应用 const requests = []; _.forEach(files, file => { requests.push(this.fileService.uploadFile(file)); }); forkJoin(requests).subscribe(fileUploadInfos => { conso
2020-08-21 09:02:54
1451
原创 当文本超出长度后截断为...
1. 在css样式中加入.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}2. 在需要的标签中加入class <td class="ellipsis">{{item.name}}</td>
2020-08-07 11:20:24
386
原创 flex布局
最近项目在使用flex布局，于是想着系统巩固一下采用flex布局的元素称为flex容器，简称容器，也就是flex-container，容器存在两个轴，就像坐标系中的x轴和y轴，容器有着水平的主轴和垂直的交叉轴容器的所有子元素是容器的成员，简称项目，也就是flex-item1. flex-container有以下5个属性：flex-direction（主轴方向）flex-wrap（一条轴线排不下如何换行）justify-content（水平对齐方式）align-items（
2020-08-07 10:47:21
316
原创 页面渲染正常，但因渲染顺序或生命周期而报错 Expression has changed after it was checked. Previous value: ...(问题解决)
{{currentProjectGroup.name}}--管理员列表页面渲染正常，但仍然报错can not read property ‘name’ of undefined这是因为当渲染到这的时候，最开始currentProjectGroup为undefined，自然也就没有属性name，就会先报错，后期currentProject为重新赋值时，渲染成功。为解决这个报错，可加一个判断，如下图 <span *ngIf="!currentProjectGroup"> {{curre
2020-08-03 10:12:44
5342
原创 angular 响应式表单（1）基础表单控件、表单组
个人理解，表单的目的就是收集用户输入的数据，对这些数据进行处理，进而将收集的数据发送给服务器。1.使用响应式表单前，需要在相应的module引入ReactiveFormsModule，注册响应式表单模块import { ReactiveFormsModule } from '@angular/forms';@NgModule({ imports: [ // other imports ... ReactiveFormsModule ],})export class App
2020-07-24 19:23:18
295
原创 angular select样式调整、后台数据交互
前段时间需要用到下拉列表select，但是默认样式效果不太符合项目<select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</
2020-07-23 19:55:20
657
原创 angular 双向绑定（遍历数组） 点击光标闪动失去焦点问题
<app-process-template-step-item *ngFor="let item of template.data.steps; let i = index;" [index]='i' [(step)]="template.data.steps[i]" (addItem)="addStep($event)" (deleteItem)="deleteStep($event)" [defaultRole]="defaultRole"></app-process-.
2020-07-06 18:21:44
271
原创 angular响应式表单（2）表单初始化、赋值、监听变化、动态设置属性disable()解决警告问题
FormGroup用于追踪一个表单控件组的值和状态由FormControlName指令提供的formControlName属性把输入框和和 FormGroup 中定义的表单控件绑定起来，并且相互通讯当表单过多时，注入FormBuilder服务更快捷.html<form [formGroup]="checkForm"> <ul class="list-group list-group-horizontal rounded-0"> <li class="lis.
2020-07-06 17:58:11
2080
原创 Vue ui
cmd输入vue ui指令没反应vue版本需要3.0或以上将原来版本卸载重装npm uninstall -g vue-clinpm install -g @vue/cli
2020-04-15 12:53:39
101
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人