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压缩工具下载集合
Mar 06 Javascript
jquery垂直公告滚动实现代码
Dec 08 Javascript
JS判断、校验MAC地址的2个实例
May 05 Javascript
Javascript中setTimeOut和setInterval的定时器用法
Jun 12 Javascript
javascript中checkbox使用方法实例演示
Nov 19 Javascript
JQuery实现网页右侧随动广告特效
Jan 17 Javascript
详解jquery事件delegate()的使用方法
Jan 25 Javascript
jQuery设置和获取select、checkbox、radio的选中值方法
Jan 01 Javascript
jQuery的中 is(':visible') 解析及用法(必看)
Feb 12 Javascript
JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例
Jan 29 Javascript
Element-UI中Upload上传文件前端缓存处理示例
Feb 21 Javascript
Vue.js递归组件实现组织架构树和选人功能
Jul 04 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
IIS6+PHP5+MySQL5+Zend Optimizer+phpMyAdmin安装配置图文教程 2009年
2009/06/08 PHP
PHP使用PDO调用mssql存储过程的方法示例
2017/10/07 PHP
laravel框架添加数据,显示数据,返回成功值的方法
2019/10/11 PHP
javascript按位非运算符的使用方法
2013/11/14 Javascript
基于JQuery实现图片轮播效果(焦点图)
2016/02/02 Javascript
nodejs修复ipa处理过的png图片
2016/02/17 NodeJs
全面了解JavaScirpt 的垃圾(garbage collection)回收机制
2016/07/11 Javascript
基于Bootstrap的Metronic框架实现页面链接收藏夹功能
2016/08/29 Javascript
bootstrap table动态加载数据示例代码
2017/03/25 Javascript
angular写一个列表的选择全选交互组件的示例
2018/01/22 Javascript
vue实现的上传图片到数据库并显示到页面功能示例
2018/03/17 Javascript
微信小程序template模版的使用方法
2019/04/13 Javascript
浅谈小程序globalData的那些事儿
2019/11/01 Javascript
通过微信公众平台获取公众号文章的方法示例
2019/12/25 Javascript
python实现的二叉树算法和kmp算法实例
2014/04/25 Python
python 将print输出的内容保存到txt文件中
2018/07/17 Python
Python 实现交换矩阵的行示例
2019/06/26 Python
Python 实现数据结构-堆栈和队列的操作方法
2019/07/17 Python
Python爬虫:Request Payload和Form Data的简单区别说明
2020/04/30 Python
python等待10秒执行下一命令的方法
2020/07/19 Python
CSS3伪类选择器:nth-child()
2009/04/02 HTML / CSS
爱尔兰家电数码商城:Currys PC World爱尔兰
2016/07/23 全球购物
巴西食品补充剂在线零售商:Músculos na Web
2017/08/07 全球购物
GANT英国官方网上商店:甘特衬衫
2018/02/06 全球购物
美国优质宠物用品购买网站:Muttropolis
2020/02/17 全球购物
Servlet如何得到服务器的信息
2015/12/22 面试题
咖啡蛋糕店创业计划书
2014/01/28 职场文书
2014年采购员工作总结
2014/11/18 职场文书
总经理岗位职责范本
2015/04/01 职场文书
2015年留守儿童工作总结
2015/05/22 职场文书
如何用JS实现网页瀑布流布局
2021/04/24 Javascript
python识别围棋定位棋盘位置
2021/07/26 Python
关于python pygame游戏进行声音添加的技巧
2021/10/24 Python
Eclipse+Java+Swing+Mysql实现电影购票系统(详细代码)
2022/01/18 Java/Android
python机器学习实现oneR算法(以鸢尾data为例)
2022/03/03 Python
详解ZABBIX监控ESXI主机的问题
2022/06/21 Servers