甜甜笑乐开怀-CSDN博客

原创 angular表单+服务案例：人员登记系统

效果：<div class="wrap"> <h2>人员登记系统</h2> <form action=""> <label for="username">姓名</label> <input type="text" name="username" [(ngModel)]="info.username" placeholder="cc"><br> &

2021-01-28 13:45:24 136

原创 Angular 实现一个 toDoList：表单事件+服务+数据持久化

效果动态图：两种方法：第一种：代码量多一协，易懂<div class="wrap"> <input type="text" [(ngModel)]="word"><button (click)="add()">搜索</button><br> 代办事项： <ul> <li *ngFor="let item of agency;let key=index;">

2021-01-28 11:45:31 191

想法： input 表单开始是设置边框为none，然后紧跟着a链接包裹的编辑，取消、保存也是a链接包裹的且是隐藏的；当点击编辑的时候，可以编辑表单中的内容而且编辑二字消失，取消、保存出现，可以点击取消、保存进行相应的操作。我比较爱上传复制粘贴可以直接运行的代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" con

2021-01-28 11:43:42 1633

原创 Angular 中的生命周期函数

1、生命周期函数通俗的讲就是组件创建、组件更新、组件销毁的时候会触发的一系列的方法。2、当 Angular 使用构造函数新建一个组件或指令后，就会按下面的顺序在特定时刻调用这些生命周期钩子方法。3、ngOnInit()是请求数据，ngAfterViewInit()是dom 操作；ngOnDestory()是卸载、挂载数据。红色函数是需要掌握的，其他是认识即可。...

2021-01-28 11:05:47 308

原创 Angular 组件通信

一、父组件给子组件传值-@input父组件不仅可以给子组件传递简单的数据，还可把自己的方法以及整个父组件传给子组件1.父组件调用子组件的时候传入数据这句话就是说：父组件定义了一个变量msg，在子组件标签上定义一个属性msg接收这个变量；之所以属性名和变量名得名字是一样的是为了方便记忆，如果属性名是aaa，变量名是msg，写代码的时候就得记忆哪个属性名表示msg变量。父组件的ts:public msg:any='父组件的msg'run(){ console.log("父组件的run方法")}

2021-01-28 11:03:53 357

原创 Angular 中的 Dom 操作以及@ViewChild、 Angular 执行 css3 动画

一、Angular 中的 dom 操作（原生 js）<div id="box"> 原生js中的dom操作</div> ngAfterViewInit(){//视图加载完成后触发的方法 var boxDom:any=document.getElementById("box"); boxDom.style.color='orange'; }二、Angular 中的 do m 操作（ViewCh

2021-01-28 10:55:15 178

原创 angular5学习系列之基础知识

一、目录结构分析e2e 在e2e下是端到端测试node_modules 安装的第三方模块src 项目的所有文件app 组件以及app.module.ts定义跟模块assets 静态资源environment 为各个目标环境准备的文件index.html 主页面main.ts 主要入口polytills.ts 填充库帮我们大这些不同点进行标准化styles.css

2021-01-15 19:22:00 345

原创 angular5学习系列之八大主要构造块

angular5学习系列之八大主要构造块学习视频链接：https://www.bilibili.com/video/BV1i7411F7tb?p=5一、angular.js简介angularjs是一套用于构建用户界面的js框架，主要被用来开发和维护单页面应用二、特性MVVM 组件化模块化指令服务依赖注入 ts三、建议官方文档写demo测试写小项目练手安装python c++编译工具npm install 。。。。四、目录介绍e2e 前端测试文件node_modules

2021-01-14 10:18:50 175

转载 angular系列问题二

angular系列问题二错误提示：“this” 隐式具有类型 “any”,因为它没有类型注释。export class AppComponent { title = '欢迎来到angular的世界'; count=0; increment = function() { this.count++; }}出错原因:ts 提供类似C# 和 java的静态类型（强类型），在全局和命名空间的全局里面直接声明一个函数要用到 function 关键字（就是js的function关

2021-01-14 09:57:39 652

原创 typescript学习之基础知识篇

typescript学习之基础知识篇学习视频链接：https://www.bilibili.com/video/BV1i7411F7tb?p=221.用ts的好处：编写阶段就可以报出一些低级错误2.变量声明：// var 不建议使用,因为变量提升 let变量 const常量let fo:string = 'bar';fo = 'ba';const count=0;// count=10;常量不允许重新赋值3.基本数据类型：//布尔值let isDone:boolean=tru

2021-01-14 09:27:39 106

原创 angular问题一

angular问题一ng serve出错npm 命令安装 CLInpm install -g @angular/cli运行已有的项目ng serve --open报错：The serve command requires to be run in an Angular project, but a project definition could not be found.原因：网上有说是本地版本和全局版本不一致，需要升降某个版本，我也没明白啥意思，一通操作之后还不行，后来我终于明白了

2021-01-08 09:17:21 326

原创使用数组方法使得图文顺序倒序随机切换

使用数组方法使得图文顺序倒序随机切换实现功能描述：从小到大和从大到小是同一个按钮，切换图片和文字；随机排序是另一个按钮，可以随机切换图文。第一种方法：使用了数组的sort函数排序，随机数用的是Math.random() -0.5;第二种方法：使用了数组的reverse函数翻转，随机数用的是Math.floor(Math.random() * arr.length);拿去使用的时候别忘了改图片地址哈<!DOCTYPE html><html lang="en"><

2020-08-15 10:42:03 241

原创 js this 点击事件 for循环案例1

点击左边的盒子，盒子变成黄色，右边的上下盒子显示相应的字母，鼠标移入下面盒子，背景变色<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</titl

2020-07-26 22:46:16 295

原创编辑保存取消表单js

想法： input 开始是设置没有边框；点编辑可以修改内容，取消、保存开始是隐藏的，开始编辑的时候，编辑隐藏，取消、保存显示，点击取消、保存可以进行相应的操作。我比较习惯上传可以直接复制粘贴运行的代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ini

2020-07-26 22:36:40 416

原创嵌套的小盒子居中问题

盒子居中问题块级盒子居中<style> .wrap{ width: 100px; height: 100px; background-color: red; /* 外边距带来的塌陷可以用溢出隐藏解决或者用内边距、边框 */ overflow: hidden; } .box1{

2020-06-28 13:41:18 438

原创 HTML 表格

HTML表格2、表格的基本结构table ：简单的表格由table 标签和一个或多个tr th td 标签组成tr：定义表格中的行，包括一个或多个th / td标签td ：定义表格中的列，td 标签中的文字一般显示是正常字体且居左th ：定义表格表头的列，字体与 td 中的字体有所不同3、表格的完整结构除以上标签外，还有 thead tbody tfoot；thead ：表格的头部，通常写表格的每一列标题tbody ：表格的主体，写表格的数据tfoot ：表格的底部，写表

2020-06-25 21:42:15 116

原创 CSS基础（一）

CSS基础（一）1、CSS简介CSS Cascading Style Sheets 层叠样式表2、CSS的三种引入方式2.1 行内式（内联样式）<div style="width: 200px;height: 200px;background-color: green;"></div>特点：1、样式都在标签内；2、代码冗余；（同一个网页很有可能会有相同的css样式，如果每一个标签的相同样式都写的话，会导致代码重复率很高。从实际应用中

2020-06-24 13:36:23 107

原创 HTML语言

HTML语言一、定义html（hyper text markup language）超文本标记语言，不是编程语言，是标记语言，描述页面的语言二、基本语法1.标签结构1） <关键字>内容</关键字>注意：<关键字>是开始标签，</关键字>是结束标签；内容可以是文字也可以是其他标签2）正常的标签结构：关键字开头，关键字结尾；开始标签开始，结束标签结束。3）特殊标签：空标签/单标签在开始标签结束，所以不用结束标签。2.标签属性其中，n

2020-06-22 20:34:59 198

weixin_41684068的博客