Angular 2.0+ 的数据绑定的实现示例

这两天学习了Angular感觉 数据绑定这个地方知识点挺多的，而且很重要，所以，今天添加一点小笔记。

前言

我们使用如下的组件代码进行本文的所有演示

export class AppComponent {
 angularLogo = 'https://angular.io/assets/images/logos/angular/angular.svg';
 userName="David";
 newItem() {
  console.log("Hello world!");
 }
}

组件到DOM - Component to DOM

属性绑定，单向数据绑定。可以有下面三种不同的书写方式。

 ![]({{ angularLogo }})
 <img [src]="angularLogo">
 ![](angularLogo)
  1. 使用字符串插值方式。 {{ 变量名 }}
  2. 使用方挎号 [] ，方挎号内包含属性名。
  3. 在属性名前添加bind- 也可以达到同样的效果。

DOM到组件 - DOM to Component

事件绑定，当发生特定的DOM事件（例如：click，change，keyup）时，调用组件中指定方法。在下面的示例中，单击按钮时调用该组件的newItem（）方法：

<button (click)="newItem()"></button>

双向数据绑定

使用[(ngModel)]="变量名"方式，可以实现双向数据绑定。

<input type="text" [(ngModel)]="userName">
<h1>Hello {{userName}}!</h1>

从Angular 2.x版开始，Angular中的数据绑定真的只是归结为属性绑定和事件绑定。 双向数据绑定是不存在的东西。 如果没有ngModel指令，我们如何实现双向数据绑定？如下所示：

<input [value]="username" (input)="username = $event.target.value">
<p>Hello {{username}}!</p>

我们来看看这里面发生了什么？

  1. [value]=”username” - 绑定变量username 到input元素的value属性。
  2. (input)=”username = $event.target.value” - 绑定input元素的input事件到js代码username = $event.target.value
  3. $event - 在Angular的事件绑定中暴露的表达式，它的值为事件的载体。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详谈AngularJs 控制器、数据绑定、作用域

    详谈AngularJs 控制器、数据绑定、作用域

    上次分享完该系列文章后有朋友也建议说1.x版本除了维护也没有必要学习,可以学习2.0开始学习,我也知道1.x无论是从性能还是架构上都没有2.x好,但是我想因为现在也有一些朋友还在用1.x版本,因为1.x升级到2.x难度很大,甚至可以说重构,就向我们公司现在还在用1.x版本,所以我还是决定把这系列写完,也给自己一个整理的过程.本人现在也正在学习Angular4.0版本的学习,但是4.0用typescript及nodejs集成比较大,还有学习angular-cli脚手架的学习,所以等我学会以后准备在

  • Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)

    Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)

    我在整理javascript高级程序设计的笔记的时候看到面向对象设计那章,讲到对象属性分为数据属性和访问器属性,我们平时用的js对象90%以上都只是用到数据属性;我们向来讲解下数据属性和访问器属性到底是什么? 数据属性:数据属性包含一个数据值的位置,在这个位置可以读取和写入值. 访问器属性:访问器属性不包含数据值;他们包含一对getter和setter函数在读取访问器属性时,会调用getter函数,这个函数负责返回有效的值,在写入访问器属性时,会调用setter函数并传入新值. 这里介绍的重点是

  • Angular2数据绑定详解

    Angular2数据绑定详解

    大致介绍 Angular2中数据绑定的方式默认是以单向方式,数据绑定的方式可以分为: 1.属性绑定和插值表达式 组件类-> 模板 2.事件绑定:模板 -> 组件类 3.双向绑定: 模板 <-> 组件类 事件绑定 事件绑定是把模板中的事件绑定到组件类中的方法上,例如在一个组件中的HTML代码是: <p> <a (click)="doClick($event)">点我</a> </p> (click)表示要进行的操作,

  • AngularJS 双向数据绑定详解简单实例

    AngularJS 双向数据绑定详解简单实例

    angular的双向数据绑定,个人理解是,通过model建立数据模型,那么视图上的数据就会对应存储在angular程序里,视图上的数据变化会同步到model,model的数据改变也会同步到视图. 下面的demo演示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hello, AngularJS!</titl

  • AngularJS1.X学习笔记2-数据绑定详解

    AngularJS1.X学习笔记2-数据绑定详解

    上一篇从整体上认识了Angular,从现在开始更加深入的学习Angular的特性.本次学习的是数据绑定.应该所有的MVC框架都会用到数据绑定,比如我所知道的ThinkPHP.struts等,只有实现了数据绑定才能将模型层和视图层分离,实现MVC.Angular的数据绑定比较特别,它支持双向数据绑定. 1.ng-bind <!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> &

  • AngularJS入门教程之数据绑定原理详解

    本文实例讲述了AngularJS数据绑定原理.分享给大家供大家参考,具体如下: 注 这篇文章主要是写给新手的,是给那些刚刚开始接触Angular,并且想了解数据帮定是如何工作的人.如果你已经对Angular比较了解了,那强烈建议你直接去阅读源代码. Angular用户都想知道数据绑定是怎么实现的.你可能会看到各种各样的词汇:$watch,$apply,$digest,dirty-checking...它们是什么?它们是如何工作的呢?这里我想回答这些问题,其实它们在官方的文档里都已经回答了,但是我

  • AngularJS入门教程之数据绑定用法示例

    AngularJS入门教程之数据绑定用法示例

    本文实例讲述了AngularJS数据绑定用法.分享给大家供大家参考,具体如下: 数据绑定是AngularJS中非常重要的特性,我们看一下下面的例子: <!DOCTYPE html> <html ng-app> <head lang="en"> <meta charset="UTF-8"> <script type="text/javascript" src="angular-1.3.

  • Angular 2.0+ 的数据绑定的实现示例

    这两天学习了Angular感觉 数据绑定这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记. 前言 我们使用如下的组件代码进行本文的所有演示 export class AppComponent { angularLogo = 'https://angular.io/assets/images/logos/angular/angular.svg'; userName="David"; newItem() { console.log("Hello world!"

  • 使用angular帮你实现拖拽的示例

    拖拽有多种写法,在这里就看一看angular版的拖拽. <!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box{ width: 100px; height: 100px; background:

  • Angular 5.0 来了! 有这些大变化

    Angular 5.0 来了! 有这些大变化

    我们很高兴地宣布Angular 5.0.0--五角形甜甜圈发布啦!这又是一个主版本,包含新功能并修复了很多bug.它再次体现了我们把Angular做得更小.更快.更好用的一贯目标. 以下简单介绍v5的重大变化.要了解详情,请看changelog. 构建优化器 5.0.0开始,通过CLI执行的产品构建默认使用构建优化器. 构建优化器是CLI中的一个工具,它基于我们对你Angular应用的理解,可以把构建后的包变得更小. 构建优化器有两个主要任务.首先,把你应用的某些部分标记为pure,以便原有工具

  • angular实现input输入监听的示例

    最近做用户注册登录时,需要监控用户的输入以此来给用户提示,用到了angular的$watch功能,以下是例子: jsp: <form class="register ng-scope" ng-app="regist_app" onsubmit="registSumbitValid()" ng-controller="regist_control"> <div class="item">

  • vue 2.0 购物车小球抛物线的示例代码

    本文介绍了vue 2.0 购物车小球抛物线的示例代码,分享给大家,具体如下: 备注:此项目模仿 饿了吗.我用的是最新的Vue, 视频上的一些写法已经被废弃了. 布局代码 <div class="ball-container"> <transition name="drop" v-for="ball in balls" @before-enter="beforeDrop" @enter="droppi

  • Angular+ionic实现折叠展开效果的示例代码

    1,html中 <ion-item> <div class="middle-content-order"> <div class="middle-order-icon"> <ion-icon name="chevron-up-outline" class="up-gray" item-right *ngIf="!isShow" (click)="isSho

  • SpringBoot2.3.0配置JPA的实现示例

    JPA顾名思义就是Java Persistence API的意思,是JDK 5.0注解或XML描述对象-关系表的映射关系,并将运行期的实体对象持久化到数据库中. 依赖 spring-boot-starter-data-jdbc spring-boot-starter-data-jpa mysql-connector-java <dependency> <groupId>org.springframework.boot</groupId> <artifactId&g

  • Vue2.0/3.0双向数据绑定的实现原理详解

    Vue2.0/3.0双向数据绑定的实现原理详解

    Vue2.0/3.0 双向数据绑定的实现原理 双向数据绑定简意 即数据的改变能让页面重新渲染 Vue2.0 ES5的原理: Object.defineProperty 对数据进行拦截 简单小案例 <body> 姓名: <span id="name"></span> <br /> <input type="text" id="inputName" /> </body> 改变in

  • MySQL8.0中的窗口函数的示例代码

    MySQL8.0中的窗口函数的示例代码

    目录 1.窗口函数与聚合函数 2.常见的窗口函数 3.over子句 4.代码示例 4.1row_number\dense_rank\ rank 4.2cume_dist\percent_rank 4.3first_value\last_value\nth_value 4.4ntile() 4.5lag\lead 4.6聚合函数 4.7orderby子句 4.8 window子句 4.9 rows和range 在以前的MySQL版本中是没有窗口函数的,直到MySQL8.0才引入了窗口函数.窗口函数

随机推荐