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 相关文章推荐
改善用户体验的五款jQuery插件分享
May 22 Javascript
JavaScript prototype 使用介绍
Aug 29 Javascript
javascript动态设置样式style实例分析
May 13 Javascript
第七篇Bootstrap表单布局实例代码详解(三种表单布局)
Jun 21 Javascript
jquery自定义表单验证插件
Oct 12 Javascript
JavaScript中关键字 in 的使用方法详解
Oct 17 Javascript
jquery实现页面加载效果
Feb 21 Javascript
Javascript继承机制详解
May 30 Javascript
vue2.0全局组件之pdf详解
Jun 26 Javascript
vue基于element-ui的三级CheckBox复选框功能的实现代码
Oct 15 Javascript
微信小程序云开发如何使用云函数生成二维码
May 18 Javascript
vue实现图片上传到后台
Jun 29 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
GBK的页面输出JSON格式的php函数
2010/02/16 PHP
PHP自动生成后台导航网址的最佳方法
2013/08/27 PHP
PHP获取MySql新增记录ID值的3种方法
2014/06/24 PHP
PHP Cookie学习笔记
2016/08/23 PHP
PHP实现大数(浮点数)取余的方法
2017/02/18 PHP
Laravel中unique和exists验证规则的优化详解
2018/01/28 PHP
PHP7 标准库修改
2021/03/09 PHP
教您去掉ie网页加载进度条的方法
2010/12/09 Javascript
jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)
2014/05/11 Javascript
Firefox下无法正常显示年份的解决方法
2014/09/04 Javascript
jQuery实现的淡入淡出二级菜单效果代码
2015/09/15 Javascript
浅析jquery与checkbox的checked属性的问题
2016/04/27 Javascript
JS实现仿百度文库评分功能
2017/01/12 Javascript
使用vue实现grid-layout功能实例代码
2018/01/05 Javascript
jQuery 改变P标签文本值方法
2018/02/24 jQuery
浅谈在node.js进入文件目录的问题
2018/05/13 Javascript
说说如何利用 Node.js 代理解决跨域问题
2019/04/22 Javascript
基于layui的table插件进行复选框联动功能的实现方法
2019/09/19 Javascript
使用eslint和githooks统一前端风格的技巧
2020/07/29 Javascript
MySQL中表的复制以及大型数据表的备份教程
2015/11/25 Python
python fabric实现远程部署
2017/01/05 Python
python+opencv轮廓检测代码解析
2018/01/05 Python
python操作redis方法总结
2018/06/06 Python
Python模块zipfile原理及使用方法详解
2020/08/04 Python
美国综合购物商城:UnbeatableSale.com
2018/11/28 全球购物
Myprotein俄罗斯官网:欧洲第一运动营养品牌
2019/05/05 全球购物
remote接口和home接口主要作用
2013/05/15 面试题
META-INF文件夹中的MANIFEST.MF的作用
2016/06/21 面试题
葡萄牙语专业个人求职信
2013/12/10 职场文书
股份合作协议书
2014/04/12 职场文书
法学求职信
2014/06/22 职场文书
技术股东合作协议书
2014/12/02 职场文书
因家庭原因离职的辞职信范文
2015/05/12 职场文书
2015年民兵整组工作总结
2015/07/24 职场文书
小学家庭教育心得体会
2016/01/14 职场文书
DE1103使用报告
2022/04/05 无线电