VueJS: Views
Giải phóng thời gian, khai phóng năng lực
Phần Chế độ xem mô tả tất cả những gì bạn cần để định cấu hình dữ liệu và chế độ xem cho một route cụ thể trong Ứng dụng Nuxt.js của bạn (Mẫu ứng dụng, Bố cục, Trang và HTML Head).
Mẫu ứng dụng
Bạn có thể tùy chỉnh mẫu ứng dụng HTML được sử dụng bởi Nuxt.js để bao gồm các tập lệnh hoặc các lớp CSS có điều kiện.
Để thay đổi mẫu, tạo một app.html
tệp trong thư mục gốc của dự án của bạn.
Mẫu mặc định được sử dụng bởi Nuxt.js là:
<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
<head>
{{ HEAD }}
</head>
<body {{ BODY_ATTRS }}>
{{ APP }}
</body>
</html>
Một trường hợp sử dụng sử dụng mẫu ứng dụng tùy chỉnh là thêm các lớp CSS có điều kiện cho IE:
<!DOCTYPE html>
<!--[if IE 9]><html lang="en-US" class="lt-ie9 ie9" {{ HTML_ATTRS }}><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html {{ HTML_ATTRS }}><!--<![endif]-->
<head>
{{ HEAD }}
</head>
<body {{ BODY_ATTRS }}>
{{ APP }}
</body>
</html>
Layouts
Bố cục là một trợ giúp tuyệt vời khi bạn muốn thay đổi giao diện của ứng dụng Nuxt.js của bạn. Cho dù bạn muốn bao gồm một thanh bên hoặc có bố cục riêng cho thiết bị di động và máy tính để bàn
Bố cục mặc định
Bạn có thể mở rộng bố cục chính bằng cách thêm một layouts/default.vue
tệp. Nó sẽ được sử dụng cho tất cả các trang không có bố cục được chỉ định.
Thông tin: Đảm bảo thêm <nuxt/>
thành phần khi tạo bố cục để thực sự bao gồm thành phần trang.
Bố cục mặc định đi ra khỏi hộp chỉ dài ba dòng và chỉ hiển thị thành phần trang:
<template>
<nuxt/>
</template>
Bố cục tùy chỉnh
Mỗi tệp ( cấp cao nhất ) trong layouts
thư mục sẽ tạo bố cục tùy chỉnh có thể truy cập bằng thuộc layout
tính trong các thành phần trang.
Giả sử chúng tôi muốn tạo bố cục blog và lưu nó vào layouts/blog.vue
:
<template>
<div>
<div>My blog navigation bar here</div>
<nuxt/>
</div>
</template>
Sau đó, chúng tôi phải nói với các trang (tức là pages/posts.vue
) sử dụng bố cục tùy chỉnh của bạn:
<template>
<!-- Your template -->
</template>
<script>
export default {
layout: 'blog'
// page component definitions
}
</script>
Thông tin thêm về layouttài sản: Trang APIlayout
Kiểm tra video trình diễn để xem bố trí tùy chỉnh trong hành động.
Trang lỗi
Trang lỗi là một thành phần trang luôn được hiển thị khi xảy ra lỗi (điều đó không xảy ra trong khi kết xuất phía máy chủ).
Cảnh báo: Mặc dù tệp này được đặt trong layouts
thư mục, nhưng nó nên được coi là một trang.
Như đã đề cập ở trên, bố cục này là đặc biệt, vì bạn không nên bao gồm <nuxt/>
bên trong mẫu của nó. Bạn phải xem cách bố trí này như một thành phần hiển thị khi xảy ra lỗi ( 404
, 500
, vv). Tương tự như các thành phần trang khác, bạn cũng có thể đặt bố cục tùy chỉnh cho trang lỗi theo cách thông thường.
Mã nguồn trang lỗi mặc định có sẵn trên GitHub .
Bạn có thể tùy chỉnh trang lỗi bằng cách thêm layouts/error.vue
tệp:
<template>
<div class="container">
<h1 v-if="error.statusCode === 404">Page not found</h1>
<h1 v-else>An error occurred</h1>
<nuxt-link to="/">Home page</nuxt-link>
</div>
</template>
<script>
export default {
props: ['error'],
layout: 'blog' // you can set a custom layout for the error page
}
</script>
Trang
Mỗi thành phần Trang là một thành phần Vue nhưng Nuxt.js thêm các thuộc tính và chức năng đặc biệt để làm cho việc phát triển ứng dụng phổ quát của bạn dễ dàng nhất có thể.
<template>
<h1 class="red">Hello {{ name }}!</h1>
</template>
<script>
export default {
asyncData (context) {
// called every time before loading the component
// as the name said, it can be async
// Also, the returned object will be merged with your data object
return { name: 'World' }
},
fetch () {
// The `fetch` method is used to fill the store before rendering the page
},
head () {
// Set Meta Tags for this Page
},
// and more functionality to discover
...
}
</script>
<style>
.red {
color: red;
}
</style>
THUỘC TÍNH | SỰ MIÊU TẢ | TÀI LIỆU |
---|---|---|
asyncData |
Chìa khóa quan trọng nhất. Nó có thể không đồng bộ và nhận bối cảnh làm đối số. | Hướng dẫn: Dữ liệu không đồng bộ |
fetch |
Được sử dụng để điền vào cửa hàng trước khi kết xuất trang. Nó giống nhưasyncData phương thức, ngoại trừ nó không đặt dữ liệu thành phần. |
Trang API fetch |
head |
Đặt <meta> thẻ cụ thể cho trang hiện tại. |
Trang API head |
layout |
Chỉ định một bố cục được xác định trong layouts thư mục. |
Trang API layout |
loading |
Nếu được đặt thành false , ngăn một trang tự động gọithis.$nuxt.$loading.finish() khi bạn nhập nó vàthis.$nuxt.$loading.start() khi bạn rời khỏi nó, cho phép bạn điều khiển hành vitheo cách thủ công , như ví dụ này hiển thị. Chỉ áp dụng nếu loading cũng được đặt trong nuxt.config.js . |
Cấu hình API loading |
transition |
Xác định một chuyển tiếp cụ thể cho trang. | Trang API transition |
scrollToTop |
Boolean (mặc định false :). Chỉ định nếu bạn muốn trang cuộn lên trên cùng trước khi hiển thị trang. Nó được sử dụng cho các tuyến đường lồng nhau . |
Trang API scrollToTop |
validate |
Chức năng xác nhận cho các tuyến động . | Trang API validate |
middleware |
Xác định phần mềm trung gian cho trang này. Phần mềm trung gian sẽ được gọi trước khi kết xuất trang. | Hướng dẫn: phần mềm trung gian |
Thông tin thêm về việc sử dụng thuộc tính trang: Trang API
Đầu HTML
Nuxt.js sử dụng vue-meta để cập nhật document headvà meta attributesứng dụng của bạn.
Việc vue-metasử dụng Nuxt.js có thể được tìm thấy trên GitHub
Thông tin: Nuxt.js sử dụng hid
thay vì vmid
khóa mặc định để xác định các thành phần meta
Thẻ Meta mặc định
Nuxt.js cho phép bạn xác định tất cả <meta>
các thẻ mặc định cho ứng dụng của bạn bên trong nuxt.config.js
. Xác định chúng bằng cùng một thuộc head
tính:
Ví dụ về chế độ xem tùy chỉnh với phông chữ Google tùy chỉnh:
head: {
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' }
],
link: [
{ rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto' }
]
}
Để tìm hiểu thêm về các tùy chọn có sẵn head, hãy xem tài liệu vue-meta .
Thông tin thêm về headphương pháp có sẵn trên trang Cấu hình APIhead .
Thẻ Meta tùy chỉnh cho một trang
Thông tin thêm về phương pháp đầu có thể được tìm thấy trên trang Trang APIhead .
Giải phóng thời gian, khai phóng năng lực