Thiết kế Vue.js component file riêng biệt, kiến trúc cho hệ thống lớn
NỘI DUNG BÀI VIẾT
Vue.js là một trong những framework có mức độ phát triển nhanh nhất hiện nay, nhưng có nhiều lập trình viên bỏ qua Vue.js vì javascript framework đã có quá nhiều và thật sự đứng giữa một rừng cây, thật khó để thay đổi khi đã trót chọn một cây để làm nhà. Tuy nhiên, khi biết đến khái niệm component trên file riêng biệt, mọi suy nghĩ đã thay đổi, một sự chuyển đổi từ các framework khác sang Vue.js là tất yếu. Vậy single file component là gì? chúng ta cùng tìm hiểu xem tại sao nó làm nên một cuộc cách mạng.
Vue.js component trên file riêng là gì?
Trong các dự án có sử dụng Vue.js, một component toàn cục được khai báo sử dụng câu lệnh:
Vue.component('component_name',{
props:
template:
});Code language: JavaScript (javascript)Xem thêm Vue.js component module hóa trong xây dựng hệ thống để có những kiến thức cơ bản cho việc đưa các component vào các file riêng biệt. Với cách thiết kế các Vue.js component như cũ, mọi thứ ổn, tuy nhiên nó chỉ phù hợp với các dự án vừa và nhỏ, nơi mà chỉ dùng Javascript để tăng cường trải nghiệm về giao diện. Trong các dự án lớn, việc sử dụng Javascript ở fontend để điều tiết các thành phần, có những nhược điểm như sau:
- Bắt buộc phải đặt tên duy nhất cho từng component do file js được đặt ở toàn cục, các dự án lớn hàng trăm nghìn component thì việc này là không thể, đặc biệt khi làm việc theo các team khác nhau.
- Các thành phần template trong component không được style mà chỉ đơn thuần là mã HTML.
- Không có CSS trong component, tức là chỉ module hóa được thành phần HTML và Javascript.
Tất cả các vấn đề trên được Vue.js xử lý bằng single file component hay các component được thiết kế trên file riêng biệt với phần mở rộng là .vue và dễ dàng kết hợp với các công cụ như Webpack hay Browserify. Sau đây là một ví dụ về component trên file Hello.vue:
<template>
<div class="example">{{ msg }}</div>
</template>
<script>
export default {
data () {
return {
msg: 'Hello world!'
}
}
}
</script>
<style>
.example {
font-weight: bold;
}
</style>Code language: HTML, XML (xml)Trông qua nó có vẻ giống như một file HTML với ba thẻ được định nghĩa là <template>, <script> và <style>. Nếu bạn không muốn làm việc với mã HTML thuần túy cũ kỹ, bạn có thể thêm vào các thuộc tính lang để xác định ngôn ngữ (sau đó dùng webpack, browserify xử lý) do đó bạn hoàn toàn có thể sử dụng Pug, Stylus như sau:
<template lang="pug">
.example {{ msg }}
</template>
<script>
import OtherComponent from './OtherComponent.vue'
export default {
data () {
return {
msg: 'Hello world!'
}
}
}
</script>
<style lang="stylus">
.example
font-weight: bold
</style>Code language: HTML, XML (xml)Xác định phạm vi CSS trong single file component
Một trong những lợi ích lớn nhất của việc module hóa CSS là xác định phạm vi CSS ảnh hưởng bằng cách thay đổi tên các class trong quá trình biên dịch và kết hợp các file. Nếu đoạn CSS trong component chỉ muốn ảnh hưởng trong đó bạn cần thêm thuộc tính scoped trong thẻ <style>.
<template>
<div class="my_component">Hello</div>
</template>
<style scoped>
.my_component {
color: purple; // because it's the best color ever
}
</style>Code language: HTML, XML (xml)và nó sẽ được chuyển đổi theo kiểu cách như sau:
<template>
<div class="my_component" data-v-34tn3g9j2q3>Hello</div>
</template>
<style scoped>
.my_component[data-v-34tn3g9j2q3] {
color: purple; // because it's the best color ever
}
</style>Code language: HTML, XML (xml)Với cách thức này, scoped sẽ xác định được chính xác ID của thành phần mà CSS sẽ ảnh hưởng đến.
Cảm ơn các bạn đã đọc.
Các bạn có thể tham khảo các bài viết hay về Laravel tại đây.
Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.
Nguồn tham khảo: Allaravel
Leave a Reply