Angular学习(一)：模板与数据绑定

HTML 是 Angular 模板的语言。这一节学习如何通过数据绑定来动态设置 DOM（文档对象模型）的值。

一、绑定语法

绑定的类型可以根据数据流的方向分成三类：从数据源到视图、从视图到数据源以及双向的从视图到数据源再到视图。

数据方向	语法	绑定类型
单向(从视图到数据源)	{{ }}、 [target]="expression"、bind-target="expression"	插值、（属性、样式、CSS类、Attribute）
单向(从数据源到视图)	(target)="statement"、on-target="statement"	事件
双向绑定	[(target)]="expression"、bindon-target="expression"	双向

二、绑定目标

插播：property属性值可以是各种类型的，attribute属性值只能够是字符串。

绑定类型	目标
属性	元素的 property、组件的 property、指令的 property
Attribute(极少数情况下)	attribute（例外情况）
CSS 类	class property
样式	style property
事件	元素的事件、组件的事件、指令的事件
双向	事件与 property

1、属性绑定示例

当要渲染的数据类型是字符串时，没有技术上的理由证明哪种形式更好。但数据类型不是字符串时，就必须使用属性绑定了。

元素：<img [src]="heroImageUrl">
组件(父子组件之间通讯)：<app-hero-detail [hero]="currentHero"></app-hero-detail>
指令：<div [ngClass]="{'special': isSpecial}"></div>
复制代码

2、Attribute绑定示例

<button [attr.aria-label]="help">help</button>
复制代码

3、CSS 类绑定示例

<div [class.special]="isSpecial">Special</div>
复制代码

4、样式绑定示例

<button [style.color]="isSpecial ? 'red' : 'green'">
复制代码

5、事件绑定示例

元素：<button (click)="onSave()">Save</button>
组件(父子组件之间通讯)：<app-hero-detail (deleteRequest)="deleteHero()"></app-hero-detail>
指令：<div (myClick)="clicked=$event" clickable>click me</div>
复制代码

6、双向绑定

<input [(ngModel)]="name">
复制代码

转载于:https://juejin.im/post/5cd386da6fb9a0323f68b84e

Angular学习(一)：模板与数据绑定相关推荐

【转】Angular学习总结--很详细的教程
*这篇文章是转来的,做了自己的一点修改,排版.原始出处不明,如涉及原博主版权问题,请及时告知,我将会立即删除*. 1 前言前端技术的发展是如此之快,各种优秀技术.优秀框架的出现简直让人目不暇接,紧跟 ...
angular 学习资源
README.md AngularJS学习注:截至2016年10月,有一个[收集Angular 2的链接的新回购](https://github.com/jmcunningham/AngularJS ...
Learning Angular 学习Angular Lynda课程中文字幕
Learning Angular 中文字幕学习Angular 中文字幕Learning Angular 框架可以通过提供一种可以产生特殊功能的开发模型来帮助您快速完成任务本课程帮助您了解构建单页W ...
angular学习-2021.5
angular学习笔记 1.基本概览模块 Module 组件 Component 指令 Directive 服务 Service 路由 Router 2. 模块Module 2.1 模块的含义 2. ...
Angular学习教程-英雄之旅
Angular学习教程-英雄之旅官网链接 https://angular.cn/tutorial 文章目录 Angular学习教程-英雄之旅一.能学习到二.创建项目三.英雄编辑器 Part1 ...
SilverLight学习笔记--Silverlight之数据绑定初探
数据绑定(Data Binding)是用户界面UI和业务对象或其它数据提供者(data provider)的连接.用户界面对象称为目标,数据提供者成为数据源. 数据绑定帮助隔离应用程序的用户界面层 ...
templateref html内容,angular之ng-template模板加载
angular之ng-template模板加载 2019-01-07 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了angular之ng-template模板加 ...
angular学习是有好处
Angular是框架的一种,不学也能开发前端.学backbone或者ember也能开发前端.没有js的mvc,就光弄个jquery,也能开发前端. 那到底要不要学?个人觉得就是要看发展趋势.angu ...
Angular学习总结（Angular2及其以后版本）
Angular学习总结 1.Angular和Angular.js介绍 2. 环境搭建 3.项目创建 4.项目运行 5.打包 6.相关资料补充(UI地址及其相关使用方法的博客) 7.电梯 1.Angul ...
设计模式学习笔记——模板(Template)模式
设计模式学习笔记--模板(Template)模式 @(设计模式)[设计模式, 模板模式, template, 模板方法] 设计模式学习笔记模板Template模式基本介绍模板案例类图实现代码 ...

Angular学习(一)：模板与数据绑定

一、绑定语法

二、绑定目标

1、属性绑定示例

2、Attribute绑定示例

3、CSS 类绑定示例

4、样式绑定示例

5、事件绑定示例

6、双向绑定

Angular学习(一)：模板与数据绑定相关推荐

最新文章

热门文章