Angular React Vue 比较 – 指令篇之属性型指令

属性型指令是 Angular 对指令更具体的分类，意指可以更改 DOM 元素和 Angular 组件的外观或行为。在Vue中并没有属性指令这一说法，为了更好的做对比，我们按照Angular的说法来把Vue中的一部分内置指令也称之为属性指令。

Angular

名称	详情
NgClass	添加和删除一组 CSS 类。
NgStyle	添加和删除一组 HTML 样式。
NgModel	将双向数据绑定添加到 HTML 表单元素。
NgNonBindable	防止在浏览器中进行表达式求值

Angular常见的内置属性指令

NgClass与NgStyle

在Angular中，为了更方便的动态添加或删除多个Class与Style，框架专门设置了两个内置指令NgClass与NgStyle，它们与属性绑定的最大区别在于属性绑定的对象的表达式（比如 object、Array、Map 或 Set）必须更改对象的引用才能生效。使用指定则不存在这个问题，在不更改对象引用的情况下只更新其 Attribute 就会生效的。

Angular中使用NgClass的代码片段：

currentClasses: Record<string, boolean> = {};
/* . . . */
setCurrentClasses() {
  // CSS classes: added/removed per current state of component properties
  this.currentClasses =  {
    saveable: this.canSave,
    modified: !this.isUnchanged,
    special:  this.isSpecial
  };
}

// NgClass模板中的调用
<div [ngClass]="currentClasses">This div is initially saveable, unchanged, and special.</div>

Angular中使用NgStyle的代码片段：

currentStyles: Record<string, string> = {};
/* . . . */
setCurrentStyles() {
  // CSS styles: set per current state of component properties
  this.currentStyles = {
    'font-style':  this.canSave      ? 'italic' : 'normal',
    'font-weight': !this.isUnchanged ? 'bold'   : 'normal',
    'font-size':   this.isSpecial    ? '24px'   : '12px'
  };
}

// NgStyle模板中的调用
<div [ngStyle]="currentStyles">
  This div is initially italic, normal weight, and extra large (24px).
</div>

NgModel

在Angular中NgModel最常用于将双向数据绑定添加到 HTML 表单元素，这在Angular里被称为模板驱动表单。

下面借助于代码来对NgModel做一个描述：

// HTML
<form #f="ngForm" (ngSubmit)="onSubmit(f)">
  <div>
    <label for="username">用户名</label>
    <input id="username" name="username" [(ngModel)]="user.name" required minlength="3">
    <div *ngIf="username.invalid && username.touched" class="error">
      <p *ngIf="username.errors.required">用户名不能为空</p>
      <p *ngIf="username.errors.minlength">用户名至少要3个字符</p>
    </div>
  </div>
  <!-- 其他表单控件 -->
  <button type="submit" [disabled]="f.invalid">提交</button>
</form>

// TypeScript
import { Component } from '@angular/core';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.css']
})
export class RegisterComponent {
  user = {
    name: ''
  };

  onSubmit(form: NgForm) {
    console.log(form.value);
    // 发送表单数据到服务器
  }
}

NgNonBindable

要防止在浏览器中进行表达式求值，请将 ngNonBindable 添加到宿主元素。 ngNonBindable 会停用模板中的插值、指令和绑定。

将 ngNonBindable 应用于元素会停止对该元素的子元素进行绑定。但是，ngNonBindable 仍然允许其他指令在你应用 ngNonBindable 的元素上工作。

如果将 ngNonBindable 应用于父元素，则 Angular 会禁用该元素子元素的任何类型的插值和绑定，例如属性（Property）绑定或事件绑定。

Vue

名称	详情
v-text	更新元素的文本内容。
v-html	更新元素的 innerHTML。
v-show	基于表达式值的真假性，来改变元素的可见性。
v-on	给元素绑定事件监听器。
v-bind	动态的绑定一个或多个 attribute，也可以是组件的 prop。
v-model	在表单输入元素或组件上创建双向绑定。
v-pre	跳过该元素及其所有子元素的编译。
v-once	仅渲染元素和组件一次，并跳过之后的更新。
v-memo	缓存一个模板的子树。
v-cloak	用于隐藏尚未完成编译的 DOM 模板。

Vue常见的内置属性指令

v-on与v-bind指令

v-on给元素绑定事件监听器。

v-bind给元素动态的绑定一个或多个 attribute，也可以是组件的 prop。

这两个指令在属性绑定一章有介绍，这里就不再详细描述。

v-model

在Vue中v-model最常用于将双向数据绑定添加到 HTML 表单元素，用于表单元素里只起到数据双向绑定的作用，它不具备Angular中NgModel指令的其他功能。

代码片段：

<input
  :value="text"
  @input="event => text = event.target.value">

// 使用了v-model后
<input v-model="text">

React

React中并没有指令，在这里列出一下类似于Vue中v-model指令的功能。

React中数据双向绑定的代码段：

const [name, setName] = useState('');

<div>
  <h3>React表单双向绑定</h3>
  <label>姓名：{name}</label>
  <input value={name} onChange={(e) => setName(e.target.value)} />
</div>

小结

属性指令仅是Angular中对指定更具体的一种分类，Vue与React并没有属性指定这一概念。

本篇介绍的是Angular中的内置属性指令，把Vue中的一部分内置指令称之为属性指令是为了与Angular做比较，加深印象以便理解，React中并没有任何的指令。

文章参考链接：

比较编程网