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 入门基础知识 想学习js的朋友可以参考下
Dec 26 Javascript
js的.innerHTML = &quot;&quot;IE9下显示有错误的解决方法
Sep 16 Javascript
javascript禁用Tab键脚本实例
Nov 22 Javascript
JavaScript通过正则表达式实现表单验证电话号码
Mar 07 Javascript
jQuery中last()方法用法实例
Jan 06 Javascript
详解Matlab中 sort 函数用法
Mar 20 Javascript
Vue.js学习之过滤器详解
Jan 22 Javascript
Kindeditor单独调用单图上传增加预览功能的实例
Jul 31 Javascript
angular+ionic返回上一页并刷新页面
Aug 08 Javascript
浅谈Vue 性能优化之深挖数组
Dec 11 Javascript
Layui数据表格判断编辑输入的值,是否为我需要的类型详解
Oct 26 Javascript
JavaScrip如果基于url实现图片下载
Jul 03 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
codeigniter上传图片不能正确识别图片类型问题解决方法
2014/07/25 PHP
PHP中cookie和session的区别实例分析
2014/08/28 PHP
PHP JSON格式的中文显示问题解决方法
2015/04/09 PHP
php模拟post上传图片实现代码
2016/06/24 PHP
Adnroid 微信内置浏览器清除缓存
2016/07/11 PHP
PHP链表操作简单示例
2016/10/15 PHP
根据当前时间在jsp页面上显示上午或下午
2014/08/18 Javascript
js 数组去重的四种实用方法
2014/09/09 Javascript
浅谈jquery.fn.extend与jquery.extend区别
2015/07/13 Javascript
js jquery获取当前元素的兄弟级 上一个 下一个元素
2015/09/01 Javascript
JavaScript中的时间处理小结
2016/02/24 Javascript
JavaScript控制输入框中只能输入中文、数字和英文的方法【基于正则实现】
2017/03/03 Javascript
JavaScript实现自动跳转文本功能
2017/05/25 Javascript
如何编写一个完整的Angular4 FormText 组件
2017/11/18 Javascript
vuex操作state对象的实例代码
2018/04/25 Javascript
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
2018/06/05 jQuery
使用FormData实现上传多个文件
2018/12/04 Javascript
详解微信UnionID作用
2019/05/15 Javascript
[03:23]我的刀塔你不可能这么可爱 第一期金萌萌的故事
2014/06/20 DOTA
[02:04]完美世界城市挑战赛秋季赛报名开始 谁是solo路人王?
2019/10/10 DOTA
深入理解python函数递归和生成器
2016/06/06 Python
详解Python 装饰器执行顺序迷思
2018/08/08 Python
python求质数的3种方法
2018/09/28 Python
django Serializer序列化使用方法详解
2018/10/16 Python
python可视化实现KNN算法
2019/10/16 Python
Keras Convolution1D与Convolution2D区别说明
2020/05/22 Python
python 实现ping测试延迟的两种方法
2020/12/10 Python
美国乒乓球设备、配件和服装品牌:Killerspin
2020/06/07 全球购物
5个HTML5的常用本地存储方式详解与介绍
2021/03/27 HTML / CSS
2014年房产销售工作总结
2014/12/08 职场文书
2015年领导班子工作总结
2015/05/23 职场文书
2019求职信:应届生求职信范文
2019/04/24 职场文书
教师实习自我鉴定总结
2019/08/20 职场文书
超详细教你怎么升级Mysql的版本
2021/05/19 MySQL
Ajax实现异步加载数据
2021/11/17 Javascript
Python批量解压&压缩文件夹的示例代码
2022/04/04 Python