Trong nhiều dự án Vue, các thành phần toàn cục ( global components) sẽ được xác định bằng cách sử dụng Vue.component, theo sau là new Vue({ el: '#container' }) để nhắm mục tiêu phần tử vùng chứa trong nội dung của mỗi trang.
Vì sao nên dùng Single File Components
Cách dùng ở trên có thể hoạt động rất tốt cho các dự án quy mô vừa và nhỏ, nơi JavaScript chỉ được sử dụng để nâng cao các chế độ xem nhất định. Tuy nhiên, trong các dự án phức tạp hơn hoặc khi giao diện người dùng của bạn hoàn toàn được điều khiển bởi JavaScript, những nhược điểm này trở nên rõ ràng:
- Các định nghĩa chung buộc phải là các tên duy nhất cho mọi thành phần
- Các chuỗi mẫu thiếu đánh dấu cú pháp và yêu cầu các dấu gạch chéo xấu cho HTML đa dòng
- Không hỗ trợ CSS có nghĩa là trong khi HTML và JavaScript được mô-đun hóa thành các thành phần, CSS bị loại bỏ rõ ràng
- Không có bước xây dựng nào hạn chế chúng ta đối với JavaScript HTML và ES5, thay vì các bộ xử lý trước như Pug (trước đây là Jade) và Babel
Tất cả những điều này đều được giải quyết bằng các single-file components (thành phần tệp đơn) có phần mở rộng .vue, có thể thực hiện được với các công cụ xây dựng như Webpack hoặc Browserify.
Dưới đây là ví dụ về tệp chúng tôi sẽ gọi là Hello.vue:
Bây giờ chúng ta nhận được:
- Đánh dấu cú pháp hoàn chỉnh
- CommonJS modules
- Component-scoped CSS
- Như đã hứa, chúng ta cũng có thể sử dụng các bộ xử lý trước như Pug, Babel (với mô-đun ES2015) và Stylus để có các thành phần sáng sửa hơn và giàu tính năng hơn.
Những ngôn ngữ cụ thể này chỉ là ví dụ. Bạn có thể dễ dàng sử dụng Bublé, TypeScript, SCSS, PostCSS - hoặc bất kỳ bộ tiền xử lý nào khác giúp bạn làm việc hiệu quả. Nếu sử dụng Webpack với vue-loader, nó cũng có hỗ trợ hạng nhất cho Mô-đun CSS.
Bên trong một thành phần, khuôn mẫu, logic và style của nó vốn đã được kết hợp với nhau, và việc sắp xếp chúng thực sự làm cho thành phần trở nên gắn kết và dễ bảo trì hơn.
Ngay cả khi bạn không thích ý tưởng về Thành phần tệp đơn, bạn vẫn có thể tận dụng các tính năng tải lại nóng và biên dịch trước của nó bằng cách tách JavaScript và CSS của bạn thành các tệp riêng biệt:
<!-- my-component.vue --> <template> <div>This will be pre-compiled</div> </template> <script src="./my-component.js"></script> <style src="./my-component.css"></style>
