Vue.js для сомневающихся. все, что нужно знать

Создание проекта Vue

С помощью Vue CLI вы можете создать новое приложение, выполнив следующую команду:

vue create example-vue-project

example-vue-project – это название проекта. Вы можете изменить его.

Затем нужно выбрать вариант установки проекта. Вариант по умолчанию установит два плагина: Babel и ESLint. Также вы можете вручную выбрать расширения, необходимые для вашего проекта из набора плагинов:

• Babel.
• TypeScript.
• Progressive Web App support.
• Vue Router.
• Vuex (библиотека для управления состоянием Vue);
• Препроцессоры CSS (PostCSS, CSS modules, Sass, Less, Stylus).
• Модуль юнит-тестов Mocha или Jest.
• Модуль E2E-тестов Cypress или Nightwatch.

Теперь рассмотрим другие варианты обслуживания проекта, доступные в Vue CLI. Для этого перейдите в папку проекта:

cd example-vue-project

Затем выполните следующую команду:

npm run serve

Она запустит локальный сервер разработки по адресу http://localhost:8080. Если вы перейдёте по этому адресу в своём браузере, то увидите следующую страницу:

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

И когда вы закончите разработку своего проекта, то можете использовать следующую команду для создания сборки:

npm run build

Эта команда сохранит собранный код в папку dist проекта. Об этой процедуре вы можете прочитать здесь.

Что такое служба CLI Vue?

Служба Vue CLI – это зависимость (@vue/cli-service), которая предоставляет конфигурации по умолчанию. Служба может быть обновлена, настроена и расширена с помощью плагинов. Она предоставляет несколько скриптов для работы с Vue-проектами. Например, serve, build и inspect.

Мы уже видели сценарии serve и build в действии. Скрипт inspect позволяет проверить конфигурацию веб-пакета в проекте с помощью vue-cli-service. Попробуйте выполнить его:

vue inspect

Анатомия проекта

Проект Vue, созданный с помощью CLI, имеет предопределенную структуру. Если вы решите установить дополнительные плагины (например, маршрутизатор Vue), CLI также создаст файлы, необходимые для использования и настройки этих библиотек.

Файлы и папки в проекте Vue:

• public – папка содержит общедоступные файлы, такие как html и favicon.ico. Размещенные здесь статические ресурсы будут скопированы и не упакованы в веб-пакет.
• src – папка содержит исходные файлы проекта.
• src/assets – папка содержит ресурсы проекта, такие как png.
• src/components – папка содержит компоненты Vue.
• src/App.vue – основной компонент Vue-проекта.
• src/main.js – основной файл проекта, который загружает Vue-приложение.
• config.js – файл конфигурации для Babel.
• json – файл содержит список зависимостей проекта, а также параметры конфигурации для ESLint, PostCSS и поддерживаемых браузеров.
• node_modules– папка содержит установленные пакеты npm.

Следующий скриншот отображает структуру проекта:

4.1 Почему я не могу использовать класс, основанный на декораторе @Component для функциональных компонентов?

Снова возвращаясь к классам, следует отметить, что классы представляют собой структуры данных для хранения локального состояния. Если функциональные компоненты не имеют состояния, то нет никакого смысла в использовании декоратора @Component.

Соответствующее обсуждение имеется по адресу:

4.2 Внешние классы не применяются к функциональным компонентам

Функциональные компоненты не имеют привязки к классу и стилю, как обычные компоненты. Нужно вручную применять эти привязки внутри функции отрисовки.

4.3 Функциональные компоненты всегда повторно отрисовываются?

Функциональные компоненты — нетерпеливы, что означает, что функция отрисовки вызывается напрямую. Это также означает, что вы должны:

Избегать использования компонента с состоянием непосредственно внутри в функции отрисовки, потому что это создаст различное определение компонента при каждом вызове функции отрисовки.

Функциональный компонент лучше использовать, если они являются листовыми компонентами (leaf components).

4.4 Как сгенерировать событие из функционального компонента?

Генерация события из функционального компонента не очевидна. К сожалению, об этом не написано в документации. Метод недоступен в функциональном компоненте. Следующий вопрос на Stack Overflow может помочь.

Что такое фреймворк

Фреймворк (framework) можно рассматривать как некий каркас для создания приложений на определенном языке программирования. Он включает в себя набор библиотек, которые позволяют значительно упростить и убыстрить разработку приложений. Также цель фреймворка – это предоставление такой среды разработки, которая позволит дорабатывать и расширять функционал проекта.

Наглядно отличие фреймворка от библиотеки можно объяснить вот так:

Фреймворк использует определенную архитектуру приложения для того, чтобы проект был разделен на логические части, модули. Например, схема разделения Model-View-Controller (MVC) подразумевает разделение на три сегмента: модель, представление и контроллер, каждый из которых можно изменять независимо от других.

Если говорить более упрощенно, то существует множество типовых задач, которые приходится решать разработчикам – и поэтому часто используются библиотеки. Использование фреймворка позволяет избежать отдельного «складирования» полезного материала где-нибудь в отдельной папке либо постоянного написания однотипного кода: фреймворк позволяет использовать встроенные классы для валидации, логирования и многих других процессов, а также имеет структуру, которую в итоге получает проект.

Фреймворки имеют массу преимуществ, именно поэтому они используются практически повсеместно. Это:

• удобная и быстрая разработка приложения;
• чистый код, который (чаще всего) не требует рефакторинга.

Но у использования фреймворка есть и недостатки (и забывать о них не стоит):

• слабая защищенность из-за открытого исходного кода;
• нужно потратить определенное время и усилия на изучение фреймворка;
• каждый фреймворк нужно изучать отдельно (нельзя разобраться в одном фреймворке и начать понимать, как работать со всеми).

Сильные стороны Vue

• Отличная документация.
• Замечательное сообщество.
• Это — прогрессивный фреймворк.

▍Документация

Руководство. Здесь можно найти всё то, что нужно для того, чтобы начать работу с Vue.js. Этот раздел разбит на удобные для восприятия подразделы, которые знакомят читателя с концепциями, нужными для того, чтобы приступить к разработке приложений, основанных на компонентах.

API. В этом разделе приводится детальное описание API Vue. Например, если вам когда-нибудь попадётся какой-нибудь метод, в предназначении которого вы не вполне уверены, прояснить ситуацию поможет посещение этого раздела.

Рекомендации. Тут можно найти замечательные рекомендации, следуя которым можно избежать появления ошибок. Эти рекомендации способны предостеречь разработчика от использования анти-паттернов

Важно то, что здесь приведены скорее не жёсткие правила, а нечто вроде руководства. После того, как вы немного освоитесь с Vue, напишете несколько приложений, я порекомендовал бы вам почитать материалы этого раздела

Я полагаю, что это — очень ценный источник знаний по Vue.

Примеры. Здесь можно найти примеры приложений, разработанных средствами Vue. На вашем месте я пока не заглядывал бы сюда до тех пор, пока не освоился бы немного с разработкой компонентов. Но немного позже, когда вы будете готовы к тому, чтобы узнать о том, как устроены полноценные Vue-приложения, вам стоит изучить этот раздел.

Книга рецептов. В данном разделе можно найти ответы на часто задаваемые вопросы о Vue. Например — на такие: «Как выполнить валидацию формы?», «Как провести модульное тестирование компонента?». Это, опять же, ценный ресурс, но освоение его материалов стоит отложить до того момента, когда у вас появятся вопросы, подобные тем, что приведены выше.
Инструменты и основные библиотеки. На сайте Vue есть отличные материалы по инструментам и основным библиотекам. В особые подробности об этом мы тут вдаваться не будем, так как нам нужно поскорее приступить к написанию кода. Я приведу тут несколько ссылок на материалы, о существовании которых полезно знать. Итак, среди инструментов Vue я отметил бы следующие: инструменты разработчика, Vue CLI, Vue Loader. Вот ссылки на материалы по официальным библиотекам: Vue Router, Vuex, Vue Server Renderer.

▍Сообщество

• Evan You
• Chris Fritz
• Sarah Drasner
• Damian Sulisz
• Divya Sasidharan
• Guillaume Chau
• Ben Hong
• Sebastien Chopin
• Natalia Tepluhina
• Edd Yerburgh

Vue 0.x — 2.x

00:00 В «Едадиле» Vue начал использоваться ещё с версии 0.11. Уже тогда он был сильно быстрее и проще Angular.js с его dirty-check и лаконичнее React с его setState и shouldComponentUpdate (не говоря уже про JSX).

00:49 Вышедший летом 2015 Vue 1 ознаменовал курс на стабилизацию. Это было весело: two-way binding, всеобщая изменяемость и, конечно, белые экраны пока не скомпилится шаблон.

01:21 Весной 2016 произошла революция — вышел Vue 2. Больше никакого веселья. Нет two-way binding, неизменяемые входные параметры, VDOM и, конечно же, прекомпиляция шаблонов. Это первая версия Vue, которая стала использоваться на edadeal.ru.

2

# npm

npm is the recommended installation method when building large scale applications with Vue. It pairs nicely with module bundlers such as webpack(opens new window) or Rollup(opens new window).

12

Vue also provides accompanying tools for authoring Single File Components (SFCs). If you want to use SFCs then you’ll also need to install :

1

If you’re coming from Vue 2 then note that replaces .

In addition to , you’ll also need a suitable SFC loader or plugin for your chosen bundler. See the SFC documentation for more information.

In most cases, the preferred way to create a webpack build with minimal configuration is to use Vue CLI.

Моделирование приложения

Прежде всего, давайте спланируем, то что мы собираемся сделать.

Application components

Мы собираемся разбить будущее приложение на три составляющие:

• UserView — «Умный» компонент, отвечающий за связь с хранилищем store и загрузку наших презентационных компонентов
• VUserSearchForm — «Тупые» компоненты, отвечающие за визуализацию формы, а также за передачу сообщения родительскому компоненту с условием поиска
• VUserProfile — «Тупой» компонент, отвечающий за предоставление информации о наших найденных пользователях

Мы также собираемся искать пользователей через Github API.

Github API — https://developer.github.com/v3/users/

Скачайте vue-cli и давайте создадим наш проект:

Ниже показаны функции, которые я выбрал через CLI. Выберите наиболее удобные для вас.

Vue CLI v3.0.5
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, PWA, Router, Vuex, Linter, Unit
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save
? Pick a unit testing solution: Jest
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N) N

Давайте предложим задачу: мы будем запускать npm run serve только тогда, когда закончим наше приложение.

Компоненты и реквизит

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

• Заголовок
• Навигация
• ContentCard
• Нижний колонтитул

И многое другое. Кроме того, в компонент могут быть вложены другие компоненты. Мы можем думать о них как о «родителях» и «детях». Другими словами, компоненты – это столпы приложения.

Чтобы создать компонент Vue, перейдите в корневую папку проекта и выполните следующие команды:

Эти две команды создают папку и компонент. В качестве альтернативы вы можете сделать то же самое за пределами терминала.

Создайте компонент

Следующим шагом является создание компонента, что вы можете сделать, вызвав метод в экземпляре Vue:

Первый аргумент – это имя компонента, которым в данном случае является . Второй аргумент – это объект с подробностями конфигурации.

Теперь просто скопируйте все из файла и добавьте его в объект конфигурации. Ваш новый компонент должен выглядеть следующим образом:

Теперь детали курса инкапсулированы в компонент, а не хранятся в основном файле приложения. Однако, чтобы приложение снова заработало, вам необходимо внести некоторые другие изменения. Перейдите в файл и измените его следующим образом:

Кроме того, перейдите и измените следующее:

Что здесь происходит?

Прежде всего, вы импортировали компонент в этой строке:

Во-вторых, вы использовали его в этой строке:

В-третьих, теперь вы монтируете приложение в HTML-файл, а не в main.js:

Если изменений было слишком много и это больше не имеет смысла, проверьте репозиторий vue3-intro. Вы можете увидеть, как лучше организован код.

Двигаемся вперед, молодцы! Вы создали и использовали свой первый компонент Vue. Резюмируем:

• Вы создали компонент Vue – «components / CourseCard»
• Импортировал его в файл HTML
• Использовал это

Реквизит

Props – это более короткое имя свойств, которое позволяет компонентам обмениваться данными между ними. Каждый компонент имеет определенное использование, но иногда ему требуется доступ к данным, выходящим за пределы его области.

Давайте изменим существующее приложение, чтобы оно принимало свойство с именем . Цель этой опоры – указать, платный или бесплатный курс. Сделать это можно следующим образом:

Каждый раз, когда вы создаете компонент, вы можете указать, какие свойства он принимает. Кроме того, вы можете указать тип опоры и то, требуется она или нет. В этом примере опора не требуется, но вы можете сделать ее необходимой, добавив одну строку после типа – .

Обычно такие фреймворки, как Vue, имеют встроенную проверку. То есть он проверяет, что переданная опора имеет правильный тип.

Вы можете увидеть полный код компонента на GitHub – CourseCard.

Прежде чем идти дальше, нужно зайти в файл и вернуть свойство. См. Код ниже:

По умолчанию все курсы платные. Однако вы можете сделать их все «бесплатными» по умолчанию и сделать «платными» только премиум-курсы.

Двигаясь дальше, добавьте в свойство компонента следующий метод :

Вы можете увидеть полный код компонента на GitHub – CourseCard. Этот метод – – позволяет вам проверить, оплачен ли курс или нет, и соответствующим образом отобразить данные в шаблоне.

Теперь вам нужно войти в файл и добавить указанную выше строку кода. Это похоже на то, что было у вас раньше, за одним исключением. В этой строке вы передаете опору, чтобы использовать ее в своем компоненте.

Смотрите полный код из index.html на GitHub.

Последний шаг – использовать опору и визуализировать данные на ее основе. Приведенный ниже фрагмент кода взят из шаблона компонента «Курс».

Если для свойства задано значение true (если курс платный), он отображает дополнительную информацию, которая позволяет пользователям покупать курс. С другой стороны, если курс бесплатный, информация «скрыта».

Таким образом, в этом примере вы можете увидеть простейший способ использования опоры.

Привязка атрибутов

Я заменил остальную часть кода на «…» для удобства чтения. Код такой же, как и раньше, но с дополнениями:

• imgURL
• imgDescription

Теперь, идя дальше, есть еще одно дополнение к HTML:

Как видите, мы используем URL-адрес изображения и описание, указанные в экземпляре Vue. Вы можете создать эту реактивную связь между атрибутом и аргументами благодаря директиве. Директива позволяет разработчикам связать атрибут динамически выражение. С точки зрения непрофессионала, это позволяет нам использовать динамические значения, а не жестко запрограммированные значения.

Теперь вы можете быть сбиты с толку, потому что в коде нет. Это потому, что есть сокращение для , которое представляет собой просто символ двоеточия – .

можно переписать следующим образом:

Благодаря этой системе реактивности Vue вы можете обновлять URL-адрес изображения и описание в своем экземпляре Vue, и HTML также будет обновляться автоматически! Вы можете добавить атрибут «href» в том же духе и получить URL-адрес из экземпляра Vue. В качестве упражнения попробуйте!

Если вы запустите приложение, вы увидите отображаемое изображение! Ссылка на изображение такая же. Единственная разница в том, что я использовал свой домен, чтобы замаскировать этот длинный URL. Если вы зайдете на catalins.tech/img, вы увидите, что это тот же образ!

Creating a Vue Instance

Every Vue application starts by creating a new Vue instance with the function:

Although not strictly associated with the MVVM pattern, Vue’s design was partly inspired by it. As a convention, we often use the variable (short for ViewModel) to refer to our Vue instance.

When you create a Vue instance, you pass in an options object. The majority of this guide describes how you can use these options to create your desired behavior. For reference, you can also browse the full list of options in the .

A Vue application consists of a root Vue instance created with , optionally organized into a tree of nested, reusable components. For example, a todo app’s component tree might look like this:

We’ll talk about the component system in detail later. For now, just know that all Vue components are also Vue instances, and so accept the same options object (except for a few root-specific options).

Array Change Detection

Mutation Methods

Vue wraps an observed array’s mutation methods so they will also trigger view updates. The wrapped methods are:

You can open the console and play with the previous examples’ array by calling their mutation methods. For example: .

Replacing an Array

Mutation methods, as the name suggests, mutate the original array they are called on. In comparison, there are also non-mutating methods, e.g. , and , which do not mutate the original array but always return a new array. When working with non-mutating methods, you can replace the old array with the new one:

You might think this will cause Vue to throw away the existing DOM and re-render the entire list — luckily, that is not the case. Vue implements some smart heuristics to maximize DOM element reuse, so replacing an array with another array containing overlapping objects is a very efficient operation.

Caveats

Due to limitations in JavaScript, there are types of changes that Vue cannot detect with arrays and objects. These are discussed in the section.

Element UI

По функционалу библиотека  схожа с предыдущей Vue UI. Дизайн система насчитывает порядка 60 компонентов со всевозможными кастомизациями, так как стили библиотеки легко переопределяются. Библиотека использует препроцесcор SCSS с возможностью заменить глобальные переменные цветов, тем самым можно легко создать свою цветовую тему. Кстати говоря, все классы в библиотеке названы по БЭМу. Присутствует поддержка 24 колоночной структуры и локализации на русском, украинском и казахском языках. Есть достаточно скудный набор иконок, который скорее всего придется заменить на тот, который придется вам по душе. Как и в любой уважающей себя UI библиотеке имеется полноценная валидация форм, так что сторонние плагины типа VeeValidate не потребуются. Документация на английском языке с понятными примерами.

Заключение

Таким образом, мы с вами кратко разобрали пожалуй самые популярныe vue библиотеки готовых компонентов. Выбирайте дизайн систему, которая вам больше всего понравилась и вперед кодить!

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

Запускаем интерпретатор команд от имени администратора:

> npm install -g @vue/cli

Создаем директорию для проектов Vue:

> mkdir C:/vuejs
> cd C:/vuejs

И создаем первый проект:

> vue create hello

На первом экране будет три пункта:

Vue CLI v4.5.9
? Please pick a preset: (Use arrow keys)
> Default ( babel, eslint)
  Default (Vue 3 Preview) ( babel, eslint)
  Manually select features

Мы выбираем первый пункт — Vue 2-ой версии с двумя плагинами. Babel преобразует код на ES6 (ES-2015) в код на предыдущем стандарте ES5, чтобы его понимали старые версии браузеров. ESLint позволяет проводить анализ качества кода, написанного на любом выбранном стандарте JavaScript.

При выборе последнего пункта можно вручную настроить конфигурацию и потом сохранить для дальнейшего использования. Можно выбрать версию Vue, в какой момент и как именно проверять качество кода, где хранить конфигурацию проекта — в отдельных файлах (In dedicated config files) или в одном файле (In package.json).

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

Настройки сохраняются в файле :

{
  "useTaobaoRegistry" false,
  "presets" {
    "MySettings" {
      "useConfigFiles" false,
      "plugins" {
        "@vue/cli-plugin-babel" {},
        "@vue/cli-plugin-eslint" {
          "config" "base",
          "lintOn" 
            "save"
          
        }
      },
      "vueVersion" "2"
    },
  }
}

> vue config

Для редактирования настроек предназначена команда

> vue config --edit

Переходим в директорию проекта и запускаем сервер

> cd C:/vuejs/hello
> npm run serve

Открываем в браузере страницу

Прозрачные компоненты-обёртки

Прозрачный компонент-обёртка оборачивает некоторую структуру DOM и всё ещё использует события внутри этой структуры вместо корневого элемента DOM. Например,

<!-- Обёртка компонента для поля ввода --><template>    <div class="wrapper-comp">        <label>Моя метка</label>        <input @focus="$emit('focus')" type="text"/>    </div></template>

В коде выше нас в действительности интересует тег , а не корневой элемент , поскольку он добавлен в основном для стилизации и косметической цели. Пользователя компонента могут интересовать несколько событий поля ввода, такие как , , , и т.д. Это означает, что мы должны повторно генерировать каждое событие. Наш компонент будет выглядеть так.

<!-- Обёртка компонента для поля ввода --><template>    <div class="wrapper-comp">        <label>Моя метка</label>        <input type="text"            @focus="$emit('focus')"            @click="$emit('click')"            @blur="$emit('blur')"            @hover="$emit('hover')"        />    </div></template>

Этот код противоречит принципу DRY (не повторяй себя) и выглядит грязным. Простое решение состоит в том, чтобы просто повторно связать ваши слушатели событий с требуемыми DOM-элементам, используя свойство .

A Single Root Element

When building out a component, your template will eventually contain more than just the title:

At the very least, you’ll want to include the post’s content:

If you try this in your template however, Vue will show an error, explaining that every component must have a single root element. You can fix this error by wrapping the template in a parent element, such as:

As our component grows, it’s likely we’ll not only need the title and content of a post, but also the published date, comments, and more. Defining a prop for each related piece of information could become very annoying:

So this might be a good time to refactor the component to accept a single prop instead:

The above example and some future ones use JavaScript’s template literal to make multi-line templates more readable. These are not supported by Internet Explorer (IE), so if you must support IE and are not transpiling (e.g. with Babel or TypeScript), use newline escapes instead.

Now, whenever a new property is added to objects, it will automatically be available inside .

# Conditionals and Loops

It’s easy to toggle the presence of an element, too:

123

123456789

This example demonstrates that we can bind data to not only text and attributes, but also the structure of the DOM. Moreover, Vue also provides a powerful transition effect system that can automatically apply transition effects when elements are inserted/updated/removed by Vue.

You can change from to in the sandbox below to check the effect:

See the Pen Conditional rendering
by Vue (@Vue)
on CodePen.

There are quite a few other directives, each with its own special functionality. For example, the directive can be used to display a list of items using the data from an array:

1234567

12345678910111213

See the Pen List rendering
by Vue (@Vue)
on CodePen.

Vuetify

Vuetify — наверно самая популярная библиотека для быстрого прототипирования. В данный момент на Github эта библиотека насчитывает 28000 звезд. В качестве дизайн системы данная библиотека использует дизайн систему Google Material Design. На борту библиотека имеет около 80 готовых компонентов, в которых поможет разобраться документация. Документация версии 1.5.x частично переведена на русский, начиная с версии 2.3.x документация доступна пока только на английском

Важно отметить, что библиотека имеет локализации включая русский и украинский языки. У Vuetify  есть своя адаптивная сетка на 12 колонок аналогичная Bootstrap

Так же присутствует поддержка SASS стилей + есть возможность переопределить глобальные значения в файле конфигурации webpack. Присутствует три набора иконок: Material Design и две версии Font Awesome — 4 и 5.

Listening to Child Components Events

As we develop our component, some features may require communicating back up to the parent. For example, we may decide to include an accessibility feature to enlarge the text of blog posts, while leaving the rest of the page its default size:

In the parent, we can support this feature by adding a data property:

Which can be used in the template to control the font size of all blog posts:

Now let’s add a button to enlarge the text right before the content of every post:

The problem is, this button doesn’t do anything:

When we click on the button, we need to communicate to the parent that it should enlarge the text of all posts. Fortunately, Vue instances provide a custom events system to solve this problem. The parent can choose to listen to any event on the child component instance with , just as we would with a native DOM event:

Then the child component can emit an event on itself by calling the built-in , passing the name of the event:

Thanks to the listener, the parent will receive the event and update value.