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表达式中连续的 &amp;&amp; 和 || 之赋值区别
Oct 17 Javascript
JQuery中操作Css样式的方法
Feb 12 Javascript
JQuery中使用.each()遍历元素学习笔记
Nov 08 Javascript
JavaScript电子时钟倒计时第二款
Jan 10 Javascript
bootstrap的工具提示实例代码
May 17 Javascript
React Native之ListView实现九宫格效果的示例
Aug 02 Javascript
javascript观察者模式实现自动刷新效果
Sep 05 Javascript
基于JavaScript实现表格滚动分页
Nov 22 Javascript
javaScript canvas实现(画笔大小 颜色 橡皮的实例)
Nov 28 Javascript
浅谈vue首屏加载优化
Jun 28 Javascript
对vue事件的延迟执行实例讲解
Aug 28 Javascript
vue项目如何监听localStorage或sessionStorage的变化
Jan 04 Vue.js
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实现的返回数据格式化类实例
2014/09/22 PHP
PHP中应该避免使用同名变量(拆分临时变量)
2015/04/03 PHP
PHP页面输出搜索后跳转下一页的处理方法
2016/09/30 PHP
php的instanceof和判断闭包Closure操作示例
2020/01/26 PHP
PHP时间相关常用函数用法示例
2020/06/03 PHP
extjs表格文本启用选择复制功能具体实现
2013/10/11 Javascript
JS实现浏览器状态栏文字闪烁效果的方法
2015/10/27 Javascript
Javascript BOM学习小结(六)
2015/11/26 Javascript
JavaScript代码判断输入的字符串是否含有特殊字符和表情代码实例
2017/08/17 Javascript
jQuery选择器之属性筛选选择器用法详解
2017/09/19 jQuery
Vue组件中slot的用法
2018/01/30 Javascript
Bootstrap实现的表格合并单元格示例
2018/02/06 Javascript
Angular4 ElementRef的应用
2018/02/26 Javascript
使用use注册Vue全局组件和全局指令的方法
2018/03/08 Javascript
微信小程序中使用echarts的实现方法
2019/04/24 Javascript
微信小程序扫描二维码获取信息实例详解
2019/05/07 Javascript
vue h5移动端禁止缩放代码
2019/10/28 Javascript
JS中==、===你分清楚了吗
2020/03/04 Javascript
js实现圆形菜单选择器
2020/12/03 Javascript
Python数据库的连接实现方法与注意事项
2016/02/27 Python
python的paramiko模块实现远程控制和传输示例
2017/10/13 Python
解决python3 网络请求路径包含中文的问题
2018/05/10 Python
Python 加密与解密小结
2018/12/06 Python
2019 Python最新面试题及答案16道题
2019/04/11 Python
在Python中获取操作系统的进程信息
2019/08/27 Python
使用Python实现Wake On Lan远程开机功能
2020/01/22 Python
keras获得model中某一层的某一个Tensor的输出维度教程
2020/01/24 Python
HSRP的含义以及如何工作
2014/09/10 面试题
工厂实习感言
2014/01/14 职场文书
12月小学生校园广播稿
2014/02/04 职场文书
小学国庆节活动方案
2014/02/11 职场文书
青年文明号复核材料
2014/02/11 职场文书
送温暖献爱心活动总结
2014/07/08 职场文书
考试保密承诺书
2014/08/30 职场文书
会计岗位工作总结
2015/08/12 职场文书
《语言的突破》读后感3篇
2019/12/12 职场文书