1.安装angular创建项目目录2.3.4.5.6.语法条件渲染文本渲染列表渲染事件绑定类与样式表单绑定表单绑定管道标签引用7.最终代码htmlh1angular/h1 p时间{{d}}/p p时间{{d|date}}/p p时间{{d|date:yy-MM-dd HH:mm:ss}}/p pjson:{{obj1|json}}/p h4标签引用/h4 input typetext #phone button (click)msgphone.value;phone.value修改msg/button p [title]title{{msg}}/p div *ngIfflag else myelse 如果 /div ng-template #myelse否则/ng-template p input typetext [value]msg (input)msg$event.target.value /p p input typecheckbox [(ngModel)]sel name id 是否同意条款 /p p button [disabled]!sel登录/button /p select [(ngModel)]hobby name id option value吃饭吃饭/option option value睡觉睡觉/option option value豆豆豆豆/option /select div ul li *ngForlet item of list; let i index {{i1}} {{item}} /li /ul /div button (click)showMsg($event)点击事件/button p [ngClass]{active: flag}颜色样式/p p [ngStyle]mystyle颜色样式2/p style .active{ color:red; } /style p{{msg}}/p p{{12}}/p p{{true ? hao:huai}}/p p{{msg.length}}/p p [innerHtml] msg/p p img src{{url}} alt /p p img [src]url alt /ptsimport { Component } from angular/core; Component({ selector: app-root, templateUrl: ./app.component.html, styleUrls: [./app.component.scss] }) export class AppComponent { list[vue,react,js,jquery]; title myng; msg 我em来/em了a; urlhttps://www.baidu.com/img/flexible/logo/pc/result2.png; flagfalse; mystyle { color:green }; showMsg(e){ console.log(e); console.log(e.target); console.log(e.target.innerText); console.log(this.msg); this.flag !this.flag; }; sel false; hobby吃饭; d new Date(); obj1{ name:anna, age:45, arr:[1,2,3] } }
