Vue.js для новичков: Компоненты и .vue файлы

Готовый код и домашнее задание доступны на сайте ссылка на сайт.

Подготовка файла App.vue

Очистим файл App.vue, оставив только необходимый код и изображение logo.gif. Удалим папку assets с изображениями.

Создание компонента Example.vue

Создадим файл Example.vue с таким содержимым:

<template>
  <div>
    <h1>Пробный текст</h1>
  </div>
</template>

Это простой компонент, выводящий заголовок h1.

Подключение компонента в main.js

Импортируем и регистрируем компонент глобально в main.js:

import Example from './Example.vue';

Vue.component('f-example', Example);

f-example — имя компонента (префикс f- используется для удобства). При глобальной регистрации передаётся .vue файл.

Использование компонента в App.vue

В App.vue используем компонент:

<template>
  <div id="app">
    <f-example />
  </div>
</template>

Компонент отобразится на странице без перезагрузки благодаря локальному серверу Vue CLI.

Компонент с интерактивным полем ввода (Field.vue)

Создадим Field.vue:

<template>
  <div>
    <input type="text" v-model="message">
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  }
};
</script>

Директива v-model связывает поле ввода с переменной message.

Использование компонента Field.vue в Example.vue

Импортируем и используем Field.vue в Example.vue:

import FieldInput from './Field.vue';
<template>
  <div>
    <h1>Пробный текст</h1>
    <FieldInput />
  </div>
</template>

<script>
export default {
  components: {
    'ftf-input': FieldInput
  }
};
</script>

Текстовое поле из Field.vue отобразится, значение будет динамически обновляться.

Урок показал создание и использование компонентов в Vue.js, работу с .vue файлами и глобальную/локальную регистрацию компонентов. Директива v-model позволяет создавать интерактивные элементы.

Что будем искать? Например,программа