Trong bài trước, chúng ta đã tạo project thành công.
Tiếp theo, chúng ta sẽ tìm hiểu về các thành phần cơ bản trong Vue.js.
Trong ví dụ sau, tôi sẽ sử project đã tạo trước đó làm demo.
Cấu trúc project mới được tạo:
Tạo file CreateUser.vue trong folder components. Với nội dung như dưới:
<template>
<div>
<p>{{title}}</p>
</div>
</template>
<script>
export default {
name: 'CreateUser',
data () {
return {
title: "Create User"
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>Note:
– Tag <template> dùng để định nghĩa HTML cho components. Lưu ý, trong tag <template> chỉ chứa 1 tag con duy nhất.
– Trong tag <script> sẽ định nghĩa data, method, event, … cho component.
Tại file router/index.js thêm source như sau:
Note:
– Import: là import components CreateUser.vue chúng ta vừa tạo ở trên.
– router: định nghĩa path trỏ đến component.
Thực hiện run server với lệnh: npm run dev
Test thử kết quả tại: http://localhost:8080/#/create-user
Tiếp theo, chúng ta tạo form đăng ký user:
Trong Vue.js, ta có thể sử dụng dấu {{}} để hiển thị data.
Hoặc sử dụng v-bind:attribute (kiểu ngắn gọn là :attribute) để bind data.
Các data sẽ reactivity(two-way binding), khi data trên control thay đổi thì giá trị trong component cũng thay đổi theo và ngược lại.
Trở lại browser bạn sẽ thấy:
Vậy là chúng ta đã tạo được component cơ bản và cách bind data trong Vue.js.
Other Vue.js Series
- Vue.js là gì? Nuxt.js là gì? Tạo và Run thử chúng như thế nào?
- Tìm hiểu về Component trong Vue.js
- Create first project Vue.js
