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 相关文章推荐
JavaScript面向对象之体会[总结]
Nov 13 Javascript
jQuery如何实现点击页面获得当前点击元素的id或其他信息
Jan 09 Javascript
ExtJs纵坐标值重复问题的解决方法
Feb 27 Javascript
js中回调函数的学习笔记
Jul 31 Javascript
让JavaScript的Alert弹出框失效的方法禁止弹出警告框
Sep 03 Javascript
jQuery中页面返回顶部的方法总结
Dec 30 Javascript
JS实现的模仿QQ头像资料卡显示与隐藏效果
Apr 07 Javascript
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 jQuery
移动web开发之touch事件实例详解
Jan 17 Javascript
微信小程序页面缩放式侧滑效果的实现代码
Nov 15 Javascript
Vue js with语句原理及用法解析
Sep 03 Javascript
vue-router懒加载的3种方式汇总
Feb 28 Vue.js
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判断远程url是否有效的几种方法小结
2011/10/08 PHP
Codeigniter操作数据库表的优化写法总结
2014/06/12 PHP
ThinkPHP的Widget扩展实例
2014/06/19 PHP
Apache站点配置SSL强制跳转443
2021/03/09 Servers
一段多浏览器的&quot;复制到剪贴板&quot;javascript代码
2007/03/27 Javascript
Mootools 1.2教程(3) 数组使用简介
2009/09/14 Javascript
Javascript技巧之不要用for in语句对数组进行遍历
2010/10/20 Javascript
同时使用n个window onload加载实例介绍
2013/04/25 Javascript
IE及IE6浏览器中判断JS文件加载成功失败的方法
2015/02/18 Javascript
JS实现让网页背景图片斜向移动的方法
2015/02/25 Javascript
avalonjs制作响应式瀑布流特效
2015/05/06 Javascript
基于javascript实现图片左右切换效果
2016/01/25 Javascript
微信小程序 POST请求的实例详解
2017/09/29 Javascript
详解NodeJs开发微信公众号
2018/05/25 NodeJs
更优雅的微信小程序骨架屏实现详解
2019/08/07 Javascript
jQuery实现验证用户登录
2019/12/10 jQuery
[04:56]经典回顾:前Ehome 与 前LGD
2015/02/26 DOTA
Python cookbook(数据结构与算法)保存最后N个元素的方法
2018/02/13 Python
python 获取一个值在某个区间的指定倍数的值方法
2018/11/12 Python
简单了解python的一些位运算技巧
2019/07/13 Python
python twilio模块实现发送手机短信功能
2019/08/02 Python
画pytorch模型图,以及参数计算的方法
2019/08/17 Python
Python创建一个元素都为0的列表实例
2019/11/28 Python
如何卸载python插件
2020/07/08 Python
记一次django内存异常排查及解决方法
2020/08/07 Python
详解python爬取弹幕与数据分析
2020/11/14 Python
意大利专业化妆品品牌:KIKO MILANO
2017/02/01 全球购物
世界第一曲奇连锁店:Mrs. Fields Cookies
2017/02/04 全球购物
泰国办公用品购物网站:OfficeMate
2018/02/04 全球购物
奥兰多迪士尼门票折扣:Undercover Tourist
2018/07/09 全球购物
Hurley官方网站:扎根于海滩生活方式的全球青年文化品牌
2020/05/18 全球购物
高二化学教学反思
2014/01/30 职场文书
十佳美德少年事迹材料
2014/02/05 职场文书
2015年服务员个人工作总结
2015/05/27 职场文书
一个家长教育孩子的心得体会
2016/01/15 职场文书
MySQL对数据表已有表进行分区表的实现
2021/11/01 MySQL