Введение
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 .