Directive trong Vue.js cho phép bạn áp dụng các hành vi đặc biệt cho các phần tử trong DOM. Chúng có tiền tố với cú pháp v- và được sử dụng để thao tác DOM, xử lý sự kiện, điều kiện hiển thị các phần tử, và nhiều hơn nữa. Vue.js cung cấp một số directive tích hợp sẵn như v-if, v-for, v-bind, và v-on, mà bao gồm nhiều trường hợp sử dụng phổ biến.
Dưới đây là một số directive phổ biến trong Vue.js:
1. Directive v-if: Directive này được sử dụng để điều khiển việc hiển thị của một phần tử dựa trên một điều kiện.
Ví dụ:
<div v-if="isShow">Phần tử này chỉ được hiển thị nếu isShow có giá trị true.</div>
2. Directive v-for: Directive này được sử dụng để lặp qua một mảng hoặc đối tượng và tạo ra các phần tử tương ứng.
Ví dụ:
<ul>
<li v-for="item in items">{{ item }}</li>
</ul>
3. Directive v-bind: Directive này được sử dụng để gán giá trị của một biểu thức cho một thuộc tính hoặc một thuộc tính của phần tử.
Ví dụ:
<img v-bind:src="imageUrl">
4. Directive v-on: Directive này được sử dụng để lắng nghe và xử lý các sự kiện trên một phần tử.
Ví dụ:
<button v-on:click="handleClick">Nhấp vào tôi!</button>
5. Directive v-model: Directive này tạo một liên kết hai chiều giữa một phần tử đầu vào và một thuộc tính dữ liệu.
Ví dụ:
<input v-model="message">
Đây chỉ là một số directive cơ bản trong Vue.js. Bạn cũng có thể tạo các directive tùy chỉnh của riêng mình để thực hiện các hành vi đặc biệt trong ứng dụng Vue.js của bạn.