Các thành phần tệp đơn của Vue.js

Tìm hiểu cách Vue giúp bạn tạo một tệp duy nhất chịu trách nhiệm cho mọi thứ liên quan đến một thành phần duy nhất, tập trung trách nhiệm về giao diện và hành vi

Một thành phần Vue có thể được khai báo trong một tệp JavaScript (.js) như thế này:

Vue.component('component-name', {
  /* options */
})

hoặc cũng có thể:

new Vue({
  /* options */
})

hoặc nó có thể được chỉ định trong một.vuetập tin.

Các.vuetệp khá tuyệt vì nó cho phép bạn xác định

  • Logic JavaScript
  • Mẫu mã HTML
  • Kiểu CSS

tất cả chỉ trong một tệp duy nhất và do đó, nó có tên làThành phần tệp đơn.

Đây là một ví dụ:

<template>
  <p>{{ hello }}</p>
</template>

<script> export default { data() { return { hello: ‘Hello World!’ } } } </script>

<style scoped> p { color: blue; } </style>

Tất cả những điều này có thể thực hiện được nhờ vào việc sử dụng webpack. Vue CLI thực hiện điều này rất dễ dàng và được hỗ trợ ngay lập tức..vueKhông thể sử dụng tệp nếu không có thiết lập gói web và do đó, chúng không phù hợp lắm với các ứng dụng chỉ sử dụng Vue trên một trang mà không phải là một ứng dụng toàn trang (SPA).

Vì các Thành phần Tệp Đơn dựa trên Webpack, chúng tôi có khả năng sử dụng các tính năng Web hiện đại miễn phí.

CSS của bạn có thể được xác định bằng SCSS hoặc Stylus, mẫu có thể được tạo bằng Pug và tất cả những gì bạn cần làm để điều này xảy ra là khai báo với Vue mà bạn sẽ sử dụng bộ tiền xử lý ngôn ngữ nào.

Danh sách các bộ tiền xử lý được hỗ trợ bao gồm

Chúng tôi có thể sử dụng JavaScript hiện đại (ES6-7-8) bất kể trình duyệt mục tiêu là gì, bằng cách sử dụng tích hợp Babel và mô-đun ES, vì vậy chúng tôi có thể sử dụngimport/exportcác câu lệnh.

Chúng ta có thể sử dụng Mô-đun CSS để phân bổ CSS của mình.

Nói về CSS xác định phạm vi, Các thành phần tệp đơn giúp bạn viết CSS hoàn toàn dễ dàng mà khôngrò rỉcho các thành phần khác, bằng cách sử dụng<style scoped>các thẻ.

Nếu bạn bỏ quascoped, CSS bạn xác định sẽ là toàn cầu. Nhưng thêm vào đó, Vue tự động thêm một lớp cụ thể vào thành phần, duy nhất cho ứng dụng của bạn, vì vậy CSS được đảm bảo không bị rò rỉ ra các thành phần khác.

Có thể JavaScript của bạn rất lớn vì một số logic bạn cần quan tâm. Điều gì xảy ra nếu bạn muốn sử dụng một tệp riêng cho JavaScript của mình?

Bạn có thể dùngsrcthuộc tính để ngoại hóa nó:

<template>
  <p>{{ hello }}</p>
</template>
<script src="./hello.js"></script>

Điều này cũng hoạt động cho CSS của bạn:

<template>
  <p>{{ hello }}</p>
</template>
<script src="./hello.js"></script>
<style src="./hello.css"></style>

Chú ý cách tôi đã sử dụng

export default {
  data() {
    return {
      hello: 'Hello World!'
    }
  }
}

trong JavaScript của thành phần để thiết lập dữ liệu.

Những cách phổ biến khác mà bạn sẽ thấy là

export default {
  data: function() {
    return {
      name: 'Flavio'
    }
  }
}

(ở trên tương đương với những gì chúng tôi đã làm trước đây)

hoặc là:

export default {
  data: () => {
    return {
      name: 'Flavio'
    }
  }
}

điều này khác bởi vì nó sử dụng một hàm mũi tên. Các hàm mũi tên vẫn ổn cho đến khi chúng ta cần truy cập vào một phương thức thành phần, vì chúng ta cần sử dụngthisvà thuộc tính đó không bị ràng buộc với thành phần bằng cách sử dụng các hàm mũi tên. Vì vậy, bắt buộc phải sử dụngđều đặnchứ không phải là các hàm mũi tên.

Bạn cũng có thể thấy

module.exports = {
  data: () => {
    return {
      name: 'Flavio'
    }
  }
}

điều này đang sử dụng cú pháp CommonJS và cũng hoạt động, mặc dù bạn nên sử dụng cú pháp Mô-đun ES, vì đó là một tiêu chuẩn JavaScript.

Tải xuống miễn phí của tôiSổ tay Vue


Các hướng dẫn vue khác: