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

Angular4学习教程之DOM属性绑定详解 Angular4学习教程之DOM属性绑定详解中，主要介绍了关于Angular4学习教程之DOM属性绑定的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值。 事件绑定 在Angular4中，事件绑定是通过小括号将组件控制器的一个方法绑定到模版上面的一个事件的处理器上。例如：<button (click)="onClickButton($event)">按钮绑定事件</button> 属性绑定 在Angular4中，属性绑定是通过方括号将HTML标签的一个属性值绑定到一个表达式上。例如：<img [src]="imgUrl" alt=""> 插值表达式 在Angular4中，插值表达式是通过使用双大括号将一个表达式的值显示在模版上。例如：<h1>{{productTitle}}</h1> DOM属性和HTML属性的区别 在Angular4中，DOM属性和HTML属性是有部分区别的。DOM属性是指元素的当前状态，而HTML属性是指元素的初始状态。例如：<div> <input type="text" value="Tom" (input)="onInputEvent($event)"></div> 在上面的例子中，`value`是HTML属性，而`event.target.value`是DOM属性。 绑定方式 在Angular4中，绑定方式有两种：插值表达式和属性绑定。插值表达式是通过使用双大括号将一个表达式的值显示在模版上，而属性绑定是通过使用方括号将HTML标签的一个属性值绑定到一个表达式上。 小结 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的值不能改变