Trong bài viết này, chúng ta sẽ khám phá các khái niệm cơ bản của Vue JS và cách sử dụng chúng để xây dựng game Chẵn Lẻ. Chúng ta sẽ bắt đầu từ những khái niệm cơ bản như cài đặt Vue JS, tạo và quản lý các thành phần, xử lý sự kiện và thậm chí là kết hợp với các thư viện và công cụ khác.
Trong thời đại công nghệ ngày nay, Vue JS đã trở thành một trong những framework, library phát triển ứng dụng web phổ biến nhất cùng với ReactJS và Angular. Với khả năng linh hoạt, dễ học và hiệu suất cao, Vue JS đã thu hút sự quan tâm của rất nhiều nhà phát triển trên toàn thế giới.
“ Vue.js là một framework linh động (nguyên bản tiếng Anh: progressive – tiệm tiến) dùng để xây dựng giao diện người dùng (user interfaces). Khác với các framework nguyên khối (monolithic), Vue được thiết kế từ đầu theo hướng cho phép và khuyến khích việc phát triển ứng dụng theo từng bước. Khi phát triển lớp giao diện (view layer), người dùng chỉ cần dùng thư viện lõi (core library) của Vue, vốn rất dễ học và tích hợp với các thư viện hoặc dự án có sẵn. Cùng lúc đó, nếu kết hợp với những kĩ thuật hiện đại như SFC (single file components) và các thư viện hỗ trợ, Vue cũng đáp ứng được dễ dàng nhu cầu xây dựng những ứng dụng một trang (SPA – Single-Page Applications) với độ phức tạp cao hơn nhiều.” – Theo trang vi.vuejs.org/
Trong bài viết này, chúng ta sẽ khám phá các khái niệm cơ bản của Vue JS và cách sử dụng chúng để xây dựng game Chẵn Lẻ. Chúng ta sẽ bắt đầu từ những khái niệm cơ bản như cài đặt Vue JS, tạo và quản lý các thành phần, xử lý sự kiện và thậm chí là kết hợp với các thư viện và công cụ khác.
Dù bạn là một người mới bắt đầu hoặc đã có kinh nghiệm với các framework khác, hướng dẫn này sẽ giúp bạn tiếp cận VueJS một cách dễ dàng và hiệu quả. Hãy sẵn sàng để bước vào thế giới phát triển ứng dụng web mạnh mẽ với Vue JS!
Bài viết này tập trung vào 2 phần chính. Phần 1 là những cú pháp cơ bản của Vuejs, cung cấp những kiến thức cần thiết để phát triển game của chúng ta. Phần 2 là bắt tay vào làm game sau khi nắm chắc kiến thức từ phần 1
- Các kiến thức cơ bản trong VueJS
Bước đầu tiên ta tạo 1 file .html để bắt đầu code. Thay vì cài đặt cấu trúc các thư mục phức tạp thì bạn có thể lấy link trên trang unpkg.com rồi dán vào file như sau:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
<link rel=”stylesheet” href=”styles.css” />
<script src=”https://unpkg.com/vue@next” defer></script>
<script src=”./code.js” defer></script>
</head>
<body>
<div id=”app”>
<h1>{{ text }}</h1>
</div>
</body>
</html>
Tiếp theo là tạo 1 file .js
const app = Vue.createApp({
data() {
return {
text:”Welcome to my VueJS course !”
}
},
});
app.mount(“#app”);
Đây sẽ là file code của chúng ta, cho phép chúng ta render (kết xuất) dữ liệu lên DOM theo hướng khai báo (declarative, thay vì hướng mệnh lệnh – imperative) sử dụng một cú pháp đơn giản. Khai báo 1 biến app và trong đó là 1 object bao gồm các state. Trong hàm data() trả về các biến giúp lưu trữ dữ liệu.
Trong file html việc hiển thị thông tin một cách đơn giản thông qua 2 dấu ngoặc nhọn. Và chạy code :
Tiếp theo cùng tìm hiểu về điều kiện và vòng lặp:
data() {
return {
text:”Welcome to my VueJS course !”,
bool: true
}
},
Mình khởi tạo 1 biến bool trong file js. Để check xem nếu true thì in ra dòng chữ còn không thì không được in mà in ra dòng “v-else”:
<div id=”app”>
<h1 v-if=”bool”>{{ text }}</h1>
<h1 v-else=”bool”>Good Bye</h1>
</div>
Bạn đổi thành false để xem kết quả nhé
Còn về vòng lặp, mình khởi tạo 1 mảng như sau
.js :
data() {
return {
text:”Welcome to my VueJS course !”,
bool: true,
week : [“Mon”, “Tue”, “Wed”, “Thus”, “Fri”, “Sat”, “Sun”]
}
},
.html :
<div id=”app”>
<h1 v-if=”bool”>{{ text }}</h1>
<h3 v-for=”day in week”>{{day}}</h3>
</div>
Cú pháp khá giống vòng lặp for trong các ngôn ngữ lập trình phải không nào. Nó sẽ render ra các thẻ h3 như trong ảnh :
Nếu bạn đã quen với việc xử lý sự kiện trong JS thông qua sử dụng onClick, onChange thì nay bạn sẽ được tìm hiểu cách xử lý sự kiện trong Vue thông qua “v-on” cùng với việc khởi tạo hàm methods (Methods là nơi định nghĩa các hàm chức năng trong Vue. js, nơi ta tập trung xử lý logic phức tạp của toàn bộ component. Nó là một đối tượng có nhiều hành động bên trong, tương ứng với mỗi thao tác của user hay mỗi công việc cập nhật trạng thái cho ứng dụng.)
.js :
data() {
return {
text:”Welcome to my VueJS course !”,
bool: false,
week : [“Mon”, “Tue”, “Wed”, “Thus”, “Fri”, “Sat”, “Sun”]
}
},
methods:{
setState(){
this.bool = !this.bool;
}
}
Bạn có thể gọi các biến trong hàm data thông qua “this” – một khái niệm khá “rắc rối” trong JS. Bạn có thể đọc thêm tại đây.
.html:
<div id=”app”>
<h1 v-if=”bool”>{{ text }}</h1>
<h1 v-else=”bool”>Good Bye</h1>
<h3 v-for=”day in week”>{{day}}</h3>
<button v-on:click=”setState”>{{bool ? ‘On’ : ‘Off’}}</button>
</div>
Chúng ta vừa tạo 1 toggle đơn giản với v-on:click rồi, bạn có thể hiểu là v-on giúp chúng ta lắng nghe sự kiện trong VueJS, ngoài ra cũng có thể có v-on:submit, v-on:change … Bạn cũng có thể viết tắt bằng cách chỉ viết dấu “@” thay cho “v-on:”
Tiếp theo là v-model, v-model giúp bắt các value khi nhập vào thẻ input. Xem ví dụ sau nhé:
.js
data() {
return {
text:”Welcome to my VueJS course !”,
bool: false,
week : [“Mon”, “Tue”, “Wed”, “Thus”, “Fri”, “Sat”, “Sun”],
inputVal: “”
}
},
.html
<div id=”app”>
lt;h1 v-if=”bool”>{{ text }}</h1>
<h1 v-else=”bool”>Good Bye</h1>
<h3 v-for=”day in week”>{{day}}</h3>
<button v-on:click=”setState”>{{bool ? ‘On’ : ‘Off’}}</button>
<input type=”text” v-model=”inputVal”>
<h3>{{inputVal}}</h3>
</div>
Tiếp đến là thao tác với các phần tử DOM. Trong Vue.js, refs là một thuộc tính cho phép bạn truy cập đến các phần tử DOM hoặc component con trong một component cha.
Ví dụ, nếu bạn muốn truy cập đến một phần tử DOM trong component của mình để thực hiện các tác vụ như thêm lắng nghe sự kiện hoặc thay đổi thuộc tính, bạn có thể sử dụng refs để thực hiện điều đó. Xem ví dụ dưới đây nhé:
.html
<div id=”app”>
<h1 v-if=”bool”>{{ text }}</h1>
<h1 v-else=”bool”>Good Bye</h1>
<h3 v-for=”day in week”>{{day}}</h3>
<button v-on:click=”setState”>{{bool ? ‘On’ : ‘Off’}}</button>
<input ref=”inpText” type=”text” v-model=”inputVal”>
<h3>{{inputVal}}</h3>
<button @click=”onFocus”>Focus Input</button>
</div>
.js
data() {
return {
text:”Welcome to my VueJS course !”,
bool: false,
week : [“Mon”, “Tue”, “Wed”, “Thus”, “Fri”, “Sat”, “Sun”]
}
},
methods:{
setState(){
this.bool = !this.bool;
},
onFocus(){
this.$refs.inpText.focus();
},
}
Để tiện dụng, người dùng cần thêm 1 nút bấm với sự kiện mỗi khi bấm nút thì ô input sẽ được focus y như bạn bấm trực tiếp vào nó. Mục đích để tương tác với DOM. Bạn hãy thử làm theo ví dụ rồi xem kết quả nhé.
Cuối cùng là mouted. Trong Vue, mounted là một lifecycle hook, nó được gọi khi một instance Vue đã được mounted (hoặc được gắn kết) vào một phần tử DOM. Trong hook này, bạn có thể thực hiện các tác vụ như truy xuất các phần tử DOM, khởi tạo các plugin hoặc thực hiện các yêu cầu AJAX để lấy dữ liệu từ server.
Tiếp theo, người dùng sẽ thử thay đổi style cho nút button thành nền xanh và chữ màu trắng nhé.
js:
data() {
return {
text:”Welcome to my VueJS course !”,
bool: false,
week : [“Mon”, “Tue”, “Wed”, “Thus”, “Fri”, “Sat”, “Sun”]
}
},
mounted(){
const myApp = this.$refs.myApp;
myApp.style.backgroundColor = ‘blue’;
myApp.style.color = ‘white’;
}
methods:{
setState(){
this.bool = !this.bool;
},
onFocus(){ this.$refs.inpText.focus();
},
}
.html
<div id=”app”>
<h1 v-if=”bool”>{{ text }}</h1>
<h1 v-else=”bool”>Good Bye</h1>
<h3 v-for=”day in week”>{{day}}</h3>
<button v-on:click=”setState”>{{bool ? ‘On’ : ‘Off’}}</button>
<input ref=”inpText” type=”text” v-model=”inputVal”>
<h3>{{inputVal}}</h3>
<button ref=”myaApp” @click=”onFocus”>Focus Input</button>
</div>
Bạn chạy thử xem kết quả nhé.
Giảng viên Nguyễn Thị Loan
Bộ môn Công nghệ thông tin
Trường Cao đẳng FPT Polytechnic cơ sở Hà Nội
