Bai 1: Vue là gì?

Vue (phát âm là /vjuː/, giống như view ) là một khuôn khổ JavaScript để xây dựng giao diện người dùng. Nó được xây dựng trên HTML, CSS và JavaScript chuẩn và cung cấp một mô hình lập trình dựa trên thành phần, khai báo giúp bạn phát triển hiệu quả giao diện người dùng ở mọi mức độ phức tạp.

Sau đây là một ví dụ tối thiểu:

js

import { createApp, ref } from 'vue'

createApp({
  setup() {
    return {
      count: ref(0)
    }
  }
}).mount('#app')

bản mẫu

<div id="app">
  <button @click="count++">
    Count is: {{ count }}
  </button>
</div>

Kết quảSố đếm là: 0

Ví dụ trên minh họa hai tính năng cốt lõi của Vue:

• Kết xuất khai báo : Vue mở rộng HTML chuẩn với cú pháp mẫu cho phép chúng ta mô tả khai báo đầu ra HTML dựa trên trạng thái JavaScript.
• Tính phản ứng : Vue tự động theo dõi các thay đổi trạng thái của JavaScript và cập nhật DOM một cách hiệu quả khi có thay đổi xảy ra.

Bạn có thể đã có thắc mắc – đừng lo lắng. Chúng tôi sẽ đề cập đến mọi chi tiết nhỏ trong phần còn lại của tài liệu. Bây giờ, vui lòng đọc tiếp để bạn có thể hiểu rõ hơn về những gì Vue cung cấp.

Tạo ứng dụng Vue​

Điều kiện tiên quyết

Cài đặt Node.js phiên bản 18.3 trở lên

Làm quen với dòng lệnh

Hãy đảm bảo bạn đã cài đặt phiên bản Node.js mới nhất và thư mục làm việc hiện tại của bạn là nơi bạn định tạo dự án. Chạy lệnh sau trong dòng lệnh của bạn (không có $dấu):

$ npm create vue@latest
$ cd <your-project-name>
$ npm install
$ npm run dev

Khi bạn đã sẵn sàng đưa ứng dụng của mình vào sản xuất, hãy chạy lệnh sau:

$ npm run build