Мы собираемся создать наш первый компонент внутри Vue., выполнив упражнение 1.
Для начала установите vue и vite - https://v3.ru.vuejs.org/ru/guide/installation.html#cli
Рекомендуем устанавливать сразу Vite используя терминал.
Например - npm init vite@latest test1 --template vue
После этого выбрать Vue, затем javascript
Выполните следующие шаги:
1. После установки следуйте инструкциям - перейдите в папку созданного проекта и выполните npm install.
2. Запустите приложение с помощью следующей команды:
npm run dev
3. Перейдите по адресу который указан в терминале , у меня это http://localhost:5173/
4. Откройте файл src/App.vue, удалите все в этом файле и сохраните.
6. В вашем браузере все должно быть пустым, чтобы начать работу.
7. Также необходимо настроить Vite, чтобы не мучаться с импортированием компонентов, для этого откроем vite.config.js внутри проекта и изменим его содержимое:
import { fileURLToPath } from 'url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [
vue({
reactivityTransform: true,
}),
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url)),
},
},
})Данное изменение, необходимо для того, чтобы Vite понимал префикс @, в пути к компоненте, как ссылку на папку src, без данной настройки, vite не найдет ваши компоненты.
8. Тремя основными компонентами, составляющими однофайловый компонент - <template>,
блоки <script> и <style>. Добавьте следующие блоки кода в качестве каркаса для компонента:
<template>
</template>
<script>
export default {
}
</script>
<style>
</style>8. Создайте еще один файл в папке components с именем textComponent.vue и повторите
тот же шаг для создания предыдущего компонента Vue:
// src/components/textComponent.vue
<template>
</template>
<script>
export default {
}
</script>
<style>
</style>9. В нашем компоненте textComponent.vue создайте набор тегов <div> с тегом <h1> внутри <template>:
<template>
<div>
<h1>My first component!</h1>
</div>
</template>10. Внутри блока <style> добавьте стили следующим образом:
<style>
h1 {
font-family: 'Avenir', Helvetica, Arial,
sans-serif;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>11. Импортируйте наш компонент в App.vue, используя метод импорта ES6 и указав
компонент внутри объекта компонентов в блоке <script>. Теперь мы можем ссылаться на это
компонент внутри HTML, используя его имя в camelCase или kebab-case (оба варианта будут работать):
<template>
<textComponent />
</template>
<script>
import textComponent from '@/components/textComponent.vue'
export default {
components: {
Exercise,
}
}
</script>Обратите внимание - мы добавили в путь импортированного компонента @, которую настроили в vite.config, и теперь vite найдет созданный компонент.
Когда вы нажимаете Ctrl + S (или Cmd + S в macOS), https://localhost:3000
должен перезагрузиться и выглядеть потрясающе:
В этом упражнении мы увидели, как структурировать компоненты Vue. Мы также создали новый компонент и успешно его импортировали, и добавили его в поле component объекта vue.
В следующем разделе мы получим представление о том, как определить локальное состояние данных компонента с использованием свойств данных.
Изучение свойств данных как локального состояния
Один из наиболее часто используемых терминов и реактивных элементов, используемых при построении
Компоненты Vue — это свойства данных. Они добавляются в свойстве data() экземпляра Vue:
<script>
export default {
data() {
return {
color: 'red'
}
}
}
</script>Вы можете использовать функцию data() для создания локального объекта данных и по существу
хранить любую информацию, которую вы хотите использовать в своих шаблонах Vue. Это свойство привязано к компоненту, и мы называем его локальными данными состояния
компонента.
Когда какое-либо свойство этого локального объекта обновляется или изменяется, оно
будет реактивно обновляться в соответствующем шаблоне.
После того, как мы определили наши локальные данные, нам нужно привязать их к шаблону.
для отображения его значений в пользовательском интерфейсе, что называется интерполяцией данных.
Интерполяция — это вставка чего-то иного характера в что-то другое.
В контексте Vue мы используем двойные скобки - {{}} в HTML-шаблоне компонента.
Рассмотрим следующий пример:
<template>
<span> {{ color }}</span>
</template >
<script>
export default {
data() {
return {
color: 'red'
}
}
}
</script>Свойство данных color:red привязано к реактивным данным Vue.js и будет обновляться во время выполнения, в зависимости от изменений состояния между пользовательским интерфейсом и его данными.
На этом этапе мы должны рассмотреть, как определить и связать локальные данные классическим методом в vue.
С Vue 3.0 нам нравится более короткий и простой подход к написанию и импорту компонентов. Давайте рассмотрим это дальше.
Написание компонентов с composition API
Начиная с Vue 3.0, Vue представляет новый атрибут настройки синтаксического сахара для тега <script>. Этот атрибут позволяет вам писать код, используя
Composition API (о котором мы поговорим далее) в SFC и сократить объем кода, необходимого для написание простых компонентов.
Блок кода, находящийся в теге <script setup>, будет компилируется в функцию render() перед развертыванием в браузере, обеспечивая лучшую производительность во время выполнения. Чтобы начать использовать этот синтаксис, возьмем следующий пример кода:
// header.vue
<script>
import logo from 'components/logo.vue'
export default {
components: {
logo
}
}
</script>Затем мы заменяем <script> на <script setup> и удаляем весь код и блоки export default. Код примера теперь выглядит следующим образом:
// header.vue
<script setup>
import logo from 'components/logo.vue'
</script>В <template> мы используем логотип как обычно:
<template>
<header>
<a href="mywebsite.com">
<logo />
</a>
</header>
</template>Т.е мы можем использовать компонент сразу после его импорта, минуя добавление его в объект components. Наш предыдущий файл App.js написанный с использованием Composition API, будет выглядеть так:
<template>
<textComponent/>
</template>
<script setup>
import textComponent from '@/components/textComponent.vue'
</script> Чтобы определить и использовать локальные данные, вместо использования data() мы можем объявить обычные
переменные как локальные данные и функции как локальные методы для этого компонента напрямую.
Например, чтобы объявить и отобразить локальное свойство данных цвета, мы используем следующий код:
<script setup>
const color = 'red';
</script>
<template>
<div>{{color}}</div>
</template>Предыдущий код выводит тот же результат, что и в предыдущем примере раздел - red.
Но при таком подходе, наша переменная color будет статична, для того чтобы она была реактивна нужно указать vue, что данную переменную, необходимо сделать реактивной с помощью методов ref или reactive, это мы рассмотрим далее.
Как упоминалось в начале этого раздела, <script setup> является наиболее полезно, когда вам нужно использовать Composition API внутри SFC. Тем не менее, мы можем
всегда его использовать для простых компонентов.
С этого момента мы будем комбинировать оба подхода и использовать <script setup> как только возможно.
В следующем упражнении мы более подробно рассмотрим, как использовать интерполяция и данные.