Введение

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

Что такое Вью 3?

Vue 3 основан на успехе своего предшественника, Vue 2, и содержит несколько значительных улучшений. Вот некоторые ключевые особенности Vue 3:

  • Composition API: Vue 3 представляет Composition API, мощный способ организации и повторного использования логики внутри компонентов. Он предлагает большую гибкость и улучшает организацию кода по сравнению с API параметров в Vue 2.
  • Система реактивности: система реактивности Vue 3 была улучшена, чтобы обеспечить лучшую производительность и поддержку TypeScript. Новая система на основе прокси обеспечивает детальное отслеживание зависимостей, что приводит к более эффективным обновлениям.
  • Фрагменты и телепорт: Vue 3 представляет фрагменты, позволяющие компонентам возвращать несколько корневых элементов. Телепорт, еще одна новая функция, позволяет отображать содержимое в разных частях дерева DOM, что делает его полезным для модальных окон, всплывающих подсказок и многого другого.

Настройка проекта Vue 3

Чтобы запустить проект Vue 3, вы можете использовать Vue CLI, инструмент командной строки, специально разработанный для проектов Vue. Вот как вы можете настроить проект Vue 3 с помощью Vue CLI.

  • Установите Vue CLI глобально, запустив npm install -g @vue/cli.
  • Создайте новый проект Vue 3, выполнив vue create project-name.
  • Выберите предустановку по умолчанию или вручную выберите функции в соответствии с требованиями вашего проекта.
  • После создания проекта перейдите в каталог проекта с помощью cd project-name.
  • Запустите сервер разработки с помощью npm run serve и получите доступ к проекту по указанному локальному URL-адресу.

Также вы можете настроить свои проекты с помощью Vite, нового инструмента сборки в экосистеме Vue, который имеет значительно более быстрый сервер разработки, чем Vue CLI (в 10–100 раз быстрее).

Предпосылки:

  • Убедитесь, что на вашем компьютере установлен Node.js. Скачать его можно с официального сайта: https://nodejs.org

Эта команда установит и выполнит create-vue, официальный инструмент создания шаблонов проекта Vue. Вам будут представлены подсказки для нескольких дополнительных функций, таких как TypeScript и поддержка тестирования:

✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add an End-to-End Testing Solution? … No / Cypress / Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

Scaffolding project in ./<your-project-name>...
Done.

Если вы не уверены в выборе, просто выберите No, нажав Enter. После создания проекта следуйте инструкциям по установке зависимостей и запуску сервера разработки:

> cd <your-project-name>
> npm install
> npm run dev
  • Vite создаст ваш проект Vue 3 и запустит сервер разработки.
  • Вы можете получить доступ к своему приложению Vue по предоставленному локальному URL-адресу (например, http://localhost:3000).

Вот и все! Теперь у вас есть проект Vue 3, настроенный с помощью Vite. Вы можете начать создавать свои компоненты Vue и писать логику приложения в каталоге src.

Создание вашего первого компонента Vue

Компоненты образуют строительные блоки приложений Vue. В Vue 3 вы можете использовать Composition API для создания повторно используемых и компонуемых компонентов. Вот как создать свой первый компонент Vue 3:

  • В каталоге проекта перейдите в папку src/components.
  • Создайте новый файл с именем MyComponent.vue.
  • Откройте файл и определите шаблон, сценарий и стили для компонента, используя формат компонента с одним файлом.
  • Внутри раздела сценария импортируйте необходимые функции из пакета vue, такие как defineComponent и reactive.
  • Используйте функцию defineComponent, чтобы создать новый компонент и определить его шаблон, свойства реактивных данных и методы с помощью Composition API.
<script setup>
import { ref } from 'vue'

const count = ref(0)
</script>

<template>
  <button @click="count++">You clicked me {{ count }} times.</button>
</template>

Это простой компонент кнопки с состоянием счетчика. Вы также можете найти этот пример в документации Vue.

Директивы Vue 3

Директивы в Vue 3 аналогичны директивам в Vue 2, что позволяет вам манипулировать DOM и добавлять динамическое поведение к вашим компонентам. Некоторые часто используемые директивы в Vue 3 включают:

  • v-bind: Директива v-bind позволяет привязывать данные компонента к атрибутам или свойствам HTML, динамически обновляя значения на основе изменений в данных.
  • v-if и v-show: эти директивы управляют видимостью элементов в зависимости от условий. Директива v-if удаляет или добавляет элементы в DOM, а директива v-show переключает видимость элемента с помощью стилей CSS.
  • v-for: директива v-for позволяет перебирать массивы или объекты в цикле для динамического отображения списков элементов. Он генерирует несколько экземпляров элемента на основе предоставленных данных.
  • v-on: директива v-on прикрепляет прослушиватели событий к элементам и запускает методы или выражения при возникновении событий. Это позволяет вам обрабатывать взаимодействия с пользователем и реагировать соответствующим образом.
  • v-model: директива v-model упрощает двустороннюю привязку данных для входных данных формы, автоматически синхронизируя входное значение со свойством данных компонента.

Управление данными с помощью Vue

  • ref — принимает внутреннее значение и возвращает реактивный и изменяемый объект ссылки, который имеет единственное свойство .value, указывающее на внутреннее значение. См. пример выше.
  • В Vue 3 вы можете использовать функцию reactive из пакета vue для определения реактивных объектов данных. Эти объекты автоматически запускают обновления в пользовательском интерфейсе при изменении их свойств.
  • Вычисляемые свойства. Вычисляемые свойства — это функции, которые вычисляют и кэшируют значения на основе реактивных зависимостей. Они позволяют выполнять вычисления или преобразования данных и обеспечивать эффективные результаты.
  • Наблюдатели: Наблюдатели позволяют выполнять действия при изменении определенных свойств данных. Используя функцию watch из пакета vue, вы можете определить пользовательскую логику, которая будет запускаться при изменении отслеживаемых данных.

Заключение

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

Помните, что практика и эксперименты являются ключом к освоению любой технологии, поэтому продолжайте создавать и исследовать захватывающие возможности Vue!

Дополнительные материалы на PlainEnglish.io.

Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .