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 相关文章推荐
jquery.lazyload  实现图片延迟加载jquery插件
Feb 06 Javascript
多次注册事件会导致一个事件被触发多次的解决方法
Aug 12 Javascript
JS获取键盘上任意按键的值(实例代码)
Nov 12 Javascript
通过pjax实现无刷新翻页(兼容新版jquery)
Jan 31 Javascript
javascript中slice(),splice(),split(),substring(),substr()使用方法
Mar 13 Javascript
JS+HTML5实现的前端购物车功能插件实例【附demo源码下载】
Oct 17 Javascript
微信小程序 form组件详解
Oct 25 Javascript
ES6中Iterator与for..of..遍历用法分析
Mar 31 Javascript
mongoose更新对象的两种方法示例比较
Dec 19 Javascript
浅谈webpack 自动刷新与解析
Apr 09 Javascript
JS使用正则表达式获取小括号、中括号及花括号内容的方法示例
Jun 01 Javascript
React中使用UMEditor的方法示例
Dec 27 Javascript
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
常见php数据文件缓存类汇总
2014/12/05 PHP
PHP实现的蚂蚁爬杆路径算法代码
2015/12/03 PHP
Symfony2安装第三方Bundles实例详解
2016/02/04 PHP
利用php实现一周之内自动登录存储机制(cookie、session、localStorage)
2016/10/31 PHP
php设计模式之模板模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
基于jQuery的简单的列表导航菜单
2011/03/02 Javascript
Javascript编写俄罗斯方块思路及实例
2015/07/07 Javascript
轻松实现javascript数据双向绑定
2015/11/11 Javascript
jQuery数据类型小结(14个)
2016/01/08 Javascript
JavaScript页面实时显示当前时间实例代码
2016/10/23 Javascript
基于bootstrap风格的弹框插件
2016/12/28 Javascript
微信小程序教程系列之新建页面(4)
2017/04/17 Javascript
详解nodejs通过代理(proxy)发送http请求(request)
2017/09/22 NodeJs
关于 angularJS的一些用法
2017/11/29 Javascript
浅谈Vue内置component组件的应用场景
2018/03/27 Javascript
JavaScript中关于base64的一些事
2019/05/06 Javascript
JS事件流与事件处理程序实例分析
2019/08/16 Javascript
JS操作Fckeditor的一些常用方法(获取、插入等)
2020/02/19 Javascript
[02:31]2018年度DOTA2最具人气选手-完美盛典
2018/12/16 DOTA
[05:49]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS 选手采访
2021/03/11 DOTA
python多线程http下载实现示例
2013/12/30 Python
HTML5 Canvas概述
2009/08/26 HTML / CSS
HTML5+CSS设置浮动却没有动反而在中间且错行的问题
2020/05/26 HTML / CSS
俄罗斯外国汽车和国产汽车配件网上商店:Движком
2020/04/19 全球购物
澳大利亚在线批发商:Simply Wholesale
2021/02/24 全球购物
类的核心特性有哪些
2014/01/01 面试题
教师应聘个人求职信
2013/12/10 职场文书
教师简历自我评价
2014/02/03 职场文书
乡镇消防工作实施方案
2014/03/27 职场文书
促销活动总结怎么写
2014/06/25 职场文书
金融专业毕业生自荐信
2014/06/26 职场文书
财政专业大学生职业生涯规划书
2014/09/17 职场文书
技术支持岗位职责
2015/02/13 职场文书
企业党员岗位承诺书
2015/04/27 职场文书
团委副书记工作总结
2015/08/14 职场文书
土木工程生产实习心得体会
2016/01/22 职场文书