Xây dựng thành phần Vue.js đầu tiên của bạn

Vue.js là một khuôn khổ dựa trên thành phần, nghĩa là các ứng dụng được xây dựng bằng các thành phần có thể tái sử dụng. Mỗi thành phần đóng gói HTML, CSS và JavaScript của riêng nó. Bài viết này sẽ hướng dẫn bạn qua quy trình xây dựng thành phần Vue.js đầu tiên của bạn từ đầu.

Tạo một thành phần Vue mới

Các thành phần Vue.js thường được lưu trữ trong các tệp .vue. Mỗi tệp thành phần bao gồm ba phần chính: '<template>', '<script>' và '<style>'. Hãy tạo một thành phần đơn giản có tên là Greeting.vue.

1. Điều hướng đến Thư mục Dự án của Bạn: Sử dụng terminal để di chuyển vào thư mục dự án Vue của bạn:

cd my-vue-project

2. Tạo tệp thành phần mới: Trong thư mục src/components, tạo tệp mới có tên Greeting.vue.

<template>
  <div>
    <h1>Hello, Vue.js!</h1>
    <p>Welcome to your first Vue component.</p>
  </div>
</template>

<script>
export default {
  name: 'Greeting'
};
</script>

<style scoped>
h1 {
  color: #42b983;
}
</style>

Thành phần Greeting.vue này chứa:

• <template>: Xác định cấu trúc HTML của thành phần.
• <script>: Chứa logic JavaScript cho thành phần, chẳng hạn như thuộc tính dữ liệu và phương thức.
• <style>: Chứa các kiểu CSS được giới hạn trong thành phần này. Thuộc tính scoped đảm bảo rằng các kiểu chỉ áp dụng cho thành phần này.

Sử dụng thành phần của bạn

Sau khi tạo thành phần, bạn cần sử dụng nó trong ứng dụng Vue của mình. Mở tệp src/App.vue và sửa đổi nó để bao gồm thành phần Greeting:

<template>
  <div id="app">
    <Greeting />
  </div>
</template>

<script>
import Greeting from './components/Greeting.vue';

export default {
  name: 'App',
  components: {
    Greeting
  }
};
</script>

<style>
#app {
  text-align: center;
  margin-top: 60px;
}
</style>

Trong tệp App.vue được cập nhật này:

• Nhập thành phần: Sử dụng lệnh import Greeting from './components/Greeting.vue'; để nhập thành phần Greeting.
• Đăng ký Thành phần: Thêm Lời chào vào đối tượng components trong khối export default.
• Sử dụng Thành phần: Chèn thẻ '<Greeting />' vào phần '<template>' để sử dụng thành phần trong ứng dụng của bạn.

Kiểm tra thành phần của bạn

Lưu các thay đổi của bạn và đảm bảo máy chủ phát triển của bạn đang chạy. Mở trình duyệt của bạn và điều hướng đến http://localhost:8080. Bạn sẽ thấy nội dung của thành phần Greeting được hiển thị trên trang.

Phần kết luận

Bạn đã tạo và sử dụng thành công thành phần Vue.js đầu tiên của mình. Các thành phần là các khối xây dựng của các ứng dụng Vue.js, cho phép bạn đóng gói và quản lý các phần khác nhau của giao diện người dùng. Khi bạn trở nên quen thuộc hơn với Vue.js, bạn có thể khám phá các tính năng nâng cao như props thành phần, sự kiện và móc vòng đời để xây dựng các ứng dụng tương tác và phức tạp hơn.

Tiếp tục thử nghiệm với các thành phần Vue.js và mở rộng kiến ​​thức của bạn để tạo ra các ứng dụng web năng động và hấp dẫn.