Khởi đầu với Vue2

Vue.js là một thư viện JavaScript tập trung vào giao diện người dùng, cho phép xây dựng các ứng dụng đơn trang (SPA) một cách hiệu quả và linh hoạt. Trang chính thức: vuejs.org

1. Cú pháp chèn dữ liệu

Cú pháp sử dụng `{{ }}` để hiển thị giá trị từ dữ liệu hoặc biểu thức JavaScript trong template.

<div id="app">
  <p>Tên: {{ userName }}</p>
  <p>Tuổi: {{ age }}</p>
  <p>Tổng: {{ num1 + num2 }}</p>
  <p>Trạng thái: {{ isLoggedIn ? 'Đăng nhập' : 'Chưa đăng nhập' }}</p>
</div>

Dưới đây là ví dụ minh họa:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Chèn dữ liệu</title>
  <script src="./js/vue/vue.js"></script>
</head>
<body>
  <div id="app">
    <ul>
      <li>Chuỗi: {{ name }}</li>
      <li>Số: {{ score }}</li>
      <li>Mảng: {{ items }}</li>
      <li>Đối tượng: {{ profile }}</li>
      <li>HTML: {{ htmlContent }}</li>
      <li>Tính toán: {{ 5 * 6 }}</li>
      <li>Ba điều kiện: {{ score > 80 ? 'Tốt' : 'Cần cải thiện' }}</li>
    </ul>
  </div>
</body>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      name: 'Người dùng',
      score: 95,
      items: [1, 2, 3],
      profile: { role: 'admin', level: 1 },
      htmlContent: '<strong>Đây là văn bản được nhúng</strong>'
    }
  });
</script>
</html>

Hiệu ứng phản hồi (Reactivity)

Vue sử dụng cơ chế getter/setter để theo dõi sự thay đổi của dữ liệu. Khi một thuộc tính trong `data` được cập nhật, tất cả các phần tử liên quan đến nó sẽ tự động được cập nhật lại.

Ví dụ: Thay đổi `score` sẽ ngay lập tức làm mới phần tử hiển thị trên giao diện.

2. Hướng dẫn (Directives)

2.1. Hướng dẫn xử lý văn bản

Hướng dẫn	Mô tả
v-text	Hiển thị nội dung dưới dạng văn bản thuần (không xử lý HTML)
v-html	Render nội dung HTML từ dữ liệu
v-show	Ẩn/hiện phần tử bằng CSS `display: none`
v-if	Loại bỏ hoặc thêm phần tử vào DOM dựa trên điều kiện

Lưu ý: `v-show` chỉ ẩn hiện, còn `v-if` xóa hoặc thêm phần tử vào DOM.

<div id="app">
  <li v-text="message"></li>
  <li v-html="htmlText"></li>
  <li v-show="isVisible">Hiển thị khi true</li>
  <li v-if="isTrue">Chỉ hiện khi đúng</li>
</div>

<script>
const vm = new Vue({
  el: '#app',
  data: {
    message: 'Xin chào!',
    htmlText: '<em>Nội dung HTML</em>',
    isVisible: true,
    isTrue: false
  }
});
</script>

2.2. Hướng dẫn xử lý sự kiện

Sử dụng `v-on` hoặc ký hiệu `@` để gắn sự kiện.

Hướng dẫn	Mô tả
@click	Xử lý sự kiện click
@input	Khi người dùng nhập vào ô input
@change	Khi giá trị thay đổi và mất focus
@keyup	Khi nhấn phím

Ví dụ:

<input type="text" @input="handleInput" v-model="inputValue">
<button @click="increment">Tăng</button>
<span @keydown="logKey">Nhấn phím</span>

2.3. Chỉnh sửa sự kiện (Event Modifiers)

Giúp kiểm soát hành vi mặc định của sự kiện.

• .stop: NgănPropagation (ngăn sự kiện lan truyền)
• .prevent: Ngăn hành vi mặc định (ví dụ: submit form)
• .once: Chỉ kích hoạt một lần
• .self: Chỉ kích hoạt nếu sự kiện bắt nguồn từ chính phần tử
• .capture: Bắt sự kiện ở giai đoạn capture

<button @click.stop="doSomething">Không lan truyền</button>
<form @submit.prevent="onSubmit">Gửi form không reload</form>

2.4. Phím tắt (Key Modifiers)

Cho phép xử lý theo phím cụ thể.

<input @keyup.enter="submit">
<input @keyup.ctrl.65="handleA"> // Ctrl + A

3. Hướng dẫn thuộc tính

Sử dụng `v-bind` hoặc ký hiệu `:` để gán thuộc tính động.

3.1. Gán thuộc tính

<img :src="imageSrc" :alt="altText">
<a :href="linkUrl">Liên kết</a>

3.2. Gán style và class

Cho phép sử dụng chuỗi, mảng hoặc đối tượng.

<div :style="{ color: textColor, fontSize: size + 'px' }">Văn bản</div>
<div :class="{ active: isActive, 'btn-large': isLarge }">Nút</div>

3.3. Cập nhật kiểu động qua sự kiện

methods: {
  toggleStyle() {
    this.isActive = !this.isActive;
    this.textColor = this.isActive ? 'red' : 'blue';
  }
}

4. Điều khiển luồng

4.1. Rẽ nhánh điều kiện

<div v-if="score >= 90">Xuất sắc</div>
<div v-else-if="score >= 70">Tốt</div>
<div v-else>Cần cố gắng</div>

4.2. Duyệt qua danh sách

Sử dụng `v-for` để duyệt mảng, đối tượng hoặc số lượng.

<ul>
  <li v-for="(item, index) in list" :key="index">{{ item }} ({{ index }})</li>
</ul>

<div v-for="(value, key) in obj" :key="key">{{ key }}: {{ value }}</div>

<div v-for="n in 5" :key="n">Lặp {{ n }} lần</div>

5. Quản lý trạng thái và tối ưu hóa

Để tăng hiệu suất khi cập nhật danh sách, nên sử dụng thuộc tính `key` duy nhất cho mỗi phần tử trong `v-for`.

<li v-for="item in items" :key="item.id">{{ item.name }}</li>

6. Quản lý biểu mẫu

Vue hỗ trợ hai chiều giữa dữ liệu và giao diện thông qua `v-model`.

6.1. Checkbox và Radio

<input type="checkbox" v-model="selectedHobbies" value="music"> Âm nhạc
<input type="radio" v-model="gender" value="male"> Nam
<input type="checkbox" v-model="rememberMe"> Nhớ mật khẩu

6.2. Ví dụ: Giỏ hàng

Ứng dụng thực tế: hiển thị sản phẩm, thay đổi số lượng, chọn tất cả, tính tổng tiền.

<tr v-for="product in products" :key="product.id">
  <td>{{ product.name }}</td>
  <td>{{ product.price }}</td>
  <td>
    <button @click="decrease(product)">-</button>
    {{ product.quantity }}
    <button @click="increase(product)">+</button>
  </td>
  <td>
    <input type="checkbox" v-model="selectedProducts" :value="product">
  </td>
</tr>

Tính tổng tiền:

computed: {
  total() {
    return this.selectedProducts.reduce((sum, p) => sum + p.price * p.quantity, 0);
  }
}

7. Cập nhật mảng

Vue hỗ trợ các phương thức thay đổi mảng như `push`, `pop`, `splice`, `sort`, `reverse` — chúng đều kích hoạt cập nhật giao diện.

methods: {
  addItem() {
    this.items.push('new item');
  },
  removeLast() {
    this.items.pop();
  }
}

Nhưng các thao tác trực tiếp như `arr[index] = newValue` sẽ không kích hoạt phản hồi. Cần dùng `Vue.set` hoặc `vm.$set`.

Vue.set(this.items, 0, 'updated');