Tổng Quan và Cấu Trúc Cơ Bản Trong Phát Triển Với Vue.js

Với Vue.js

Trong hệ sinh thái phát triển giao diện người dùng hiện đại, Vue.js nổi lên như một giải pháp hiệu quả nhờ tính linh hoạt và dễ tích hợp.

Các Directive Cơ Bản

  • Mustache: Dấu ngoặc kép đôi {{ }} được dùng để nhúng biểu thức động trong DOM.
  • Binding Thuộc tính: Sử dụng v-bind hoặc ký tự rút gọn : để gán giá trị động cho thuộc tính HTML.
  • Lắng nghe Sự kiện: v-on hoặc ký tự @ dùng để gắn các hàm xử lý sự kiện click, keyup, v.v.
  • Two-way Binding: v-model đồng bộ hóa giữa form input và state.
  • Xử lý Logic: v-if / v-else điều khiển hiển thị theo điều kiện; v-for lặp qua mảng hoặc đối tượng.
  • Điều kiện CSS: Khi áp dụng cho class, ta có thể truyền vào Object JS. Khóa là tên class (dùng dấu ngoặc nếu có dấu gạch ngang), giá trị là boolean từ Vue instance.

Tạo Instance (Options API)

Việc khởi tạo ứng dụng dựa trên hàm Vue(). Đối số truyền vào là một Object chứa các tùy chọn cấu hình:
  • el: Chọn điểm neo trong DOM nơi Vue sẽ kiểm soát.
  • data: Định nghĩa các thuộc tính trạng thái phản hồi.
  • methods: Tập hợp các hàm hành vi.
  • computed: Các thuộc tính tính toán dựa trên data (có caching).
  • watch: Theo dõi sự thay đổi của dữ liệu cụ thể.
  • hooks chu trình sống: created, mounted, v.v. thực thi tại các thời điểm nhất định của vòng đời.

Cấu trúc Dự án Đơn giản

Dưới đây là ví dụ minh họa việc nhúng Vue trực tiếp qua CDN. Lưu ý việc khai báo script ở cuối thẻ body hoặc trong hàm load để đảm bảo DOM đã render xong. 
<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="container-demo">
    <p>{{ tiêu_đề }}</p>
  </div>

  <script>
    const instance = new Vue({
      el: '#container-demo',
      data: {
        tiêu_đề: 'Xin chào thế giới'
      }
    });

    // Thay đổi dữ liệu sau khi khởi tạo
    instance.tiêu_đề = 'Nội dung đã cập nhật';
  </script>
</body>
</html>

Cơ chế Component

Component cho phép tái sử dụng mã nguồn. Để đăng ký toàn cục: 
Vue.component('tên-tag-mục-tiêu', {
  // Hàm data trả về object riêng biệt cho mỗi instance
  data () {
    return {
      cá_tính_dữ_liệu: ''
    }
  },
  template: '<span>'Nội dung...</span>',
  props: ['mã'],
  methods: {},
  computed: {},
  watch: {},
  lifecycleHooks: {}
});

Sử dụng Vue CLI

Môi trường xây dựng dự án chuyên nghiệp bao gồm webpack, hot reload và ESLint: 
# Cài đặt công cụ dòng lệnh
npm install --global @vue/cli

# Khởi tạo dự án mới (chọn option cần thiết)
vue create my-vue-project

# Truy cập thư mục
cd my-vue-project

# Lấy dependencies
npm install

# Chạy server dev
npm run serve

Tích hợp TypeScript

Sử dụng thư viện vue-class-component giúp kết hợp sức mạnh của OOP vào Vue:
  • Hàm decoratror @Component thay thế cho đối tượng options.
  • props và data trở thành các thuộc tính class.
  • computed được ánh xạ thành Getter/Setter.
  • Methods và Hooks的生命周期 chuyển thành các phương thức trong class.

Đơn vị Đơn (Single File Components - SFC)

Định dạng .vue là tiêu chuẩn vàng trong hệ sinh thái Vue, đóng gói ba phần chính:
  1. <template>: Đánh dấu cấu trúc HTML của component.
  2. <script>: Chứa logic JavaScript hoặc TypeScript.
  3. <style>: Định nghĩa CSS riêng biệt cho component đó.

Cộng tác Dữ liệu với Vuex

Khi ứng dụng phức tạp, dữ liệu nên được quản lý trung tâm thông qua createStore (Store).
  • State: Nguồn dữ liệu duy nhất (single source of truth).
  • Getters: Tính toán và lọc dữ liệu từ State (giống computed).
  • Mutations: Chỉ được phép thay đổi State (bắt buộc phải đồng bộ). Đây là cách thức duy nhất để sửa đổi dữ liệu.
  • Actions: Xử lý logic phức tạp, hỗ trợ bất đồng bộ (async). Sau đó gọi Mutation thông qua commit.

Kết nối Component với Store

Để sử dụng store bên trong component, cần nhập nó vào options: 
export default {
  store: store,
  computed: {
    // Cách 1: Trỏ trực tiếp
    someVal() { return this.store.state.something }
    // Cách 2: Sử dụng helper (khuyên dùng)
  },
  methods: {
    // Cách 1: Gọi trực tiếp
    doSomething() { this.store.commit('do_something') }
    // Cách 2: Map helpers
  }
}
Các helper phổ biến giúp rút gọn code:
  • mapState(): Ánh xạ state vào computed properties.
  • mapGetters(): Ánh xạ getters vào computed properties.
  • mapMutations(): Ánh xạ mutations vào methods.
  • mapActions(): Ánh xạ actions vào methods và gọi bằng dispatch.

Thẻ: Vue.js Vuex JavaScript Frontend Architecture Single File Components

Đăng vào ngày 26 tháng 6 lúc 01:02

Thẻ Phổ Biến

©2026 Thành phố Cuồng loạn