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 相关文章推荐
javascript与CSS复习(《精通javascript》)
Jun 29 Javascript
js三种排序算法分享
Aug 16 Javascript
js使用eval解析json实例与注意事项分享
Jan 18 Javascript
jQuery中next方法用法实例
Apr 24 Javascript
jQuery仿天猫实现超炫的加入购物车
May 04 Javascript
设置jQueryUI DatePicker默认语言为中文
Jun 04 Javascript
浅谈Jquery中Ajax异步请求中的async参数的作用
Jun 06 Javascript
BootStrap tooltip提示框使用小结
Oct 26 Javascript
JavaScript操作文件_动力节点Java学院整理
Jun 30 Javascript
angularJS开发注意事项
May 26 Javascript
动态内存分配导致影响Javascript性能的问题
Dec 18 Javascript
Three.JS实现三维场景
Dec 30 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 采集获取指定网址的内容
2010/01/05 PHP
php验证手机号码(支持归属地查询及编码为UTF8)
2013/02/01 PHP
PHP遍历目录并返回统计目录大小
2014/06/09 PHP
JSON用法之将PHP数组转JS数组,JS如何接收PHP数组
2015/10/08 PHP
PHP检测接口Traversable用法详解
2017/12/29 PHP
ThinkPHP3.2.3框架Memcache缓存使用方法实例总结
2019/04/15 PHP
php+redis实现消息队列功能示例
2019/09/19 PHP
gearman中任务的优先级和返回状态实例分析
2020/02/27 PHP
js 动态添加标签(新增一行,其实很简单,就是几个函数的应用)
2009/03/26 Javascript
js 刷新页面的代码小结 推荐
2010/04/02 Javascript
WEB高性能开发之疯狂的HTML压缩
2010/06/19 Javascript
获取数组中最大最小值方法js代码(自写)
2013/08/12 Javascript
javascript创建数组之联合数组的使用方法示例
2013/12/26 Javascript
jQuery实现鼠标可拖动调整表格列宽度
2014/05/26 Javascript
XML文件转化成NSData对象的方法
2015/08/12 Javascript
学习JavaScript设计模式之状态模式
2016/01/08 Javascript
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
2017/04/28 jQuery
简单实现JavaScript弹幕效果
2020/08/27 Javascript
认识less和webstrom的less配置方法
2017/08/02 Javascript
el-table树形表格表单验证(列表生成序号)
2020/05/31 Javascript
[01:05:36]VP vs TNC Supermajor小组赛B组 BO3 第二场 6.2
2018/06/03 DOTA
[53:15]Mineski vs iG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python输出各行命令详解
2018/02/01 Python
Python 内置函数进制转换的用法(十进制转二进制、八进制、十六进制)
2018/04/30 Python
python+selenium实现自动抢票功能实例代码
2018/11/23 Python
python模块常用用法实例详解
2019/10/17 Python
简单了解为什么python函数后有多个括号
2019/12/19 Python
丝芙兰法国官网:SEPHORA法国
2016/09/01 全球购物
打印机墨盒:123Inkjets
2017/02/16 全球购物
泰国在线书店:SE-ED
2020/06/21 全球购物
韩国乐天网上商城:Lotte iMall
2021/02/03 全球购物
绩效专员岗位职责
2013/12/02 职场文书
乡镇干部党的群众路线教育实践活动个人对照检查材料
2014/09/24 职场文书
2014年乡镇工会工作总结
2014/12/02 职场文书
R9700摩机记
2022/04/05 无线电
《群青的幻想曲》京力秋树角色PV公开
2022/04/08 日漫