随笔分类 - 前端专题
摘要：图书管理案例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .grid { margin: auto; width: 53
阅读全文
摘要：变异方法： 在 Vue 中，直接修改对象属性的值无法触发响应式。当你直接修改了对象属性的值，你会发现，只有数据改了，但是页面内容并没有改变。 变异数组方法即保持数组方法原有功能不变的前提下对其进行功能拓展。 <!DOCTYPE html> <html lang="en"> <head> <meta
阅读全文
摘要：实例生命周期： 事物从出生到死亡的过程 Vue实例从创建 到销毁的过程 ，这些过程中会伴随着一些函数的自调用。我们称这些函数为钩子函数。 常用的钩子函数： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Do
阅读全文
摘要：过滤器： Vue.js允许自定义过滤器，可被用于一些常见的文本格式化。 过滤器可以用在两个地方：双花括号插值和v-bind表达式。 过滤器应该被添加在JavaScript表达式的尾部，由“管道”符号指示。 支持级联操作。 过滤器不改变真正的data，而只是改变渲染的结果，并返回过滤后的版本。 全局注
阅读全文
摘要：计算属性的使用(computed): 模板中放入太多的逻辑会让模板过重且难以维护 使用计算属性可以让模板更加的简洁 计算属性是基于它们的响应式依赖进行缓存的 computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化 <
阅读全文
摘要：安装 依赖 Node 6.9.0 or higher NPM 3 or higher Python C++ 编译工具 安装 npm install -g @angular/cli 使用帮助 ng help 初始化项目 ng new <项目名称> 启动开发服务 ng serve ng serve 默认
阅读全文
摘要：基本用法 添加 AppRoutingModule ng generate module app-routing --flat --module=app app-routing.module.ts import { NgModule } from '@angular/core'; import { R
阅读全文
摘要：起步 下载模板： git clone https://github.com/tastejs/todomvc-app-template.git --depth 1 初始化项目： ng new todomvc-angular cd todomvc-angular ng serve 将 todomvc-a
阅读全文
摘要：表单交互： 参考文档: https://angular.io/guide/user-input 启用 Http 服务 open the root AppModule, import the HttpClientModule symbol from @angular/common/http, add
阅读全文
摘要：在 Angular 中最常用的指令分为两种，它们分别是 属性型指令 和 结构型指令。 NgClass 作用：添加或移除一组 CSS 类 NgStyle 作用：添加或移除一组 CSS 样式 NgModel 作用：双向绑定到 HTML 表单元素 NgIf 作用：根据条件添加或移除 DOM 语法： <di
阅读全文
摘要：Class 与 Style 绑定 Class https://angular.io/guide/template-syntax#ngClass <!-- standard class attribute setting --> <div class="bad curly special">Bad c
阅读全文
摘要：文本 <p>{{ message }}</p> <input type="text" [(ngModel)]="message"> 运行之后你会发现报错了，原因是使用 ngModel 必须导入 FormsModule 并把它添加到 Angular 模块的 imports 列表中。 导入 FormsM
阅读全文
摘要：列表渲染 基本用法： export class AppComponent { heroes = ['Windstorm', 'Bombasto', 'Magneta', 'Tornado']; } <p>Heroes:</p> <ul> <li *ngFor="let hero of heroes"
阅读全文
摘要：插值 文本绑定 <p>Message: {{ msg }}</p> <p [innerHTML]="msg"></p> 属性绑定 <!-- 写法一 --> <img src="{{ heroImageUrl }}"> <!-- 写法二，推荐 --> <img [src]="heroImageUrl"
阅读全文
摘要：组件生命周期 参考文档：https://angular.io/guide/lifecycle-hooks ngOnChanges() ngOnInit() 只执行一次 ngDoCheck() ngAfterContentInit() 只执行一次 ngAfterContentChecked() ngA
阅读全文
摘要：组件通信 参考官方文档：https://angular.io/guide/component-interaction 组件就像零散的积木，我们需要把这些积木按照一定的规则拼装起来，而且要让它们互相之间能进行通讯，这样才能构成一个有机的完整系统。 在真实的应用中，组件最终会构成树形结构，就像人类社会中
阅读全文
摘要：几乎所有前端框架都在玩“组件化”，而且最近都不约而同地选择了“标签化”这种思路，Angular 也不例外。 对新版本的 Angular 来说，一切都是围绕着“组件化”展开的，组件是 Angular 的核心概念模型。 组件的定义 以下是一个最简单的 Angular 组件定义： import { Com
阅读全文
摘要：概念 模块通信：导出 export default xxx export const foo: string = 'bar'; export const bar: string = 'foo'; 模块通信：导入 // 加载默认成员 import xxx from '模块标识' // 按需加载模块成员
阅读全文
摘要：1.认识Angular 1.Angular介绍 2.安装Angular-CLI脚手架工具 3.使用AngularCLI初始化Angular项目 4.Angular应用启动过程 5.Angular 核心特性 2.TypeScript入门 1.TypeScript介绍 2.TypeScript入门 3.
阅读全文
摘要：函数参数 参数及返回值类型 function add(x: number, y: number): number { return x + y } 可选参数 function add(x: number, y?: number): number { return x + 10 } 默认参数 func
阅读全文
