Vue Template Syntax: Khám Phá Cú Pháp Mạnh Mẽ Của Vue.js

Mình sẽ đi từ tổng quan → các loại cú pháp → ví dụ minh họa, để thấy được cú pháp template của Vue.js mạnh như thế nào.

---

---

1. Template Syntax là gì?#

Trong Vue.js, Template Syntax là cú pháp đặc biệt cho phép anh nhúng dữ liệu động và logic đơn giản trực tiếp vào HTML. Nó là cầu nối giữa dữ liệu (data, computed, props, ...) và giao diện người dùng.

Vue sẽ compile template thành DOM ảo (Virtual DOM), sau đó cập nhật DOM thật một cách tối ưu khi dữ liệu thay đổi.

---

---

2. Các thành phần chính trong Template Syntax#

2.1. Interpolation (Chèn dữ liệu)#

• Text interpolation:

`

Xin chào {{ userName }}!

`

• Có thể chứa biểu thức JavaScript:

`

{{ number + 1 }}

{{ message.toUpperCase() }}

`

⚠️ Chỉ hỗ trợ biểu thức (expressions), không phải câu lệnh (statements) như if hoặc for.

---

---

2.2. Raw HTML#

`

`

• rawHtml là chuỗi HTML.

• Dùng cẩn thận để tránh XSS.

---

---

2.3. Attribute Binding (v-bind)#

`

`

• Hỗ trợ binding động cho class và style:

`

`

---

---

2.4. Directives (Chỉ thị)#

Directives bắt đầu bằng v- và dùng để thực hiện các hành vi đặc biệt trên DOM.

Directive	Chức năng
v-if / v-else-if / v-else	Hiển thị hoặc ẩn phần tử theo điều kiện
v-show	Hiển thị/ẩn bằng CSS (display)
v-for	Lặp qua mảng hoặc đối tượng
v-bind	Liên kết thuộc tính động
v-on	Lắng nghe sự kiện (@click)
v-model	Liên kết hai chiều dữ liệu (two-way binding)
v-slot	Truyền nội dung qua slot
v-pre	Bỏ qua compile cho phần tử
v-cloak	Ẩn template cho đến khi compile xong
v-once	Render 1 lần, không update nữa

---

---

2.5. Event Binding (v-on)#

` Click me

<button @click="sayHello">Click me

<button @click="greet('Minh')">Xin chào `

---

---

2.6. Two-Way Binding (v-model)#

`

{{ message }}

`

• Tự động đồng bộ giá trị giữa input và biến message.

---

---

2.7. Shorthands (Cú pháp rút gọn)#

• v-bind:prop → :prop

• v-on:event → @event

---

---

3. Ví dụ tổng hợp#

`

`

---

---

4. Điểm mạnh của Template Syntax trong Vue#

• Dễ đọc, dễ hiểu, gần giống HTML thuần.

• Tích hợp logic JavaScript nhẹ trong giao diện.

• Cập nhật dữ liệu tự động và tối ưu.

• Hỗ trợ cú pháp rút gọn giúp code gọn gàng.