Giới thiệu về Vue.js

Vue.js là một framework JavaScript tiến bộ giúp bạn dễ dàng xây dựng các giao diện người dùng (UI) động và tương tác. Được thiết kế với sự tập trung vào sự đơn giản và khả năng mở rộng, Vue lý tưởng cho cả người mới học lập trình lẫn các nhà phát triển chuyên nghiệp đang tìm kiếm một công cụ hiệu quả và mạnh mẽ.

Đặc điểm nổi bật của Vue.js

Reactive Data Binding: Tự động đồng bộ hóa giữa dữ liệu và giao diện người dùng.
Component-Based Development: Dễ dàng quản lý mã nguồn bằng cách chia nhỏ giao diện thành các thành phần.
Dễ học và sử dụng: Nếu bạn đã biết HTML, CSS và JavaScript cơ bản, bạn sẽ dễ dàng làm quen với Vue.

Bắt đầu với Vue.js

Bước 1: Tạo trang HTML

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>My first Vue page</title>
</head>
<body>

</body>
</html>

Bước 2: Tạo thẻ div

Bước 3: Cài đặt Vue.js hoặc thêm qua CDN

script src=”https://unpkg.com/vue@3/dist/vue.global.js”></script>

Bước 4: Thêm instance của Vue

<div id=”app”></div>

<script src=”https://unpkg.com/vue@3/dist/vue.global.js”></script>
<script>

const app = Vue.createApp({
data() {
return {
message: “Hello World!”
}
}
})

app.mount(‘#app’)

</script>

Bước 5: Hiện ‘message’ với văn bản nội suy (Text interpolation)

<div id=”app”> {{ message }} </div>

Code tham khảo đầy đủ

<!DOCTYPE html>
<html lang=”en”>
<head>
  <title>My first Vue page</title>
</head>
<body>

  <div id=”app”>
  {{ message }}
  </div>

  <script src=”https://unpkg.com/vue@3/dist/vue.global.js”></script>

  <script>
  const app = Vue.createApp({
data() {
  return {
message: “Hello World!”
}
}
})

app.mount(‘#app’)

  </script>
</body>
</html>

Kết luận

Vue.js là một công cụ mạnh mẽ và dễ học, giúp bạn nhanh chóng xây dựng các giao diện tương tác. Từ một ví dụ đơn giản như trên, bạn có thể mở rộng để phát triển các ứng dụng phức tạp hơn với các tính năng như điều hướng, quản lý trạng thái, hoặc tích hợp API. Bắt đầu học Vue.js ngay hôm nay để khám phá tiềm năng không giới hạn của framework này!

Giảng viên Võ Văn Mỹ
Bộ môn Công nghệ thông tin
FPT Polytechnic TP HCM