Angular2学习笔记之数据绑定的示例代码


Posted in Javascript onJanuary 03, 2018

简介

使用插值表达式将一个表达式的值显示在模版上

<img src="{{imgUrl}}" alt="">
<h1>{{productTitle}}</h1>

使用方括号将HTML标签的一个属性值绑定到一个表达式上

<img [src]="imgUrl" alt="">

使用小括号将组件控制器的一个方法绑定到模版上面的一个事件的处理器上

<button (click)="onClickButton($event)">按钮绑定事件</button>

注意

在开始下面的例子之前,请先确认已经新建了一个工程。如果没有,请查看:Angular2学习笔记之Angular CLI 安装和使用教程

事件绑定

Angular2学习笔记之数据绑定的示例代码

准备工作

了解目的:在模版的界面上面增加一个按钮,然后通过小括号绑定一个事件。

新建一个 bind 组件,使用命令:  ng g c bind

修改 bind.component.html

<!-- 界面增加代码 -->
<button (click)="onClickButton($event)">按钮绑定事件</button>

修改 bind.component.ts

//在 BindComponent 类方法中增加方法体
onClickButton(event: any){
 console.log(event);
}

修改 app.component.html

<!-- 增加 app-bind 组件 -->
<app-bind></app-bind>

图示:

Angular2学习笔记之数据绑定的示例代码

Dom属性绑定

例子一

插值表达式 与 属性绑定 之间的关系

两种方式都可以实现,angular 在实现的逻辑上面是: 在程序加载组件的时候,会先将 "插值表达式" 翻译为 "属性绑定"

修改 bind.component.html

<!-- 界面增加代码 -->

<!-- 属性绑定 -->
<img [src]="imgUrl" alt="">

<!-- 插值表达式绑定 -->
<img src="{{imgUrl}}" alt="">

修改 bind.component.ts

//增加变量
imgUrl: string = http://placehold.it/320x280;

图示:

Angular2学习笔记之数据绑定的示例代码

例子二

dom 属性 与 html 属性的区别

HTML元素的 DOM属性和 HTML 属性是有部分区别的,这点需要明确差异。

修改 bind.component.html

<!-- 增加代码 -->
<div>
 <input type="text" value="Tom" (input)="onInputEvent($event)">
</div>

修改 bind.component.ts

//增加 event事件
onInputEvent(event: any){
 //获取的是 dom 属性,即输入属性
 console.log(event.target.value);

 //获取的是 html 属性,也就是初始化的属性
 console.log(event.target.getAttribute("value"));

}

图示:

Angular2学习笔记之数据绑定的示例代码

总结:

1.少量的 HTML属性和 DOM属性之间有这 1 :1 的映射关系,如 :id
2.有些有 HTML属性,没有DOM 属性, 如:colspan
3.有些有 DOM属性,没有HTML 属性,如:textContent
4.就算名字一样,DOM属性和HTML属性获取的内容可能不一样
5.模版绑定是通过DOM属性绑定的,而不是通过HTML属性
6.HTML属性指定了初始值,DOM属性表示当前值;DOM属性的值可以改变,HTML的值不能改变

例子部分完整代码

bind.component.html

<p>
 bind works!
</p>

<button (click)="onClickButton($event)">按钮绑定事件</button>

<div>
 <!-- 属性绑定 -->
 <img [src]="imgUrl" alt="">

 <!-- 插值表达式绑定 -->
 <img src="{{imgUrl}}" alt="">
</div>

<div>
 <input type="text" value="Tom" (input)="onInputEvent($event)">
</div>

bind.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
 selector: 'app-bind',
 templateUrl: './bind.component.html',
 styleUrls: ['./bind.component.css']
})
export class BindComponent implements OnInit {

 imgUrl: string = "http://placehold.it/320x280";

 constructor() { }

 ngOnInit() {
 }

 onClickButton(event: any){
  console.log(event);
 }

 onInputEvent(event: any){
  //获取的是 dom 属性,即输入属性
  console.log(event.target.value);

  //获取的是 html 属性,也就是初始化的属性
  console.log(event.target.getAttribute("value"));
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery对象和DOM对象相互转化
Apr 24 Javascript
zeroclipboard 单个复制按钮和多个复制按钮的实现方法
Jun 14 Javascript
js实现网页抽奖实例
Aug 05 Javascript
jQuery左侧大图右侧小图焦点图幻灯切换代码分享
Aug 19 Javascript
jQuery中的Deferred和promise 的区别
Apr 03 Javascript
原生javascript实现分享到朋友圈功能 支持ios和android
May 11 Javascript
jQuery mobile的header和footer在点击屏幕的时候消失的解决办法
Jul 01 Javascript
微信小程序 实现tabs选项卡效果实例代码
Oct 31 Javascript
vue-router 学习快速入门
Mar 01 Javascript
微信小程序 登录的简单实现
Apr 19 Javascript
原生JS实现的碰撞检测功能示例
May 18 Javascript
微信小程序scroll-view点击项自动居中效果的实现
Mar 25 Javascript
vue、react等单页面项目应该这样子部署到服务器
Jan 03 #Javascript
AngularJS实现的2048小游戏功能【附源码下载】
Jan 03 #Javascript
浅谈node模块与npm包管理工具
Jan 03 #Javascript
JavaScript基于面向对象实现的猜拳游戏
Jan 03 #Javascript
JS实现的简单拖拽购物车功能示例【附源码下载】
Jan 03 #Javascript
基于js 各种排序方法和sort方法的区别(详解)
Jan 03 #Javascript
vue项目中用cdn优化的方法
Jan 03 #Javascript
You might like
PHP实现的英文名字全拼随机排号脚本
2014/07/04 PHP
php中用memcached实现页面防刷新功能
2014/08/19 PHP
php采用file_get_contents代替使用curl实例
2014/11/07 PHP
php实现用于验证所有类型的信用卡类
2015/03/24 PHP
PHP数字前补0的自带函数sprintf 和number_format的用法(详解)
2017/02/06 PHP
详细讲解JS节点知识
2010/01/31 Javascript
mysql输出数据赋给js变量报unterminated string literal错误原因
2010/05/22 Javascript
web基于浏览器的本地存储方法应用
2012/11/27 Javascript
JQueryiframe页面操作父页面中的元素与方法(实例讲解)
2013/11/19 Javascript
jQuery如何实现点击页面获得当前点击元素的id或其他信息
2014/01/09 Javascript
js检测网络是否具体连接功能的代码
2014/05/23 Javascript
javascript的document.referrer浏览器支持、失效情况总结
2014/07/18 Javascript
全面解析Bootstrap表单使用方法(表单控件)
2015/11/24 Javascript
JavaScript数组去重由慢到快由繁到简(优化篇)
2016/08/26 Javascript
JS中split()用法(将字符串按指定符号分割成数组)
2016/10/24 Javascript
Bootstrap基本组件学习笔记之input输入框组(9)
2016/12/07 Javascript
基于对象合并功能的实现示例
2017/10/10 Javascript
LayUI switch 开关监听 获取属性值、更改状态的方法
2019/09/21 Javascript
vue element upload组件 file-list的动态绑定实现
2019/10/11 Javascript
不刷新网页就能链接新的js文件方法总结
2020/03/01 Javascript
构建一个JavaScript插件系统
2020/10/20 Javascript
Python编写检测数据库SA用户的方法
2014/07/11 Python
python多线程编程中的join函数使用心得
2014/09/02 Python
PyCharm取消波浪线、下划线和中划线的实现
2020/03/03 Python
Jupyter Notebook 实现正常显示中文和负号
2020/04/24 Python
python 使用raw socket进行TCP SYN扫描实例
2020/05/05 Python
荷兰演唱会和体育比赛订票网站:viagogo荷兰
2018/04/08 全球购物
行政人员工作职责
2013/12/05 职场文书
大学新生军训自我鉴定
2014/09/18 职场文书
党员教师自我剖析材料
2014/09/29 职场文书
简易离婚协议书(范本)
2014/10/25 职场文书
三人合伙协议书范本
2014/10/29 职场文书
2014年计划生育工作总结
2014/11/14 职场文书
捐资助学感谢信
2015/01/21 职场文书
退伍军人感言
2015/08/01 职场文书
JavaScript parseInt0.0000005打印5原理解析
2022/07/23 Javascript