VUE это...
VUE - это JavaScript фреймворк для создания пользовательских интерфейсов, предоставляющий декларативную и компонентную модель программирования.
! ЗАПОМИНАЕМ !
Фреймворк - (от англ. "framework") — это готовая (программная) основа, набор инструментов, правил и библиотек используемых для быстрого создания приложений. Задает базовую структуру всего проекта, позволяет не писать код с нуля, а наполнять «скелет» функционалом.
Модели программирования:
- Императивная - пишем пошаговые инструкции «сами»;
- Декларативная - указываем описание необходимого результата, а фреймворк решает как реализовать (противоположность императивной модели);
- Компонентная - описание независимых «кубиков», переиспользуемых, изолированных частей (компонентов), каждый из которых имеет свою внутреннюю логику и может быть использован повторно.
Согласно официальному сайту VUE, VUE - это целая экосистема, которая заточена на комфортную фронтенд разработку. Он спроектирован как гибкий и адаптируемый инструмент, позволяющий:
- модифицировать статический HTML (без добавления этапа сборки);
- встраивать код в качестве веб-компонентов;
- создавать SPA приложения (одностраничные).
VUE отслеживает изменения в JavaScript и реактивно вносит изменения в DOM приложения (обновляет его).
Если предполагается использование VUE с шагом сборки, рекомендуют создавать и использовать однофайловые компоненты.
Стили API (создание компонентов)
Согласно официальному сайту (опять же), компоненты VUE можно создавать с использованием двух различных стилей:
- Options API;
- Composition API.
Options API
При использовании этого стиля, логика компонентов определяется с помощью объекта опций, таких как data, methods и mounted. Все свойства, определённые в опциях, будут доступны через this внутри функций (указывают на экземпляр компонента):
<script>
export default {
data() {
return {
count: 0,
}
},
methods: {
chngCount() {
this.count++;
}
},
mounted() {
console.log(`Start value:: ${this.count}.`);
}
}
</script>
<template>
<button @click="chngCount">Count value:: {{ count }}</button>
</template>
Composition API
При написании кода в этом стиле, определяется логика компонента с использованием импортированных функций (обычно используется с синтаксисом <script setup>). setup — команда компилятору для выполнения специальных преобразований на этапе компиляции. Сокращает количество кода. Пример (взят с оф. сайта):
<script setup>
import { ref, onMounted } from 'vue'
const count = ref(0)
// функции которые мутируют состояние и вызывают обновления
function increment() {
count.value++;
}
// хуки жизненного цикла
onMounted(() => {
console.log(`Стартовое значение счётчика — ${count.value}.`);
})
</script>
<template>
<button @click="increment">Счётчик: {{ count }}</button>
</template>
Для разработки выбираем тот стиль, который более понятен и удобен.
Так-как это фреймворк JavaScript - весь функционал языка, соответственно, нам доступен.
— Бесплатные Сайты и CRM.