Створення вашого першого компонента Vue.js

Vue.js — це компонентний фреймворк, що означає, що додатки створюються з використанням повторно використовуваних компонентів. Кожен компонент інкапсулює власний HTML, CSS і JavaScript. Ця стаття проведе вас через процес створення вашого першого компонента Vue.js з нуля.

Створення нового компонента Vue

Компоненти Vue.js зазвичай зберігаються у файлах .vue. Кожен файл компонента складається з трьох основних розділів: '<template>', '<script>' і '<style>'. Давайте створимо простий компонент під назвою Greeting.vue.

1. Перейдіть до папки проекту: Використовуйте термінал, щоб перейти до каталогу проекту Vue:

cd my-vue-project

2. Створіть новий файл компонента: У каталозі src/components створіть новий файл під назвою 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>

Цей компонент Greeting.vue містить:

• <template>: Визначає структуру HTML компонента.
• <script>: Містить логіку JavaScript для компонента, наприклад властивості та методи даних.
• <style>: Містить стилі CSS, призначені для цього компонента. Атрибут scoped гарантує, що стилі застосовуються лише до цього компонента.

Використання вашого компонента

Після створення компонента вам потрібно використовувати його у своїй програмі Vue. Відкрийте файл src/App.vue і змініть його, включивши компонент 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>

У цьому оновленому файлі App.vue:

• Імпортуйте компонент: Використовуйте import Greeting from './components/Greeting.vue';, щоб імпортувати компонент Greeting.
• Зареєструйте компонент: Додайте Greeting до об’єкта components у блоці export default.
• Використовуйте компонент: Вставте тег '<Greeting />' у розділ '<template>', щоб використовувати компонент у своїй програмі.

Тестування вашого компонента

Збережіть зміни та переконайтеся, що ваш сервер розробки працює. Відкрийте браузер і перейдіть до http://localhost:8080. Ви повинні побачити на сторінці вміст компонента Greeting.

Висновок

Ви успішно створили та використали свій перший компонент Vue.js. Компоненти є будівельними блоками додатків Vue.js, що дозволяє вам інкапсулювати різні частини вашого інтерфейсу користувача та керувати ними. Коли ви ближче познайомитеся з Vue.js, ви зможете досліджувати розширені функції, такі як атрибути компонентів, події та хуки життєвого циклу, щоб створювати більш інтерактивні та складніші програми.

Продовжуйте експериментувати з компонентами Vue.js і розширюйте свої знання, щоб створювати динамічні та цікаві веб-додатки.