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 相关文章推荐
很全的显示阴历(农历)日期的js代码
Jan 01 Javascript
jquery 图片轮换效果
Jul 29 Javascript
jQuery表格行换色的三种实现方法
Jun 27 Javascript
javascript分页代码实例分享(js分页)
Dec 13 Javascript
JS判断移动端访问设备并加载对应CSS样式
Jun 13 Javascript
JS中产生20位随机数以0-9为例也可以是a-z A-Z
Aug 01 Javascript
JavaScript实现大数的运算
Nov 24 Javascript
jQuery中(function($){})(jQuery)详解
Jul 15 Javascript
D3.js中强制异步文件读取同步的几种方法
Feb 06 Javascript
JS+CSS3实现的简易钟表效果示例
Apr 13 Javascript
JS大坑之19位数的Number型精度丢失问题详解
Apr 22 Javascript
微信小程序如何获取群聊的openGid以及名称详解
Jul 17 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
PDO版本问题 Invalid parameter number: no parameters were bound
2013/01/06 PHP
关于ob_get_contents(),ob_end_clean(),ob_start(),的具体用法详解
2013/06/24 PHP
destoon之一键登录设置
2014/06/21 PHP
PHP中IP地址与整型数字互相转换详解
2014/08/20 PHP
php常用的安全过滤函数集锦
2014/10/09 PHP
基于GD2图形库的PHP生成图片缩略图类代码分享
2015/02/08 PHP
PHP Cli 模式设置进程名称的方法
2019/06/12 PHP
利用google提供的API(JavaScript接口)获取网站访问者IP地理位置的代码详解
2010/07/24 Javascript
使用js如何实现全选与全不选
2013/12/30 Javascript
jquery获取元素索引值index()示例
2014/02/13 Javascript
使用canvas实现仿新浪微博头像截取上传功能
2015/09/02 Javascript
关于JS中prototype的理解
2015/09/07 Javascript
jQuery实现浮动层随浏览器滚动条滚动的方法
2015/09/22 Javascript
浅谈node.js中async异步编程
2015/10/22 Javascript
JavaScript基于DOM操作实现简单的数学运算功能示例
2017/01/16 Javascript
JavaScript函数柯里化原理与用法分析
2017/03/31 Javascript
深入理解Vue transition源码分析
2017/07/30 Javascript
解决vue项目打包后提示图片文件路径错误的问题
2018/07/04 Javascript
创建Vue项目以及引入Iview的方法示例
2018/12/03 Javascript
微信小程序组件传值图示过程详解
2019/07/31 Javascript
javascript设计模式 ? 组合模式原理与应用实例分析
2020/04/14 Javascript
[57:12]完美世界DOTA2联赛循环赛 Inki vs Matador BO2第一场 10.31
2020/11/02 DOTA
php使用递归与迭代实现快速排序示例
2014/01/23 Python
python使用xslt提取网页数据的方法
2018/02/23 Python
Django 实现下载文件功能的示例
2018/03/06 Python
python实现快速排序的示例(二分法思想)
2018/03/12 Python
Python中利用aiohttp制作异步爬虫及简单应用
2018/11/29 Python
pytorch:model.train和model.eval用法及区别详解
2020/02/20 Python
python 字典item与iteritems的区别详解
2020/04/25 Python
pycharm sciview的图片另存为操作
2020/06/01 Python
详解移动端HTML5音频与视频问题及解决方案
2018/08/22 HTML / CSS
管理信息系学生的自我评价
2014/01/11 职场文书
2014国庆节幼儿园亲子活动方案
2014/09/16 职场文书
离婚协议书范本2014
2014/10/27 职场文书
签字仪式主持词
2015/07/03 职场文书
Python爬虫入门案例之回车桌面壁纸网美女图片采集
2021/10/16 Python