VueJS: Views

Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
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).

lược đồ-khung nhìn

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.htmltệ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.vuetệ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 layoutsthư mục sẽ tạo bố cục tùy chỉnh có thể truy cập bằng thuộc layouttí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 layoutsthư 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 ( 404500, 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.vuetệ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ưasyncDataphươ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 layoutsthư 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 loadingcũ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 hidthay vì vmidkhó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 headtí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 .

» Tiếp: Bất đồng bộ dữ liệu
« Trước: Định tuyến
Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực
Copied !!!