数据绑定
事件绑定
![这里写图片描述](https://img-blog.csdn.net/20180322202813389?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Rmc2hzZHI=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)
属性绑定
很多人对于DOM属性还是HTML属性易混,那我们首先来区分一下HTML和DOM;
- 少量的HTML和DOM属性之前存在着1:1的映射,比如id;
- 有些HTML属性没有对应的DOM属性;
- 有些DOM属性没有对应的HTML属性,比如textComtent;
- 即使是名字相同,HTML属性和DOM属性也不是同一个东西;
- HTML属性的值制定了初始值;DOM属性的值表示当前值。DOM属性的值可以改变;HTML属性的值不能改变;
- 摸板绑定是通过DOM属性和事件来工作的,而不是HTML属性;
DOM绑定
接下来,介绍一下具体的属性绑定是如何实现的:
- 组件中的greeting改变的时候,然后触发DOM的inputElement.value值改变;
- 此时HTML中的值不会改变;
- 浏览器会保持DOM和HTML的同步,所以DOM更改,然后新的value会渲染到页面上;
- DOM的改变不会改变HTML属性
- 当用户在text输入东西的时候,浏览器不会同步UI和HTML属性,我们看到的值是来自DOM,而不是HTML;
![这里写图片描述](https://img-blog.csdn.net/20180322204610829?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Rmc2hzZHI=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)
HTML属性绑定
1.基于HTML属性绑定
![这里写图片描述](https://img-blog.csdn.net/20180322211927965?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Rmc2hzZHI=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)
2.CSS类绑定
3.样式绑定
![这里写图片描述](https://img-blog.csdn.net/20180322213027958?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Rmc2hzZHI=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)
具体HTML绑定的可以参考下面的图片:
![这里写图片描述](https://img-blog.csdn.net/20180322213619411?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Rmc2hzZHI=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)