Mục lục

1. Diagram

2. Tổng quan

3. Binding HTML Classes

4. Binding Inline Styles

5. Common Patterns

6. Best Practices

7. Kết luận

1. Diagram

Class Binding Overview

  • Class binding trong Vue cho phép thêm/xóa class CSS một cách linh hoạt dựa trên data.
  • Cú pháp:
    • Object Syntax: { active: isActive, 'text-danger': hasError }
    • Array Syntax: [activeClass, errorClass]
  • Vue sẽ tự động theo dõi và cập nhật class khi data thay đổi.

Class Binding Flow

Data Change
    |
    v
Reactivity System detects change
    |
    v
Re-evaluate class bindings
    |
    v
Update class list on the element

Style Binding Overview

  • Style binding trong Vue cho phép thêm/xóa style inline một cách linh hoạt dựa trên data.
  • Cú pháp:
    • Object Syntax: { color: activeColor, fontSize: fontSize + 'px' }
    • Array Syntax: [baseStyles, overridingStyles]
  • Vue sẽ tự động theo dõi và cập nhật style khi data thay đổi.

Component Class Inheritance

  • Class của component cha sẽ tự động áp dụng cho component con.
  • Có thể ghi đè class của component cha trong component con.
  • Sử dụng inheritAttrs: false để ngăn chặn kế thừa thuộc tính không mong muốn.

Auto-prefixing

CSS Property Change
    |
    v
Reactivity System detects change
    |
    v
Add vendor prefixes if needed
    |
    v
Update style on the element

2. Tổng quan

  • Vue cung cấp nhiều cách để bind class và style cho phần tử trong template.
  • Binding có thể dựa trên điều kiện, cho phép tạo giao diện linh hoạt và động.
  • Hiểu rõ cách hoạt động của class và style binding giúp tối ưu hiệu suất và khả năng bảo trì code.

3. Binding HTML Classes

1. Object Syntax

  • Cú pháp: v-bind:class="{ active: isActive, 'text-danger': hasError }"
  • Ví dụ: 
    <div v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>
  • Khi isActive là true → class active được thêm vào phần tử.
  • Khi hasError là true → class text-danger được thêm vào phần tử.

2. Array Syntax

  • Cú pháp: v-bind:class="[classA, classB]" hoặc v-bind:class="[classObject, arrayOfClasses]"
  • Ví dụ: 
    <div v-bind:class="[baseClass, { active: isActive }]"></div>
  • baseClass luôn luôn có mặt.
  • Nếu isActive là true → class active được thêm vào phần tử.

3. With Components

  • Khi sử dụng với component, class sẽ được thêm vào root element của component đó.
  • Ví dụ: 
    <my-component v-bind:class="{ active: isActive }"></my-component>
  • Class active sẽ được thêm vào phần tử gốc của my-component nếu isActive là true.

4. Binding Inline Styles

1. Object Syntax

  • Cú pháp: v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"
  • Ví dụ: 
    <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
  • Khi activeColor thay đổi → thuộc tính color của phần tử sẽ thay đổi theo.
  • Khi fontSize thay đổi → thuộc tính font-size của phần tử sẽ thay đổi theo.

2. Array Syntax

  • Cú pháp: v-bind:style="[baseStyles, overridingStyles]" hoặc v-bind:style="[styleObject, arrayOfStyles]"
  • Ví dụ: 
    <div v-bind:style="[baseStyle, { color: activeColor }]"></div>
  • baseStyle luôn luôn có mặt.
  • Nếu activeColor thay đổi → thuộc tính color của phần tử sẽ thay đổi theo.

3. Auto-prefixing

  • Vue tự động thêm prefix cho các thuộc tính CSS cần thiết.
  • Ví dụ: v-bind:style="{ display: flex }" sẽ được biên dịch thành display: -webkit-box; display: -ms-flexbox; display: flex;
  • Giúp đảm bảo tính tương thích với các trình duyệt cũ.

4. Multiple Values

  • Có thể bind nhiều giá trị cho cùng một thuộc tính CSS.
  • Ví dụ: 
    <div
  v-bind:style="{ display: isFlex ? 'flex' : 'block', color: activeColor }"
></div>
  • Khi isFlex là true → thuộc tính display sẽ là flex, ngược lại sẽ là block.
  • Thuộc tính color sẽ nhận giá trị từ activeColor.

5. Common Patterns

  • Toggle class on/off: 
    <div v-bind:class="{ active: isActive }"></div>
  • Dynamic class based on condition: 
    <div v-bind:class="isActive ? 'active' : 'inactive'"></div>
  • Multiple classes: 
    <div v-bind:class="[baseClass, isActive ? 'active' : '']"></div>
  • Computed class: 
    <div v-bind:class="computedClass"></div>

6. Best Practices

  • Sử dụng computed properties cho các logic phức tạp.
  • Tránh lạm dụng inline style, nên sử dụng class để dễ dàng bảo trì.
  • Tổ chức và đặt tên class có ý nghĩa, dễ hiểu.
  • Sử dụng CSS Modules hoặc Scoped CSS trong Vue để tránh xung đột tên class.

7. Kết luận

  • Class và style binding trong Vue rất mạnh mẽ và linh hoạt.
  • Hiểu rõ cách sử dụng giúp tạo ra giao diện người dùng động và hấp dẫn.
  • Luôn tuân thủ các best practices để đảm bảo code sạch sẽ, dễ bảo trì và hiệu suất cao.