Создание вашего первого компонента 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.
• Зарегистрируйте компонент: Добавьте Приветствие к объекту components в блоке export default.
• Используйте компонент: Вставьте тег '<Greeting />' в раздел '<template>', чтобы использовать компонент в своем приложении.

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

Сохраните изменения и убедитесь, что ваш сервер разработки запущен. Откройте браузер и перейдите по адресу http://localhost:8080. Вы должны увидеть содержимое компонента Greeting, отображенного на странице.

Заключение

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

Продолжайте экспериментировать с компонентами Vue.js и расширяйте свои знания, чтобы создавать динамичные и привлекательные веб-приложения.