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数组长度循环数组内所有元素
Dec 27 Javascript
DIV始终居中的js代码
Feb 17 Javascript
使用jquery animate创建平滑滚动效果(可以是到顶部、到底部或指定地方)
May 27 Javascript
node.js中的fs.mkdirSync方法使用说明
Dec 17 Javascript
使用jquery操作session方法分享
Jan 22 Javascript
学习JavaScript编程语言的8张思维导图分享
Mar 27 Javascript
javascript简单判断输入内容是否合法的方法
May 11 Javascript
手机注册发送验证码倒计时的简单实例
Nov 15 Javascript
手把手带你封装一个vue component第三方库
Feb 14 Javascript
JS实现简单日历特效
Jan 03 Javascript
分享8个JavaScript库可更好地处理本地存储
Oct 12 Javascript
vue项目中的支付功能实现(微信支付和支付宝支付)
Feb 18 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
php知道与问问的采集插件代码
2010/10/12 PHP
php实现表单多按钮提交action的处理方法
2015/10/24 PHP
PHP将MySQL的查询结果转换为数组并用where拼接的示例
2016/05/13 PHP
php 遍历目录,生成目录下每个文件的md5值并写入到结果文件中
2016/12/12 PHP
PHP用户注册邮件激活账户的实现代码
2017/05/31 PHP
PHP/ThinkPHP实现批量打包下载文件的方法示例
2017/07/31 PHP
javascript 限制输入和粘贴(IE,firefox测试通过)
2008/11/14 Javascript
JS代码放在head和body中的区别分析
2011/12/01 Javascript
JavaScript prototype属性深入介绍
2012/11/27 Javascript
js实现简易的单数字随机抽奖(0-9)
2020/03/19 Javascript
jQuery中常用的遍历函数用法实例总结
2015/09/01 Javascript
JS未跨域操作iframe里的DOM
2016/06/01 Javascript
js中数组插入、删除元素操作的方法
2017/02/15 Javascript
AngularJS ng-repeat指令及Ajax的应用实例分析
2017/07/06 Javascript
React Native中导航组件react-navigation跨tab路由处理详解
2017/10/31 Javascript
nodejs搭建本地服务器轻松解决跨域问题
2018/03/21 NodeJs
antd Upload 文件上传的示例代码
2018/12/14 Javascript
VUE引入第三方js包及调用方法讲解
2019/03/01 Javascript
JavaScript中的函数申明、函数表达式、箭头函数
2019/12/06 Javascript
详解Python中break语句的用法
2015/05/14 Python
python实现的简单RPG游戏流程实例
2015/06/28 Python
简单了解Django模板的使用
2017/12/20 Python
Python pymongo模块用法示例
2018/03/31 Python
深入浅析python 中的匿名函数
2018/05/21 Python
Python远程视频监控程序的实例代码
2019/05/05 Python
Python读取VOC中的xml目标框实例
2020/03/10 Python
Python小白学习爬虫常用请求报头
2020/06/03 Python
Django Session和Cookie分别实现记住用户登录状态操作
2020/07/02 Python
使用CSS3的font-face字体嵌入样式的方法讲解
2016/05/13 HTML / CSS
CSS3制作圆角图片和椭圆形图片
2016/07/08 HTML / CSS
HTML5 script元素async、defer异步加载使用介绍
2013/08/23 HTML / CSS
岗位竞聘演讲稿
2014/01/10 职场文书
幼儿园毕业寄语
2014/04/03 职场文书
检讨书范文大全
2015/05/07 职场文书
会计专业2019暑假实习报告
2019/06/21 职场文书
高中议论文(范文2篇)
2019/08/19 职场文书