Single File Components (SFC) trong Vue.js

Vue.js sử dụng Single File Components (SFC) để giúp quản lý mã nguồn dễ dàng hơn bằng cách tổ chức HTML, JavaScript và CSS trong cùng một tệp .vue. Đây là cách phổ biến nhất để xây dựng ứng dụng Vue hiện đại.

Mục tiêu bài học:

• Hiểu cấu trúc của một Single File Component (.vue).
• Cách sử dụng <template>, <script>, <style> trong SFC.
• Tổ chức thư mục khi làm việc với SFC.
• Thực hành: Xây dựng ứng dụng có nhiều Component bằng Vue CLI hoặc Vite.

Single File Components (SFC)

1. Cấu trúc của một Single File Component (.vue)

Một tệp .vue chứa ba phần chính:

<template>
  <!-- HTML của Component -->
</template>

<script>
export default {
  // JavaScript logic của Component
};
</script>

<style>
/* CSS của Component */
</style>

Ví dụ về một Component UserCard.vue:

<template>
  <div class="user-card">
    <h2>{{ name }}</h2>
    <p>Email: {{ email }}</p>
  </div>
</template>

<script>
export default {
  props: ["name", "email"]
};
</script>

<style>
.user-card {
  border: 1px solid #ddd;
  padding: 10px;
  border-radius: 5px;
}
</style>

Lợi ích của SFC:

• Dễ quản lý: Mọi thứ liên quan đến Component nằm trong cùng một tệp.
• Tái sử dụng cao: Dễ dàng import vào các Component khác.
• Hỗ trợ scoped styles: Chỉ ảnh hưởng đến Component hiện tại.

2. Cách sử dụng <template>, <script>, <style> trong SFC

a). <template> – Khai báo giao diện HTML

Chỉ có một thẻ <template> trong một Component.
Ví dụ:

<template>
  <div>
    <h1>Xin chào, {{ username }}!</h1>
  </div>
</template>

b). <script> – Chứa logic JavaScript

Có thể sử dụng Composition API hoặc Options API.

Cách dùng với Options API:

<script>
export default {
  data() {
    return {
      username: "Nguyễn Văn A"
    };
  }
};
</script>

Cách dùng với Composition API (Vue 3):

<script setup>
import { ref } from "vue";

const username = ref("Nguyễn Văn A");
</script>

c). <style> – Chứa CSS của Component

<style>
h1 {
  color: blue;
}
</style>

Sử dụng Scoped Styles (Chỉ ảnh hưởng đến Component hiện tại):

<style scoped>
h1 {
  color: red;
}
</style>

3. Cấu trúc thư mục khi làm việc với SFC

Một dự án Vue thường có cấu trúc như sau:

/src
  /components
    Header.vue
    Footer.vue
    UserCard.vue
  /views
    Home.vue
    About.vue
  App.vue
  main.js

Giải thích:

• /components: Chứa các Component tái sử dụng.
• /views: Chứa các trang chính của ứng dụng.
• App.vue: Component gốc của ứng dụng.
• main.js: Điểm khởi đầu của ứng dụng.

Thực hành: Xây dựng ứng dụng Vue với nhiều Component

Yêu cầu:

• Sử dụng Vue CLI hoặc Vite để khởi tạo dự án.
• Tạo UserCard.vue để hiển thị thông tin người dùng.
• Dùng App.vue để hiển thị danh sách người dùng.

Bước 1: Khởi tạo dự án Vue bằng Vite

Mở terminal và chạy:

npm create vite@latest my-vue-app --template vue
cd my-vue-app
npm install
npm run dev

Bước 2: Tạo Component UserCard.vue

File UserCard.vue

<template>
  <div class="user-card">
    <h2>{{ name }}</h2>
    <p>Email: {{ email }}</p>
  </div>
</template>

<script>
export default {
  props: ["name", "email"]
};
</script>

<style scoped>
.user-card {
  border: 1px solid #ddd;
  padding: 10px;
  border-radius: 5px;
  margin: 10px;
}
</style>

Bước 3: Sử dụng Component trong App.vue

File App.vue

<template>
  <div>
    <h1>Danh sách người dùng</h1>
    <UserCard v-for="user in users" :key="user.email" :name="user.name" :email="user.email" />
  </div>
</template>

<script>
import UserCard from "./components/UserCard.vue";

export default {
  components: {
    UserCard
  },
  data() {
    return {
      users: [
        { name: "Nguyễn Văn A", email: "a@gmail.com" },
        { name: "Trần Thị B", email: "b@gmail.com" }
      ]
    };
  }
};
</script>

<style>
h1 {
  text-align: center;
}
</style>

Bước 4: Chạy ứng dụng

npm run dev

• Kết quả hiển thị danh sách người dùng với Component UserCard.vue.

Kết luận

Tóm tắt kiến thức quan trọng:

• Single File Component (SFC) giúp tổ chức HTML, JavaScript, CSS trong cùng một tệp .vue.
• Cấu trúc SFC gồm <template>, <script>, <style>.
• Scoped styles giúp CSS chỉ ảnh hưởng đến Component hiện tại.
• Cấu trúc thư mục hợp lý giúp quản lý dự án Vue dễ dàng hơn.
• Thực hành: Xây dựng ứng dụng với nhiều Component bằng Vue CLI/Vite.