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实现检测指定目录是否存在的方法
Jan 12 Javascript
Javascript valueOf 使用方法
Dec 28 Javascript
jquery+json实现的搜索加分页效果
Mar 31 Javascript
仿谷歌主页js动画效果实现代码
Jul 14 Javascript
jqueryUI里拖拽排序示例分析
Feb 26 Javascript
浅谈layer的iframe弹窗给里面的标签赋值的问题
Nov 10 Javascript
Angular4学习笔记之根模块与Ng模块
Sep 09 Javascript
vue中的模态对话框组件实现过程
May 01 Javascript
vue组件之间通信方式实例总结【8种方式】
Feb 22 Javascript
10种JavaScript最常见的错误(小结)
Jun 21 Javascript
在vue中高德地图引入和轨迹的绘制的实现
Oct 11 Javascript
javaScript把其它类型转换为Number类型
Oct 13 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
上海无线电三厂简史修改版
2021/03/01 无线电
PHP新手上路(九)
2006/10/09 PHP
php正则过滤html标签、空格、换行符的代码(附说明)
2010/10/25 PHP
thinkphp5 加载静态资源路径与常量的方法
2017/12/24 PHP
js批量设置样式的三种方法不推荐使用with
2013/02/25 Javascript
Javascript Event(事件)的传播与冒泡
2017/01/23 Javascript
JavaScript和jQuery制作光棒效果
2017/02/24 Javascript
使用ES6语法重构React代码详解
2017/05/09 Javascript
JS+CSS实现网页加载中的动画效果
2017/10/27 Javascript
微信小程序访问豆瓣电影api的实现方法
2019/03/31 Javascript
nodejs简单抓包工具使用详解
2019/08/23 NodeJs
layui插件表单验证提交触发提交的例子
2019/09/09 Javascript
详解vue中v-model和v-bind绑定数据的异同
2020/08/10 Javascript
PyCharm使用教程之搭建Python开发环境
2016/06/07 Python
Python文件夹与文件的相关操作(推荐)
2016/07/25 Python
python下setuptools的安装详解及No module named setuptools的解决方法
2017/07/06 Python
python 去除二维数组/二维列表中的重复行方法
2019/01/23 Python
Python3的高阶函数map,reduce,filter的示例详解
2019/07/23 Python
python提取照片坐标信息的实例代码
2019/08/14 Python
pytorch 模型可视化的例子
2019/08/17 Python
python计算二维矩形IOU实例
2020/01/18 Python
python函数定义和调用过程详解
2020/02/09 Python
python FTP编程基础入门
2021/02/27 Python
终止合同协议书
2014/04/17 职场文书
一年级小学生评语
2014/04/22 职场文书
教师节宣传方案
2014/05/23 职场文书
文秘专业应届生求职信
2014/05/26 职场文书
公司门卫工作职责
2014/06/28 职场文书
企业务虚会发言材料
2014/10/20 职场文书
硕士论文致谢范文
2015/05/14 职场文书
广播体操比赛主持词
2015/06/29 职场文书
《三国志》赏析
2019/08/27 职场文书
python3实现Dijkstra算法最短路径的实现
2021/05/12 Python
Pytest中conftest.py的用法
2021/06/27 Python
Python捕获、播放和保存摄像头视频并提高视频清晰度和对比度
2022/04/14 Python
IIS服务器中设置HTTP重定向访问HTTPS
2022/04/29 Servers