VueJS - Giới thiệu

Xin chào các bạn đang học lập trình web! Tôi rất vui mừng được làm hướng dẫn viên cho bạn trong hành trình đầy thú vị vào thế giới của Vue.js. Là một ai đó đã dạy lập trình hơn một thập kỷ, tôi có thể告诉 bạn rằng Vue.js là một trong những khung công tác thân thiện nhất với người mới bắt đầu. Hãy cùng nhau khám phá tại sao Vue.js lại trở thành sự lựa chọn yêu thích của các nhà phát triển trên toàn thế giới!

VueJS - Introduction

Vue.js là gì?

Vue.js là một khung công tác JavaScript tiến hóa được sử dụng để xây dựng giao diện người dùng. Tôi biết rằng điều này có thể听起来 hơi đáng sợ, nhưng hãy nghĩ về nó như một bộ công cụ đầy những phụ kiện hữu ích giúp tạo ra các trang web tương tác một cách dễ dàng.

Khi tôi lần đầu tiên gặp Vue.js, nó nhắc tôi đến việc lắp ráp các khối LEGO. Bạn bắt đầu với những mảnh nhỏ, dễ quản lý và dần dần xây dựng nên một điều kỳ diệu. Đó là vẻ đẹp của Vue.js - nó thân thiện, linh hoạt và mạnh mẽ.

Tại sao chọn Vue.js?

Dễ học: Nếu JavaScript là một ngôn ngữ, thì Vue.js sẽ là phương ngữ thân thiện và dễ dàng để học.
Linh hoạt: Nó phù hợp với nhu cầu của bạn, dù bạn đang xây dựng một widget đơn giản hay một ứng dụng phức tạp.
Hiệu suất: Nó nhẹ và nhanh, như một chiếc xe thể thao nhưng cho phát triển web.
Cộng đồng hỗ trợ: Luôn có ai đó sẵn sàng giúp đỡ khi bạn gặp khó khăn.

Bây giờ, hãy cùng bắt đầu với một đoạn mã!

Ứng dụng Vue.js đầu tiên của bạn

Ví dụ

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ứng dụng Vue.js đầu tiên</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>

<script>
var app = new Vue({
el: '#app',
data: {
message: 'Xin chào, Vue!'
}
})
</script>
</body>
</html>

Kết quả

Khi bạn mở tệp HTML này trong trình duyệt, bạn sẽ thấy:

Xin chào, Vue!

Chi tiết Consol

Nếu bạn mở bảng điều khiển của trình duyệt, bạn sẽ không thấy bất kỳ lỗi nào. Đó là một khởi đầu tốt!

Phân tích mã

Hãy phân tích mã này như chúng ta đang trong một lớp giải phẫu vui vẻ:

Cấu trúc HTML: Chúng ta có một tài liệu HTML cơ bản. Không có gì đáng sợ ở đây!
Script Vue.js:
```
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
```
Dòng này giống như mời Vue.js đến dự tiệc của chúng ta. Nó tải thư viện Vue.js từ một mạng phân phối nội dung (CDN).
Bộ chứa Ứng dụng:
```
<div id="app">
{{ message }}
</div>
```
<div> này là nơi ứng dụng Vue của chúng ta sẽ tồn tại. Cặp dấu ngoặc kép {{ }} là cách Vue nói, "Ở đây, tôi sẽ đặt một nội dung động!"
Thực thể Vue:
```
var app = new Vue({
el: '#app',
data: {
message: 'Xin chào, Vue!'
}
})
```
Đây là nơi xảy ra phép màu! Hãy phân tích nó thêm:

new Vue({...}) tạo một thực thể Vue mới.
el: '#app'告诉 Vue kết nối với phần tử DOM có ID 'app'.
data: { message: 'Xin chào, Vue!' } giống như cho Vue một túi dữ liệu để mang theo.

Tạo ứng dụng tương tác

Bây giờ, hãy làm cho ứng dụng của chúng ta sống động hơn một chút. Chúng ta sẽ làm cho ứng dụng phản hồi với đầu vào của người dùng:

Ví dụ

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ứng dụng Vue.js tương tác</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input v-model="message">
<p>The message is: {{ message }}</p>
</div>

<script>
var app = new Vue({
el: '#app',
data: {
message: 'Xin chào, Vue!'
}
})
</script>
</body>
</html>

Kết quả

Bạn sẽ thấy một trường nhập với "Xin chào, Vue!" được điền sẵn, và bên dưới nó:

The message is: Xin chào, Vue!

Khi bạn gõ vào trường nhập, thông báo bên dưới sẽ được cập nhật theo từng phiên bản!

Chi tiết Consol

Lại một lần nữa, bảng điều khiển của bạn nên không có lỗi. Nếu bạn gõ app.message trong bảng điều khiển, bạn sẽ thấy giá trị hiện tại của thông báo.

Điều gì đang xảy ra ở đây?

v-model: Đây là một hướng dẫn Vue tạo ra binding hai chiều trên các trường nhập. Nó giống như một sợi dây ma thuật kết nối trường nhập và dữ liệu message của chúng ta.
Cập nhật theo từng phiên bản: Vue tự động cập nhật DOM khi dữ liệu thay đổi. Không cần manipulatie DOM thủ công!

Phương thức trong Vue

Hãy thêm một chút hành vi cho ứng dụng của chúng ta:

Ví dụ

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue với Phương thức</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">Đảo ngược Thông báo</button>
</div>

<script>
var app = new Vue({
el: '#app',
data: {
message: 'Xin chào, Vue!'
},
methods: {
reverseMessage: function() {
this.message = this.message.split('').reverse().join('')
}
}
})
</script>
</body>
</html>

Kết quả

Bạn sẽ thấy:

Xin chào, Vue!
[Đảo ngược Thông báo]

Khi bạn nhấp vào nút, thông báo sẽ bị đảo ngược!

Chi tiết Consol

Thử gõ app.reverseMessage() trong bảng điều khiển. Nó sẽ đảo ngược thông báo như khi bạn nhấp vào nút!

Hiệu ứng Reactivity của Vue

Điều chúng ta vừa thấy là hệ thống reactivity của Vue hoạt động. Khi dữ liệu thay đổi, Vue tự động cập nhật DOM. Nó giống như có một trợ lý chăm chỉ cập nhật bảng trắng của bạn mỗi khi bạn thay đổi ghi chú.

Kết luận

Chúc mừng! Bạn đã迈出了进入Vue.js美妙世界的第一步。我们已经介绍了创建Vue实例、处理数据以及通过方法添加交互性的基础知识。

记住，学习编码就像学习烹饪。你从简单的食谱（如我们的示例）开始，然后在你意识到之前，你正在创建令人惊叹的复杂应用程序！

Trong bài học tiếp theo, chúng ta sẽ khám phá thêm các tính năng của Vue như các thuộc tính tính toán và các móc lifecycle. Đến那时候, hãy tiếp tục thử nghiệm những gì bạn đã học. Thử thay đổi các thông báo, thêm nhiều thuộc tính dữ liệu hơn, hoặc tạo các phương thức mới. Càng chơi nhiều, bạn sẽ học hỏi nhiều hơn!

Chúc mừng coding, các nhà vô địch tương lai của Vue! ??‍??‍?

Credits: Image by storyset

Hướng Dẫn Trước:

VueJS - Cài đặt môi trường

Hướng Dẫn Tiếp Theo:

VueJS - Instance