Atrribute是HTML的标准,用于初始化html,初始化后不可改变

Property是Dom的标准,可修改

例子1:input的值

<input type="text" value="Sarah">

当用户在 <input> 中输入 Sally 时，DOM 元素的 value Property 将变为 Sally。 但是，如果使用 input.getAttribute('value') 查看 HTML 的 Attribute value，则可以看到该 attribute 保持不变 —— 它返回了 Sarah。

例子2:按钮可用性
当添加 disabled Attribute 时，仅仅它的出现就将按钮的 disabled Property 初始化成了 true,和disabled的值无关.

<button disabled="false" id="btn" onclick="alert(1)">仍被禁用</button>
<script>
        document.querySelector('#btn').getAttribute('disabled');// false
    </script>

按钮不可用,因为atrribute用于初始化html,初始化后就完成使命了

atrribute1.PNG

<button disabled="false" id="btn" onclick="alert(1)">仍被禁用</button>
    <script>
        document.querySelector('#btn').disabled = false
    </script>

按钮可点击,alert(1),因为修改的是property

atrribute2.PNG

所以Angular模板绑定使用的是 Property 和事件，而不是 Attribute。

Atrribute	Property
class	className
innerHtml	innerHTML
id	id
disabled	disabled
colspan	colSpan

ARIA 和 SVG 。它们都纯粹是 Attribute