绑定会在从模板创建的一部分 UI 与模型（模板所属的组件实例）之间创建实时连接。此连接可用于将视图与模型同步、在视图中发生事件或用户操作时通知模型，或两者兼而有之。
为了更好的对比三大框架，我们把绑定分以下四部分来讨论，它们分别是：
- Property 绑定
- Attribute 绑定
- Class 与 Style 绑定
- Event 绑定
Property 绑定
本章讨论的 Property 绑定指的是 DOM 的属性。虽然在大多数情况下，目标名称是 Property（属性）名称，即使它看起来是 Attribute（属性）名称。
Angular
要绑定到元素的属性 ，请将其括在方括号 [ ] 内，这会将此属性标为目标属性。目标属性就是你要对其进行赋值的 DOM 属性 。
要为 image 元素的目标属性（src）赋值，示例代码：
<img alt="item" [src]="itemImageUrl">React
React中使用的是 JSX 语法，并没有刻意强调 Property 与 Attribute，这里是为了更好的对比，单独的讨论 Property 绑定。
要为 image 元素的目标属性（src）赋值，示例代码：
<img alt="item" src={ itemImageUrl } />Vue
双大括号不能在 Property 绑定中使用，应该使用 v-bind 指令，因为 v-bind 非常常用，Vue提供了特定的简写语法：
<img alt="item" v-bind:src="itemImageUrl" />
<!-- 等同于 -->
<img alt="item" :src="itemImageUrl" />在处理绑定时，Vue 默认会利用 in 操作符来检查该元素上是否定义了和绑定的 key 同名的 DOM property。如果存在同名的 property，则 Vue 会将它作为 DOM property 赋值，而不是作为 attribute 设置。这个行为在大多数情况都符合期望的绑定值类型，但是你也可以显式用 .prop 和 .attr 修饰符来强制绑定方式。
.prop 修饰符也有专门的缩写，.：
<div :someProperty.prop="someObject"></div>
<!-- 等同于 -->
<div .someProperty="someObject"></div>Attribute 绑定
本章讨论的 Attribute 绑定指的是HTML的属性，它一般多用于自定义元素或者设置 ARIA Attribute 。
Angular
Attribute 绑定语法类似于 Property 绑定，但不是直接在方括号之间放置元素的 Property，而是在 Attribute 名称前面加上前缀 attr，后跟一个点 .。然后，使用解析为字符串的表达式设置 Attribute 值。
<p [attr.attribute-you-are-targeting]="expression"></p>React
React 中使用的是 JSX 语法，并没有刻意强调 Attribute 与 Property，这里是为了更好的对比，单独的讨论 Attribute 绑定。
<p aria-label={ expression }></p>在 React 中，大部分 HTML 属性都用驼峰式命名法表示。由于历史原因，aria-* 和 data-* 属性是以带 – 符号的 HTML 格式书写的。
Vue
在 Vue 中可以使用 .attr 修饰符来强制绑定方式，不过大多数情况下不需要使用此修饰符，这是因为在处理绑定时，Vue 默认会利用 in 操作符来检查该元素上是否定义了和绑定的 key 同名的 DOM property。如果不存在同名的 property，则 Vue 会将作为 attribute 设置。
<p :attribute-you-are-targeting="expression"></p>Class 与 Style 绑定
类与样式是在绑定中最常用到的，虽然它们都可以用 Property 绑定的方式实现，但是还不够灵活。
Angular
类的绑定分为单一类绑定和多重类绑定。
| 绑定类型 | 语法 | 输入属性 | 范例输入值 |
|---|---|---|---|
单一类绑定 | [class.sale]=”onSale” | boolean | undefined | null | true, false |
| 多重类绑定 | [class]=”classExpression” | string | “my-class-1 my-class-2 my-class-3” |
| 多重类绑定 | [class]=”classExpression” | Record<string, boolean | undefined | null> | {foo: true, bar: false} |
| 多重类绑定 | [class]=”classExpression” | Array<string> | [‘foo’, ‘bar’] |
样式的绑定也是分为单一样式绑定和多重样式绑定。
| 绑定类型 | 语法 | 输入属性 | 范例输入值 |
|---|---|---|---|
| 单一样式绑定 | [style.width]=”width” | string | undefined | null | “100px” |
| 带单位的单一样式绑定 | [style.width.px]=”width” | number | undefined | null | 100 |
| 多重样式绑定 | [style]=”styleExpression” | string | “width: 100px; height: 100px” |
| 多重样式绑定 | [style]=”styleExpression” | Record<string, string | undefined | null> | {width: ‘100px’, height: ‘100px’} |
React
很遗憾，React 中并没有优雅的绑定 Class 的方式，如果不加载第三方库，只能按照 Property绑定的方式来绑定 class 。
style 也一样，React 中并没有优雅的绑定 style方式，如果不加载第三方库，只能按钮Property绑定方式来绑定一个style对象。
Vue
类的绑定方式与Angular类似，对于多重类时也是支持对象与数组绑定的。
| 绑定类型 | 语法 | 输入属性 | 范例输入值 |
|---|---|---|---|
| 字符串绑定 | [class]=”classExpression” | string | “my-class-1 my-class-2 my-class-3” |
| 对象绑定 | [class]=”classExpression” | Record<string, boolean | undefined | null> | {foo: true, bar: false} |
| 数组绑定 | [class]=”classExpression” | Array<string> | [‘foo’, ‘bar’] |
样式的绑定不支持单一绑定，支持对象与数组绑定。
// 对象绑定样式
<div :style="styleObject"></div>
// 数组绑定样式
<div :style="[baseStyles, overridingStyles]"></div>Event 绑定
事件绑定可让您侦听并响应用户操作，例如鼠标移动、单击和触摸等。除了 HTML DOM本身支持的事件外，有时候我们还需要自定义一些事件。
下面就来看看三大框架是如何给元素绑定事件的。
Angular
Angular 事件绑定语法由等号左侧括号内的目标事件名称和右侧带引号的模板语句组成。
<button (click)="onSave()">Save</button>在 Angular 中如果要对元素绑定一个自定义事件，需要自定义指令，关于指令的介绍详见后面的文章。
这里只列出模板中使用指令绑定自定义事件的代码：
<!-- 使用自定义指令，并绑定一个处理函数 -->
<div my-event (myEvent)="handleMyEvent($event)">Hello</div>React
在 React 中给元素绑定事件与绑定属性没有太大的区别。
// 内联事件
<button onClick={function handleClick() {
alert('你点击了我！');
}}>
// 方法事件
<button onClick={handleClick}>
点我
</button>在 React 中如果要对元素绑定一个自定义事件，需要把目标元素封装成一个组件，然后对组件添加事件。
Vue
Vue 中使用 v-on 指令 (简写为 @) 来监听 DOM 事件，并在事件触发时执行对应的 JavaScript。用法：v-on:click="handler" 或 @click="handler"。
// 内联事件
<button @click="count++">Add 1</button>
// 方法事件
<button @click="greet">Greet</button>在Vue中对元素绑定一个自定义事件与给组件添加事件是类似的，需要使用 $emit 函数来触发自定义事件。
<button @my-event="handleMyEvent">Click me</button>
// 组件中触发事件
$emit('custom-event', 'Hello');小结
本章介绍了三大框架模板中的绑定，分别对 Property 绑定、Attribute 绑定、Class 与 Style 绑定、事件绑定做了介绍。
在 Angular 与 Vue 中对上面体及到的绑定做了细分，React 中则没有明确的说明。对于实际项目中经常用到的 Class 与 Style 绑定在 React 中建议使用第三方库来做管理。
文章参考链接：
发表回复