VueJS - Các thể hiện (Instances)

Xin chào các bạn đang học lập trình web! Hôm nay, chúng ta sẽ cùng khám phá thế giới kỳ diệu của các thể hiện Vue.js. Đừng lo lắng nếu bạn mới bắt đầu học lập trình - tôi sẽ hướng dẫn bạn từng bước một, giống như tôi đã làm cho hàng trăm học sinh trong những năm dạy học của mình. Vậy, hãy lấy một tách cà phê (hoặc trà, nếu bạn thích), và chúng ta cùng bắt đầu nhé!

VueJS - Instances

Vue Instance là gì?

Trước khi chúng ta nhảy vào mã, hãy hiểu Vue instance là gì. Hãy tưởng tượng bạn đang xây dựng một ngôi nhà. Vue instance giống như nền móng của ngôi nhà đó - nó là nơi mọi thứ bắt đầu. Nó là هست tâm kiểm soát toàn bộ ứng dụng Vue của bạn.

Cú pháp

Tạo một Vue instance rất đơn giản. Dưới đây là cú pháp cơ bản:

new Vue({
// các tùy chọn (options)
})

Đó là tất cả! Chúng ta sử dụng từ khóa new tiếp theo là Vue(), và trong dấu ngoặc, chúng ta truyền một đối tượng với các tùy chọn khác nhau. Những tùy chọn này giống như bản vẽ thiết kế cho ngôi nhà của chúng ta - chúng告诉 Vue ứng dụng của chúng ta sẽ hoạt động như thế nào.

Thể hiện Vue đầu tiên của bạn

Hãy cùng tạo thể hiện Vue đầu tiên của chúng ta. Đừng lo lắng nếu bạn không hiểu hết mọi thứ ngay lập tức - chúng ta sẽ phân tích từng phần một.

Ví dụ 1

<!DOCTYPE html>
<html>
<head>
<title>Ứng dụng Vue đầu tiên của tôi</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ả

Xin chào, Vue!

Bây giờ, hãy phân tích điều này:

Chúng ta bao gồm thư viện Vue.js trong tệp HTML của mình.
Chúng ta tạo một <div> với id là "app". Đây là nơi ứng dụng Vue của chúng ta sẽ tồn tại.
Trong <div>, chúng ta sử dụng {{ message }}. Đây được gọi là chèn nội dung - nó là cách chúng ta hiển thị dữ liệu trong Vue.
Trong thẻ <script>, chúng ta tạo một thể hiện Vue mới.
Chúng ta sử dụng el: '#app' để告诉 Vue phần tử nào nó nên kiểm soát (div với id "app").
Trong đối tượng data, chúng ta định nghĩa một thuộc tính message với giá trị 'Xin chào, Vue!'.

Khi Vue thấy {{ message }} trong HTML của chúng ta, nó thay thế nó bằng giá trị của message từ dữ liệu của chúng ta. Đó là phép màu, phải không?

Dữ liệu và Phương thức

Các thể hiện Vue có thể chứa hơn chỉ dữ liệu. Chúng còn có thể có các phương thức - các hàm có thể thực hiện các hành động hoặc tính toán.

Ví dụ 2

<!DOCTYPE html>
<html>
<head>
<title>Ví dụ phương thức Vue</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 tin nhắn</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ả

Ban đầu, bạn sẽ thấy "Xin chào, Vue!" và một nút. Khi bạn nhấp vào nút, tin nhắn sẽ đảo ngược thành "!euV ,olleH".

Trong ví dụ này:

Chúng ta đã thêm một nút với v-on:click="reverseMessage" vào. Điều này告诉 Vue để gọi phương thức reverseMessage khi nút được nhấp.
Trong thể hiện Vue của chúng ta, chúng ta đã thêm một đối tượng methods với một hàm reverseMessage.
Hàm chia tin nhắn thành một mảng các ký tự, đảo ngược nó và ghép lại thành một chuỗi.
Chúng ta sử dụng this.message để truy cập và thay đổi thuộc tính message của dữ liệu.

Các Hooks trong Vòng đời

Các thể hiện Vue có một vòng đời - chúng được tạo ra, gắn vào DOM, cập nhật và cuối cùng bị hủy. Vue cung cấp các hooks cho phép bạn chạy mã tại các giai đoạn cụ thể của vòng đời này.

Ví dụ

<!DOCTYPE html>
<html>
<head>
<title>Hooks vòng đời Vue</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>

<script>
var app = new Vue({
el: '#app',
data: {
message: 'Xin chào, Vue!'
},
created: function() {
console.log('Thể hiện Vue được tạo!')
},
mounted: function() {
console.log('Thể hiện Vue được gắn vào DOM!')
this.message = 'Chào mừng đến với Vue!'
}
})
</script>
</body>
</html>

Kết quả

Trong trình duyệt, bạn sẽ thấy "Chào mừng đến với Vue!". Trong console, bạn sẽ thấy hai thông báo:

Thể hiện Vue được tạo!
Thể hiện Vue được gắn vào DOM!

Đây là những gì đang xảy ra:

Hook created chạy khi thể hiện Vue được tạo. Chúng ta đang ghi một thông báo vào console.
Hook mounted chạy khi thể hiện Vue được gắn vào DOM. Chúng ta ghi một thông báo khác và thay đổi thuộc tính message của dữ liệu.

Các hooks này rất hữu ích để chạy mã tại các điểm cụ thể trong vòng đời của ứng dụng.

Các Thuộc tính và Phương thức của Thể hiện Vue

Các thể hiện Vue cũng đi kèm với các thuộc tính và phương thức内置. Hãy cùng xem một số trong số chúng:

Ví dụ

<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính và phương thức thể hiện Vue</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="updateMessage">Cập nhật tin nhắn</button>
</div>

<script>
var app = new Vue({
el: '#app',
data: {
message: 'Xin chào, Vue!'
},
methods: {
updateMessage: function() {
this.$data.message = 'Tin nhắn đã được cập nhật!'
console.log(this.$el)
this.$nextTick(function() {
console.log('DOM đã được cập nhật!')
})
}
}
})

console.log(app.$data)
</script>
</body>
</html>

Trong ví dụ này:

Chúng ta sử dụng this.$data để truy cập trực tiếp vào đối tượng dữ liệu.
Chúng ta sử dụng this.$el để ghi phần tử root của thể hiện Vue.
Chúng ta sử dụng this.$nextTick để chạy một hàm sau khi DOM đã được cập nhật.
Ngoài thể hiện Vue, chúng ta có thể truy cập các thuộc tính bằng cách sử dụng app.$data.

Dưới đây là bảng một số thuộc tính và phương thức thường được sử dụng của thể hiện Vue:

Thuộc tính/Phương thức	Mô tả
$data	Đối tượng dữ liệu mà thể hiện Vue đang theo dõi
$el	Phần tử mà thể hiện Vue đang quản lý
$watch	Theo dõi sự thay đổi của một thuộc tính của thể hiện Vue
$set	Đặt một thuộc tính trên một đối tượng, kích hoạt cập nhật giao diện
$nextTick	Đợi đến khi vòng lặp cập nhật DOM tiếp theo hoàn thành

Nhớ rằng, những ví dụ này chỉ là một phần nhỏ. Vue.js có rất nhiều tính năng và khả năng mà chúng ta sẽ khám phá trong các bài học tiếp theo.

Hy vọng rằng giới thiệu về các thể hiện Vue đã giúp ích cho bạn! Nhớ rằng, học lập trình giống như học một ngôn ngữ mới - nó đòi hỏi thời gian và sự luyện tập. Đừng nản lòng nếu bạn không hiểu hết mọi thứ ngay lập tức. Hãy tiếp tục thử nghiệm, tiếp tục lập trình và quan trọng nhất, hãy vui vẻ! Thấy bạn trong bài học tiếp theo!

Credits: Image by storyset