Angular4学习教程之DOM属性绑定详解


Posted in Javascript onJanuary 04, 2018

前言

DOM 元素触发的一些事件通过 DOM 层级结构传播,事件首先由最内层的元素开始,然后传播到外部元素,直到它们到根元素,这种传播过程称为事件冒泡。本文主要介绍了关于Angular4 DOM属性绑定的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。

简介

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

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

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

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

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

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

注意

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

事件绑定

Angular4学习教程之DOM属性绑定详解

准备工作

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

新建一个 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>

图示:

Angular4学习教程之DOM属性绑定详解

Dom属性绑定

例子一

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

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

修改 bind.component.html

<!-- 界面增加代码 -->
<!-- 属性绑定 -->
<img [src]="imgUrl" alt="">
<!-- 插值表达式绑定 -->
<img src="{{imgUrl}}" alt="">

修改 bind.component.ts

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

图示:

Angular4学习教程之DOM属性绑定详解

例子二

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"));
}

图示:

Angular4学习教程之DOM属性绑定详解

小结:

      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 相关文章推荐
经验几则 推荐
Sep 05 Javascript
js form action动态修改方法
Nov 04 Javascript
JavaScript伸缩的菜单简单示例
Dec 03 Javascript
jquery each的几种常用的使用方法示例
Jan 21 Javascript
控制文字内容的显示与隐藏示例
Jun 11 Javascript
使用jQueryMobile实现滑动翻页效果的方法
Feb 04 Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
Dec 24 Javascript
BOM系列第三篇之定时器应用(时钟、倒计时、秒表和闹钟)
Aug 17 Javascript
vue 音乐App QQ音乐搜索列表最新接口跨域设置方法
Sep 25 Javascript
element-ui 本地化使用教程详解
Oct 28 Javascript
vue 实现setInterval 创建和销毁实例
Jul 21 Javascript
深入浅析React中diff算法
May 19 Javascript
JS实现简易换图时钟功能分析
Jan 04 #Javascript
Angular4学习之Angular CLI的安装与使用教程
Jan 04 #Javascript
利用Vue2.x开发实现JSON树的方法
Jan 04 #Javascript
vue-cli配置文件——config篇
Jan 04 #Javascript
jQuery封装animate.css的实例
Jan 04 #jQuery
js 公式编辑器 - 自定义匹配规则 - 带提示下拉框 - 动态获取光标像素坐标
Jan 04 #Javascript
浅谈vuex 闲置状态重置方案
Jan 04 #Javascript
You might like
解析PHP多种序列化与反序列化的方法
2013/06/06 PHP
ThinkPHP的RBAC(基于角色权限控制)深入解析
2013/06/17 PHP
Linux下PHP连接Oracle数据库
2014/08/20 PHP
php简单获取目录列表的方法
2015/03/24 PHP
javascript 读取XML数据,在页面中展现、编辑、保存的实现
2009/10/27 Javascript
iframe自适应宽度、高度 ie6 7 8,firefox 3.86下测试通过
2010/07/29 Javascript
javascript页面动态显示时间变化示例代码
2013/12/18 Javascript
简单选项卡 js和jquery制作方法分享
2014/02/26 Javascript
JS是按值传递还是按引用传递
2015/01/30 Javascript
深入浅析javascript中的作用域(推荐)
2016/07/19 Javascript
微信小程序 加载 app-service.js 错误解决方法
2016/10/12 Javascript
ajax请求+vue.js渲染+页面加载的示例
2018/02/11 Javascript
JS实现获取当前所在周的周六、周日示例分析
2019/05/11 Javascript
[49:20]2014 DOTA2国际邀请赛中国区预选赛5.21 CIS VS TongFu
2014/05/22 DOTA
在Python的Flask框架下使用sqlalchemy库的简单教程
2015/04/09 Python
python基础之入门必看操作
2017/07/26 Python
python实现类之间的方法互相调用
2018/04/29 Python
python 除法保留两位小数点的方法
2018/07/16 Python
python requests爬取高德地图数据的实例
2018/11/10 Python
解决python明明pip安装成功却找不到包的问题
2019/08/28 Python
pytorch逐元素比较tensor大小实例
2020/01/03 Python
python构造函数init实例方法解析
2020/01/19 Python
python中的 zip函数详解及用法举例
2020/02/16 Python
关于python中的xpath解析定位
2020/03/06 Python
python实现俄罗斯方块小游戏
2020/04/24 Python
CSS3 background-image颜色渐变的实现代码
2018/09/13 HTML / CSS
美国电子元器件分销商:Newark element14
2018/01/13 全球购物
大学同学聚会邀请函
2014/01/19 职场文书
硕士研究生就业推荐信
2014/05/18 职场文书
商品陈列协议书
2014/09/29 职场文书
甲乙双方合作协议书
2014/10/13 职场文书
违反交通安全法检讨书
2014/10/24 职场文书
党员个人自我评价
2015/03/03 职场文书
学校通报表扬范文
2015/05/04 职场文书
2016年村党支部公开承诺书
2016/03/24 职场文书
详细分析PHP7与PHP5区别
2021/06/26 PHP