杂记:Angular-DOM属性绑定和HTML属性绑定

课程连接
https://www.bilibili.com/video/av26814911/?p=31

DOM属性绑定

<input [value] = "xxx">
<input  value = {{xxx}}>

上述两种都可以表示绑定，事实上，<input value = {{xxx}}>在渲染时，会转换成<input [value] = "xxx">

---

DOM属性&HTML属性

<input value = "Tom" (input) = "doOnInput($event)">

当浏览器渲染上述标签字符串时，会创建一个相应的Dom节点，该Dom是一个HtmlInputElement类型的对象，每个DOM都要自己的属性和方法。上述DOM对象（HtmlInputElement类型的对象）的value属性会被初始化为"Tom"

---

doOnInput(event:any)
{
console.log(event.target.value);//这里的value是Dom属性
console.log(event.target.getAttribute(value));//这里的value是Html属性,Html属性初始化DOM属性,然后其任务就完成了，HTML属性是不会改变的，DOM属性是动态改变的
}

一个特殊的属性disabled

<button>点我</button> 当标签内不写disabled时,html属性为fasle,并且DOM属性被初始化为false;

<button disabled>点我</button> 
当标签内写disabled时,html属性为true,并且DOM属性被初始化为true,
(这里需要注意，只要添加了disable属性，不管怎么修改disabled的html属性值，或者绑定DOM属性，DOM属性值永远是true！！！,)

---

---

插值表达式属于Dom绑定