Готовый код и домашнее задание доступны на сайте ссылка на сайт.
Подготовка файла 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 позволяет создавать интерактивные элементы.