Angular4--【数据绑定】

数据绑定

事件绑定

属性绑定

很多人对于DOM属性还是HTML属性易混，那我们首先来区分一下HTML和DOM；

• 少量的HTML和DOM属性之前存在着1:1的映射，比如id;
• 有些HTML属性没有对应的DOM属性；
• 有些DOM属性没有对应的HTML属性，比如textComtent;
• 即使是名字相同，HTML属性和DOM属性也不是同一个东西；
• HTML属性的值制定了初始值；DOM属性的值表示当前值。DOM属性的值可以改变；HTML属性的值不能改变；
• 摸板绑定是通过DOM属性和事件来工作的，而不是HTML属性；

DOM绑定

接下来，介绍一下具体的属性绑定是如何实现的：

1. 组件中的greeting改变的时候，然后触发DOM的inputElement.value值改变；
2. 此时HTML中的值不会改变；
3. 浏览器会保持DOM和HTML的同步，所以DOM更改，然后新的value会渲染到页面上；
4. DOM的改变不会改变HTML属性
5. 当用户在text输入东西的时候，浏览器不会同步UI和HTML属性，我们看到的值是来自DOM，而不是HTML；

HTML属性绑定

1.基于HTML属性绑定

2.CSS类绑定

3.样式绑定

具体HTML绑定的可以参考下面的图片：