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)
- 使用字符串插值方式。
{{ 变量名 }}
- 使用方挎号
[]
,方挎号内包含属性名。 - 在属性名前添加
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>
我们来看看这里面发生了什么?
- [value]=”username” - 绑定变量
username
到input
元素的value属性。 - (input)=”username = $event.target.value” - 绑定
input
元素的input
事件到js代码username = $event.target.value
- $event - 在Angular的事件绑定中暴露的表达式,它的值为事件的载体。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
AngularJS 双向数据绑定详解简单实例
angular的双向数据绑定,个人理解是,通过model建立数据模型,那么视图上的数据就会对应存储在angular程序里,视图上的数据变化会同步到model,model的数据改变也会同步到视图. 下面的demo演示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hello, AngularJS!</titl
-
AngularJS入门教程之数据绑定原理详解
本文实例讲述了AngularJS数据绑定原理.分享给大家供大家参考,具体如下: 注 这篇文章主要是写给新手的,是给那些刚刚开始接触Angular,并且想了解数据帮定是如何工作的人.如果你已经对Angular比较了解了,那强烈建议你直接去阅读源代码. Angular用户都想知道数据绑定是怎么实现的.你可能会看到各种各样的词汇:$watch,$apply,$digest,dirty-checking...它们是什么?它们是如何工作的呢?这里我想回答这些问题,其实它们在官方的文档里都已经回答了,但是我
-
AngularJS1.X学习笔记2-数据绑定详解
上一篇从整体上认识了Angular,从现在开始更加深入的学习Angular的特性.本次学习的是数据绑定.应该所有的MVC框架都会用到数据绑定,比如我所知道的ThinkPHP.struts等,只有实现了数据绑定才能将模型层和视图层分离,实现MVC.Angular的数据绑定比较特别,它支持双向数据绑定. 1.ng-bind <!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> &
-
Angular2数据绑定详解
大致介绍 Angular2中数据绑定的方式默认是以单向方式,数据绑定的方式可以分为: 1.属性绑定和插值表达式 组件类-> 模板 2.事件绑定:模板 -> 组件类 3.双向绑定: 模板 <-> 组件类 事件绑定 事件绑定是把模板中的事件绑定到组件类中的方法上,例如在一个组件中的HTML代码是: <p> <a (click)="doClick($event)">点我</a> </p> (click)表示要进行的操作,
-
Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
我在整理javascript高级程序设计的笔记的时候看到面向对象设计那章,讲到对象属性分为数据属性和访问器属性,我们平时用的js对象90%以上都只是用到数据属性;我们向来讲解下数据属性和访问器属性到底是什么? 数据属性:数据属性包含一个数据值的位置,在这个位置可以读取和写入值. 访问器属性:访问器属性不包含数据值;他们包含一对getter和setter函数在读取访问器属性时,会调用getter函数,这个函数负责返回有效的值,在写入访问器属性时,会调用setter函数并传入新值. 这里介绍的重点是
-
详谈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脚手架的学习,所以等我学会以后准备在
-
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.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 ES5的原理: Object.defineProperty 对数据进行拦截 简单小案例 <body> 姓名: <span id="name"></span> <br /> <input type="text" id="inputName" /> </body> 改变in
-
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才引入了窗口函数.窗口函数
随机推荐
- iOS实时监控网络状态的改变
- Java+mysql用户注册登录功能
- 详解python发送各类邮件的主要方法
- 手把手搭建安装基于windows的Vue.js运行环境
- Python执行Linux系统命令的4种方法
- 黑客避开检测的手段
- PHP使用MPDF类生成PDF的方法
- 网站推广的几点规则和方法
- 谈谈对jquery ui tabs 的理解
- 关于Java中静态代码块的执行浅析
- Android控件AppWidgetProvider使用方法详解
- Android第三方微信支付教程
- C++中的菱形继承深入分析
- angular json对象push到数组中的方法
- Java五子棋单机版源码分享
- rsync指定ssh端口进行文件同步的方法
- Java全排列算法字典序下的下一个排列讲解
- java获取指定开始时间与结束时间之间的所有日期
- Unity3D实现导航效果
- 如何在Android中实现一个简易的Http服务器