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


Posted in Javascript onAugust 09, 2017

这两天学习了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的事件绑定中暴露的表达式,它的值为事件的载体。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript XML和string相互转化实现代码
Jul 04 Javascript
file模式访问网页时iframe高度自适应解决方案
Jan 16 Javascript
js特殊字符过滤的示例代码
Mar 05 Javascript
单击和双击事件的冲突处理示例代码
Apr 03 Javascript
js限制checkbox选中个数以限制六个为例
Jul 15 Javascript
深入分析escape()、encodeURI()、encodeURIComponent()的区别及示例
Aug 04 Javascript
详解angular2封装material2对话框组件
Mar 03 Javascript
一个Vue视频媒体多段裁剪组件的实现示例
Aug 09 Javascript
微信小程序利用swiper+css实现购物车商品删除功能
Mar 06 Javascript
微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解
May 14 Javascript
Vue3为什么这么快
Sep 23 Javascript
HTML+VUE分页实现炫酷物联网大屏功能
May 27 Vue.js
Ionic3实现图片瀑布流布局
Aug 09 #Javascript
JavaScript闭包和回调详解
Aug 09 #Javascript
ionic 3.0+ 项目搭建运行环境的教程
Aug 09 #Javascript
JavaScript实现的浏览器下载文件的方法
Aug 09 #Javascript
Node.js五大应用性能技巧小结(必须收藏)
Aug 09 #Javascript
详解用node搭建简单的静态资源管理器
Aug 09 #Javascript
vue页面使用阿里oss上传功能的实例(二)
Aug 09 #Javascript
You might like
法压式咖啡之制作法
2021/03/03 冲泡冲煮
PHP的单引号和双引号 字符串效率
2009/05/27 PHP
destoon实现资讯信息前面调用它所属分类的方法
2014/07/15 PHP
彻底删除thinkphp3.1案例blog标签的方法
2014/12/05 PHP
php实现redis数据库指定库号迁移的方法
2015/01/14 PHP
什么是PEAR?什么是PECL?PHP中两个容易混淆的概念解释
2015/07/01 PHP
PHP url的pathinfo模式加载不同控制器的简单实现
2016/08/12 PHP
php curl常用的5个经典例子
2017/01/20 PHP
PHP基于redis计数器类定义与用法示例
2018/02/08 PHP
PhpSpreadsheet设置单元格常用操作汇总
2020/11/13 PHP
根据分辩率调用不同的CSS.
2007/01/08 Javascript
jquery写个checkbox——类似邮箱全选功能
2013/03/19 Javascript
在js中判断checkboxlist(.net控件客户端id)是否有选中
2013/04/11 Javascript
js中符号转意问题示例探讨
2013/08/19 Javascript
JS获取URL中的参数数据
2013/12/05 Javascript
file控件选择上传文件确定后触发的js事件是哪个
2014/03/17 Javascript
jQuery中even选择器的定义和用法
2014/12/23 Javascript
在一个页面重复使用一个js函数的方法详解
2016/12/26 Javascript
微信小程序 封装http请求实例详解
2017/01/16 Javascript
JavaScript实现移动端轮播效果
2017/06/06 Javascript
javascript实现鼠标点击生成文字特效
2019/12/24 Javascript
javascript实现点击小图显示大图
2020/11/29 Javascript
[49:29]LGD vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python 判断网络连通的实现方法
2018/04/22 Python
Python使用Excel将数据写入多个sheet
2020/05/16 Python
css3 按钮样式简单可扩展创建
2013/03/18 HTML / CSS
Perfume’s Club英国官网:购买香水和护肤品
2019/11/02 全球购物
应届大专毕业生个人自荐信
2013/09/22 职场文书
社区学习十八大感想
2014/01/22 职场文书
亲子活动总结
2014/04/26 职场文书
工作岗位说明书模板
2014/05/09 职场文书
动漫设计与制作专业推荐信
2014/07/07 职场文书
大学生档案自我鉴定(2篇)
2014/10/14 职场文书
2014年党风廉政工作总结
2014/12/03 职场文书
活动费用申请报告
2015/05/15 职场文书
alibaba seata服务端具体实现
2022/02/24 Java/Android