Tiếng Việt

Hướng dẫn VueJS

Hướng dẫn VueJS: Bắt đầu với Vue.js

Xin chào các bạn lập trình web đang học hỏi! Tôi rất vui mừng được làm hướng dẫn viên của bạn trong hành trình thú vị vào thế giới của Vue.js. Là một ai đó đã dạy khoa học máy tính hơn một thập kỷ, tôi có thể nói 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. Vậy hãy cùng nhau nhảy vào và tạo ra một chút phép thuật nào!

VueJS - Home

Vue.js là gì?

Vue.js là một khung công tác JavaScript tiến hóa cho việc xây dựng giao diện người dùng. Nhưng điều đó có nghĩa là gì trong tiếng Anh đơn giản? Hãy tưởng tượng bạn đang xây dựng một ngôi nhà. Vue.js giống như một bộ tường và phòng预制 mà bạn có thể dễ dàng lắp ráp để tạo ra ngôi nhà mơ ước của mình. Nó làm cho việc xây dựng các ứng dụng web phức tạp trở nên đơn giản như việc lắp ráp các khối LEGO!

Tại sao chọn Vue.js?

  1. Dễ học
  2. Linh hoạt và mở rộng
  3. Hiệu suất tốt
  4. Hỗ trợ cộng đồng tuyệt vời

Yêu cầu trước

Trước khi chúng ta bắt đầu, hãy chắc chắn rằng chúng ta đã có mọi thứ cần thiết:

  • Hiểu biết cơ bản về HTML và CSS
  • Quen thuộc với JavaScript (đừng lo nếu bạn không phải là chuyên gia!)
  • Một trình duyệt web hiện đại (Tôi khuyên dùng Chrome hoặc Firefox)
  • Một trình soạn thảo văn bản (VS Code là lựa chọn cá nhân yêu thích của tôi)

Thiết lập dự án Vue.js đầu tiên

Hãy bắt đầu bằng cách tạo một ứng dụng đơn giản "Hello, Vue!". Đầu tiên, chúng ta cần bao gồm Vue.js trong dự án của mình. Chúng ta có thể làm điều này bằng cách thêm thẻ script vào tệp HTML của mình.

<!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 đầ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>
new Vue({
el: '#app',
data: {
message: 'Hello, Vue!'
}
})
</script>
</body>
</html>

Hãy phân tích này:

  1. Chúng ta bao gồm thư viện Vue.js bằng cách sử dụng liên kết CDN.
  2. 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.
  3. Trong div, chúng ta sử dụng {{ message }}. Đây được gọi là chèn, và nó là cách chúng ta hiển thị dữ liệu trong Vue.
  4. Trong thẻ <script>, chúng ta tạo một实例 Vue mới,告诉它要定位到具有 id "app" 的元素。
  5. Chúng ta định nghĩa một đối tượng data với thuộc tính message. Đây là dữ liệu mà Vue sẽ sử dụng trong ứng dụng của chúng ta.

Nếu bạn lưu tệp này và mở nó trong trình duyệt, bạn nên thấy "Hello, Vue!" hiển thị trên trang. Chúc mừng! Bạn vừa tạo ra ứng dụng Vue.js đầu tiên của mình!

Đạo lệnh Vue: Tạo sự tương tác

Bây giờ chúng ta đã hiểu rõ các khái niệm cơ bản, hãy làm cho ứng dụng của chúng ta trở nên tương tác hơn một chút. Vue cung cấp cho chúng ta các đạo lệnh - các thuộc tính đặc biệt đưa ra hướng dẫn cho Vue về cách hành xử. Hãy xem xét một vài đạo lệnh phổ biến:

v-model: Kết nối dữ liệu hai chiều

v-model tạo ra một kết nối hai chiều giữa các输入字段 và trạng thái ứng dụng. Hãy cập nhật ứng dụng của chúng ta để bao gồm một trường nhập liệu:

<div id="app">
<input v-model="message">
<p>The message is: {{ message }}</p>
</div>

<script>
new Vue({
el: '#app',
data: {
message: 'Hello, Vue!'
}
})
</script>

Bây giờ, khi bạn gõ vào trường nhập liệu, bạn sẽ thấy tin nhắn cập nhật theo từng phiên bản. Liệu có phải là phép thuật không?

v-if và v-else: Hiển thị điều kiện

Đôi khi chúng ta muốn hiển thị hoặc ẩn các phần tử dựa trên một điều kiện. Đó là khi v-if và v-else rất hữu ích:

<div id="app">
<button @click="toggleVisibility">Toggle Message</button>
<p v-if="isVisible">Now you see me!</p>
<p v-else>Now you don't!</p>
</div>

<script>
new Vue({
el: '#app',
data: {
isVisible: true
},
methods: {
toggleVisibility() {
this.isVisible = !this.isVisible
}
}
})
</script>

Trong ví dụ này, chúng ta sử dụng v-if và v-else để chuyển đổi giữa hai tin nhắn. Đạo lệnh @click là viết tắt của v-on:click, nó lắng nghe các sự kiện nhấp.

v-for: Hiển thị danh sách

Khi chúng ta cần hiển thị một danh sách các mục, v-for là đạo lệnh mà chúng ta sẽ sử dụng:

<div id="app">
<ul>
<li v-for="fruit in fruits">{{ fruit }}</li>
</ul>
</div>

<script>
new Vue({
el: '#app',
data: {
fruits: ['Apple', 'Banana', 'Cherry', 'Durian']
}
})
</script>

Điều này sẽ hiển thị một danh sách các quả. Nó đơn giản như vậy!

Phương thức trong Vue

Phương thức là các hàm mà chúng ta có thể sử dụng để thêm hành vi vào các instance Vue của mình. Hãy tạo một bộ đếm đơn giản:

<div id="app">
<p>Count: {{ count }}</p>
<button @click="increment">Increment</button>
<button @click="decrement">Decrement</button>
</div>

<script>
new Vue({
el: '#app',
data: {
count: 0
},
methods: {
increment() {
this.count++
},
decrement() {
this.count--
}
}
})
</script>

Ở đây, chúng ta đã xác định hai phương thức: increment và decrement. Các phương thức này được gọi khi các nút tương ứng được nhấp, cập nhật thuộc tính count của dữ liệu.

Thuộc tính tính toán: Tính toán thông minh

Thuộc tính tính toán là những thuộc tính có khả năng đặc biệt. Chúng có thể thực hiện các phép toán phức tạp và được cache dựa trên các dependencies của chúng. Hãy xem một ví dụ:

<div id="app">
<input v-model="firstName">
<input v-model="lastName">
<p>Full Name: {{ fullName }}</p>
</div>

<script>
new Vue({
el: '#app',
data: {
firstName: '',
lastName: ''
},
computed: {
fullName() {
return this.firstName + ' ' + this.lastName
}
}
})
</script>

Ở đây, fullName là một thuộc tính tính toán kết hợp firstName và lastName. Nó sẽ tự động cập nhật whenever bất kỳ một trong dependencies của nó thay đổi.

Tóm tắt các phương thức Vue.js

Dưới đây là bảng tóm tắt các phương thức Vue.js mà chúng ta đã xem xét:

Phương thức Mô tả Ví dụ
data Giữ dữ liệu cho instance Vue data: { message: 'Hello' }
methods Chứa các hàm để thêm hành vi methods: { greet() { alert('Hi!') } }
computed Các thuộc tính được cache cập nhật khi dependencies thay đổi computed: { fullName() { return this.firstName + ' ' + this.lastName } }
el Xác định phần tử để mount instance Vue el: '#app'

Kết luận

Chúc mừng! Bạn đã迈出了进入Vue.js美妙世界的第一步。Chúng ta đã xem xét các khái niệm cơ bản về việc tạo một instance Vue, sử dụng các đạo lệnh để tạo sự tương tác và thêm hành vi bằng các phương thức và thuộc tính tính toán.

Hãy nhớ rằng việc học lập trình giống như học một ngôn ngữ mới - nó đòi hỏi sự thực hành và kiên nhẫn. Đừng nản lòng nếu mọi thứ không ngay lập tức trở nên rõ ràng. Hãy tiếp tục thử nghiệm, tiếp tục xây dựng và quan trọng nhất, hãy tiếp tục vui vẻ!

Trong bài học tiếp theo, chúng ta sẽ深入研究 các thành phần, những khối xây dựng của các ứng dụng Vue lớn hơn. Đến那时候, chúc bạn lập trình vui vẻ!

Credits: Image by storyset

 
Hướng Dẫn Tiếp Theo:
VueJS - Tổng quan