Tạo trang web hiển thị tên và tuổi của người dùng bằng VueJS 2
Trong bài viết này, mình sẽ tìm hiểu một ví dụ cụ thể về cách Vue.js giúp chúng ta liên kết dữ liệu từ một Vue instance vào các phần tử HTML. Mình sẽ tạo ra một trang web đơn giản để hiển thị thông tin về tên và tuổi của người dùng, một bước khởi đầu trong việc làm quen với khả năng binding mạnh mẽ của Vue.js.
Mình sẽ bắt đầu với việc tạo cấu trúc cơ bản của trang web, kết nối với Vue.js và thực hiện các bước cơ bản để liên kết dữ liệu từ Vue instance vào các phần tử HTML.
Hãy cùng nhau tìm hiểu cách Vue.js giúp mình tạo ra ứng dụng web tương tác và linh hoạt thông qua việc binding dữ liệu!
File HTML là nơi mà ứng dụng Vue.js của chúng ta được chạy. Trong ví dụ này, mình có:
<script> import Vue.js: Import thư viện Vue.js từ CDN để sử dụng trong ứng dụng của bạn.
<div id="app">: Phần tử DOM này sẽ được Vue instance binding vào để hiển thị nội dung của ứng dụng.
File JavaScript (App.vue):
<template>
<div>
<h1>Thông tin người dùng</h1>
<div>
<label for="name">Tên:</label>
<input type="text" id="name" v-model="userData.userName" />
</div>
<div>
<label for="age">Tuổi:</label>
<input type="number" id="age" v-model.number="userData.userAge" />
</div>
<div>
<p>Tên: {{ userData.userName }}</p>
<p>Tuổi: {{ userData.userAge }}</p>
</div>
</div>
</template>
<script>
export default {
data() {
return {
userData: {
userName: '', // Dữ liệu tên người dùng
userAge: null, // Dữ liệu tuổi người dùng
},
};
},
};
</script>
<style>
/* CSS styles for your component */
</style>
File này chứa một Vue component đơn giản:
<template>: Đây là phần chứa template của component. Trong trường hợp này, template hiển thị một form đơn giản với trường nhập liệu cho tên và tuổi người dùng.
<script>: Phần này chứa logic JavaScript của component. Trong ví dụ này, component chỉ đơn giản là có một object userData trong data chứa thông tin về tên và tuổi người dùng.
<style>: Phần này chứa CSS styles cho component. Trong ví dụ này, chúng ta không có styles, nhưng bạn có thể thêm styles tùy ý cho component của mình.
File JavaScript (main.js):
import Vue from 'vue';
import App from './App.vue';
Vue.config.productionTip = false;
new Vue({
el: '#app',
render: h => h(App),
data: {
userData: {
userName: '', // Dữ liệu tên người dùng
userAge: null, // Dữ liệu tuổi người dùng
},
},
});
File này là nơi mà chúng ta khởi tạo Vue instance và kết nối nó với phần tử DOM đã được định nghĩa trong file HTML.
import Vue from 'vue';: Import Vue.js vào dự án của bạn.
Kết quả:
Qua cách tổ chức này, mình chia ứng dụng thành các thành phần riêng biệt: một file HTML để hiển thị, một file Vue component để định nghĩa giao diện và logic, và một file JavaScript để khởi tạo và kết nối các phần này lại với nhau. Điều này giúp mã nguồn của bạn trở nên dễ bảo trì, mở rộng và tái sử dụng hơn.
Các hàm xử lý chuỗi trong Javascript (cắt / tách / nối chuỗi ..) 
Chia lấy phần dư / chia lấy phần nguyên trong javascript 
Các cách khai báo biến trong Javascript 
Các sự kiện (Event) trong Javascript 
Hướng tạo thanh search bar bằng CSS 
Hàm array.slice() trong Javascript 
Tính tổng hai số bằng Javascript (cộng hai số) 
Cách khai báo biến trong PHP, các loại biến thường gặp 
Download và cài đặt Vertrigo Server 
Thẻ li trong HTML 
Thẻ article trong HTML5 
Cấu trúc HTML5: Cách tạo template HTML5 đầu tiên 
Cách dùng thẻ img trong HTML và các thuộc tính của img 
Thẻ a trong HTML và các thuộc tính của thẻ a thường dùng 
