vue config productiontip что это

Данный материал является частью цикла статей «Основы Vue.js». Не забудьте посмотреть другие статьи по этой теме 🙂

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

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

Установка Vue CLI и запуск нового проекта

Во-первых, мы собираемся установить Vue CLI (интерфейс командной строки), который поможет нам инициализировать новое приложение Vue. Чтобы установить Vue CLI, мы собираемся ввести эту команду в терминале:

Чтобы создать наш первый проект Vue.js, давайте перейдем к папке, в которой мы хотим создать проект, и введите терминал:

Через некоторое время мастер установки задаст нам несколько вопросов.

Подробности проекта

Второй вопрос: Project description (Описание проекта). А для этого мы напишем Account Owner Client Если хотите, можете написать что то свое.

Настройка Vue.js и ESLint

Настройка тестов и прочего.

Восьмой вопрос касается модульных тестов, и мы напечатаем, n потому что мы не будем рассматривать какие-либо типы тестов в данной статье.

Десятый и последний вопрос: нужно ли запускать мастер npm install для установки всех необходимых нам зависимостей. Мы выберем Yes, use NPM чтобы установить все необходимые зависимости.

Если вы внимательно за всем проследили, в результате вы увидите приверно следующее:

Обзор структуры проекта

После того, как вы откроете проект с помощью редактора кода, вы заметите следующую структуру папок:

Пояснение к наиболее важным файлам и папкам:

Взглянем на файл index.html :

Структура компонента

Обратите внимание на следующий компонент:

Каждый компонент Vue может содержать шаблон, скрипт и раздел стилей.

Шаблон

В шаблоне мы можем использовать собственные HTML-теги, а также наши пользовательские компоненты Vue. Здесь мы видим элемент, и это место, где наш маршрутизатор будет отображать соответствующий компонент для этого маршрута.

Сценарий

Стили

Маршрутизатор

Обратим внимание на файл router/index.js :

В этом файле мы снова импортируем Vue,

Запуск приложения

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

Введите эту команду в терминал:

Источник

Обработка ошибок во Vue

Весь прошлый год я работал с моим любимым фреймворком, Vue.js, описывал и представлял его. И я понял, что ещё не разобрался с обработкой ошибок во Vue. Мне бы хотелось объяснить это тем, что я пишу идеальный код, но мы все знаем, как обстоит дело в действительности. В течение нескольких последних дней я экспериментировал с различными методами обработки ошибок, которые предоставляет Vue, и решил поделиться своими открытиями. Очевидно, что этот обзор не охватит все возможные сценарии, но я надеюсь, что он вам поможет!

Ошибки

Чтобы протестировать различные методы обработки, я решил взять три разных типа ошибок (по крайней мере, для начала). В первом случае это было просто обращение к несуществующей переменной:

В этом примере пользователю не выдаётся сообщение об ошибке, но в консоль выводится предупреждение [Vue warn].

Вот как выглядит выполнение этого примера:

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

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

Вот так выполняется код для этого примера:

В третьем примере я использовал метод, при выполнении которого должна возникать ошибка.

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

И вот демонстрация для этого примера:

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

Итак, как же вы можете обрабатывать ошибки в приложениях Vue? Надо сказать, я был немного удивлен, что в основном руководстве по фреймворку Vue нет раздела, посвящённого обработке ошибок.

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

«Если при отрисовке компонента произойдёт ошибка выполнения, она будет передана в глобальную функцию конфигурации Vue.config.errorHandler, если таковая была указана. Наверное, полезно было бы использовать этот хук совместно с сервисом отслеживания ошибок, таким как Sentry, тем более что его интеграция с Vue официально поддерживается».

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

Средство обработки ошибок номер один: errorHandler

Первое средство — это errorHandler. Как вы, вероятно, догадались, это стандартный обработчик ошибок для приложений Vue.js. Вы можете назначить его следующим образом:

В приведённом выше объявлении функции err — это описание текущей ошибки, info — строка информации об ошибке, специфичная для Vue, а vm — текущее приложение Vue. Помните, что на одной веб-странице могут одновременно выполняться несколько приложений Vue. Этот обработчик ошибок будет относиться к ним всем. Рассмотрим следующий простой пример:

В случае первой ошибки этот код не выполняет никаких действий. Если вы помните, при этом генерируется предупреждение, а не сообщение об ошибке.

Во втором случае ошибка обрабатывается и выводится следующий текст:

Наконец, третий пример даёт следующий результат:

Обратите внимание, насколько «полезна» информация под заголовком Info в двух предыдущих примерах. Теперь проверим, как работает следующее средство.

Средство обработки ошибок номер два: warnHandler

warnHandler обрабатывает — что бы вы думали? — предупреждения Vue. Заметьте, что в продакшене этот обработчик игнорируется. Обработчик для этого метода также слегка отличается от предыдущего:

Два первых аргумента — msg и vm — не требуют дополнительных пояснений, а аргумент trace должен быть деревом компонентов. Рассмотрим пример:

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

Второй и третий примеры не изменяются. Живые примеры для всех трёх случаев представлены ниже.

Источник

# Изменения в глобальном API

Vue 2.x имеет ряд глобальных API и конфигураций, которые глобально изменяют поведение Vue. Например, для регистрации глобального компонента можно воспользоваться методом API Vue.component :

Аналогичным образом объявляется глобальная директива:

Глобальная конфигурация позволяет легко случайно загрязнить другие тестовые случаи во время тестирования. Пользователям потребуется аккуратно хранить оригинальную глобальную конфигурацию и восстанавливать её после каждого теста (например, сбрасывать Vue.config.errorHandler ). Некоторые API, такие как Vue.use и Vue.mixin даже не предоставляют возможности откатить свои изменения и эффекты. Это приводит к тому, что тесты с участием плагинов становятся очень хитрыми. Фактически, vue-test-utils должны реализовывать специальный API createLocalVue чтобы справиться с этим:

Глобальная конфигурация затрудняет совместное использование одной и той же копии Vue между несколькими «приложениями» на одной странице с различными глобальными конфигурациями.

Чтобы избежать этих проблем, во Vue 3 представляем…

# Новый глобальный API: createApp

Вызов createApp возвращает экземпляр приложения, новый концепт во Vue 3.

При использовании сборки с CDN createApp доступен через глобальный объект Vue :

Экземпляр приложения представляет собой подмножество от глобального API Vue 2. Главное правило заключается в том, что любое API, которое глобально изменяет поведение Vue теперь переносится в экземпляр приложения. Ниже таблица соответствий глобального API Vue 2 и соответствующих API экземпляра:

Все другие глобальные API, которые глобально не изменяют поведение, теперь доступны именованными экспортами, как описывается в разделе Treeshaking глобального API.

# Удалено свойство config.productionTip

Во Vue 3.x, подсказка «use production build» отображается только при использовании «dev + full build» (сборка, с компилятором шаблонов и отображением предупреждений).

Так как сборки в виде ES-модулей используются с системами сборки, и в большинстве случаев CLI или шаблон конфигурируют переменную окружения сборки, то эти предупреждения теперь больше не будут показываться.

# Свойство config.ignoredElements теперь config.compilerOptions.isCustomElement

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

В 3.х, проверка, является ли элемент компонентом или нет, была перенесена на этап компиляции шаблона, поэтому данная опция конфигурации используется только при компиляции шаблонов на лету. При использовании только-runtime сборки, опция isCustomElement должна передаваться в @vue/compiler-dom в настройках сборки — например, через опцию compilerOptions в vue-loader

# Свойство Vue.prototype заменено на config.globalProperties

Во Vue 2, расширение Vue.prototype обычно использовалось для добавления свойств, которые были бы доступны во всех компонентах.

# Удалён метод Vue.extend

Во Vue 2.x метод Vue.extend использовался для создания «подкласса» базового конструктора Vue с аргументом, который должен быть объектом, содержащим опции компонента. Во Vue 3.x больше нет концепции конструкторов компонентов. Монтируемый компонент всегда должен использовать глобальный API createApp :

# Выведение типов

Во Vue 2 метод Vue.extend также использовался с TypeScript для выведения типов опций компонента. Во Vue 3 можно использовать глобальный API defineComponent вместо Vue.extend для этих же целей.

Обратите внимание, что хотя возвращаемый тип defineComponent является типом, подобным конструктору, он используется только для вывода TSX. Во время выполнения defineComponent по большей части ничего не делает и возвращает объект опций как есть.

# Наследование компонентов

# Примечание для разработчиков плагинов

Так как глобальный API use больше недоступен во Vue 3, этот метод перестанет работать, а вызов Vue.use() теперь выведет предупреждение. Вместо этого, пользователь теперь должен явно указать использования плагина в экземпляре приложения:

# Монтирование экземпляра приложения

Со всеми этими изменениями, компонент и директива, о которых обсуждали в начале этого руководства, будут переписаны примерно таким образом:

# Provide / Inject

Аналогично опции provide в корневом экземпляре в 2.x, экземпляр приложения во Vue 3 также может предоставлять зависимости, которые могут внедряться любым компонентом внутри приложения:

# Общая конфигурация между приложениями

Одним из способов создания общей конфигурации, например из компонентов или директив, для использования между приложениями — создать функцию фабрику, подобную такой:

(opens new window)
Последнее обновление страницы: 5 месяцев назад

Источник

Vue для самых маленьких a.k.a небольшой блог по всем канонам

Всем привет! В данной статье рассмотрим разработку фронта простенького блога на Vue с использованием всех прелестей Vue включая Vuex и Router. А также поговорим про структуру приложения и работу с контейнером и роутером.

Для начала определим этапы создания фронта для приложения (в данном случае блога):

1. Планирование

Для начала распишем что же будет содержать наше SPA. Начинать следует непосредственно со страниц, так как это то, с чем непосредственно взаимодействует пользователь (если очень грубо округлить это аналогично тестам TDD – мы сначала описываем что должно делать приложение, как с ним будет взаимодействовать пользователь, а затем уже занимаемся реализацией).

Итак, какие будут страницы:

Ничего не понятно, но на то это и прототип 🙂 Сразу поясню почему нарисовано не с помощью софтины для прототипирования: потому что на бумаге куда быстрее и проще, ну и иногда все-таки нужно руками шевелить, а то, когда доходит дело когда нужно где-то расписаться совсем грустно становится.

Исходя из полученных страниц накидываем список компонентов:

И наконец описав все точки взаимодействия пользователя опишем сущности нашего приложения:

2. Скелет приложения

Переходим к созданию структуры. Выполняем в консоле следующие команды:

Данные команды создают проект «vue-blog-habr» в соответствующей директории. Подробнее про vue-cli и используемые параметры можно найти тут.

И в итоге получаем стандартную структуру проекта:

Сразу же устанавливаем нужные нам пакеты:

Регистрируем используемые модули:

Правим структуру директорий проекта таким образом:

Последняя команда запускает сервер, на котором в режиме runtime применяются все правки проекта. Для доступа в браузере нужно перейти по адресу: localhost:8080

3. Создание моделей

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

4. Реализация бизнес-логики

Неожиданно, но на данном этапе реализацию самой бизнес-логики делать НЕ нужно. Нужно создать объект хранилища и сразу же разделить его на модули:

А в самом модуле уже далее будем описывать все используемые мутации/геттеры/действия. Изначально, хранилище выглядит так:

Дополнительно заводим объект для работы с API через который будут проходить все запросы. На момент реализации фронт части, наличие бэкенда абсолютно не нужно, поэтому можно использовать статические данные:

Что дает использование vuex:

5. Добавление страниц и роутов

Исходя из спланированной ранее структуры, нам нужно создать 4 страницы: Index, Category, Article, а также 404 страницу. В директории src/pages добавляет соответствующие файлы:

Файл главной страницы выглядит так:

После реализации страниц, все используемые геттеры и действия сразу же добавляем в хранилище vuex (без реализации):

Нужно отметить несколько моментов:

6. Добавление компонентов

После реализации всех страниц мы получаем следующий список компонентов, основные:

Пару слов про реализацию компонентов на главной:

На данной странице используется «оберточный» компонент ListItems. На первый взгляд он может показаться избыточным, ведь можно обойтись конструкцией v-for как сделаны комментарии, но использование слотов сильно сокращает используемый код и позволяет повторно использовать один и тот же элемент в нескольких местах.

Но если посмотреть на список статей, то он используется на двух страницах (Index и Category) с абсолютно одинаковым вызовом. В данной ситуации будет правильным решением создать компонент ArticleItems и наследовать его от ListItems:

В данной ситуации наследование позволяет не дублировать описание параметров (свойство props), оно берется из родительского компонента. Подробнее про наследование и примеси: ru.vuejs.org/v2/api/#extends, ru.vuejs.org/v2/guide/mixins.html

После создания нового компонента, нужно также исправить файлы страниц:

Также стоит обратить внимание на форму добавления комментариев. Напрямую запросы в API не делаются, а выполняется действие Vuex и уже «внутри» выполняется запрос к API, обновляется нужная модель Article и обновляется список комментариев. Код самого компонента выглядит так:

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

7. Правки

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

Добавляем в компонент ArticleItems дополнительное свойство cols которое будет содержать количество столбцов.

В вызове компонента на странице категорий добавляем нужное свойство:

Далее захотелось нам на страницу просмотра статьи, добавить ссылки на соседние статьи (вперед/назад). Для этого нужно будет добавить 2 геттера и ссылки на страницу:

И реализация самих геттеров:

И напоследок нам нужно изменить URL для страницы статьи, с «article-123» на «post-123». Так как во всем приложении используются именованные роуты, то достаточно изменить только шаблон маршрута:

Полезная литература

Несмотря на то что это получилось очень простое приложение, структура сделана таким образом, чтобы можно было без проблем что-то изменить и/или добавить:

При такой схеме работу на проекте можно безболезненно разделить между тремя юнитами:

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

Источник

Vue config productiontip что это

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

silent

Тип: boolean

По умолчанию: false

Использование:

Отключение вывода логов и предупреждений Vue.

optionMergeStrategies

По умолчанию: <>

Использование:

Изменение стратегии слияния опций на вашу собственную.

Функция слияния получает значения опций родительского и дочернего элемента первым и вторым аргументами соответственно.
Третьим аргументом передаётся контекст действующего экземпляра Vue.

devtools

Тип: boolean

По умолчанию: true ( false в production-сборках)

Использование:

errorHandler

Тип: Function

По умолчанию: undefined

Использование:

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

В версиях 2.4.0+, этот хук также отслеживает ошибки, возникающие внутри пользовательских обработчиков событий Vue.

В версиях 2.6.0+, этот хук также отслеживает ошибки, возникающие внутри v-on слушателей DOM. Кроме того, если какой-либо из покрываемых хуков или обработчиков возвращает цепочку Promise (например, асинхронные функции), ошибка из этой цепочки Promise также будет обработана.

Сервисы отслеживания ошибок Sentry и Bugsnag предлагают официальную интеграцию с использованием этого свойства.

warnHandler

Тип: Function

По умолчанию: undefined

Использование:

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

ignoredElements

Тип: Array

По умолчанию: []

Использование:

Список элементов, которые игнорируются Vue. Это могут быть компоненты, устанавливаемые за пределами Vue (например, через Web Components API). В противном случае, будет возникать предупреждение о «Неизвестном пользовательском элементе», предполагая, что вы забыли зарегистрировать компонент или допустили ошибку в написании имени компонента.

keyCodes

По умолчанию: <>

Использование:

performance

Тип: boolean

По умолчанию: false (с версии 2.2.3+)

Использование:

Установка true включает отслеживание производительности на этапах инициализации, компиляции, отрисовки и обновления компонента на графике в инструментах разработчика браузера. Работает только в режиме разработки в браузерах, которые поддерживают performance.mark API.

productionTip

Тип: boolean

По умолчанию: true

Использование:

Установка false отключает предупреждение о работе в режиме разработки при запуске Vue.

Глобальный API

Vue.extend( options )

Аргументы:

Использование:

Создаёт «подкласс» базового конструктора Vue. Принимает параметром объект с опциями нового компонента.

См. также: Компоненты

Vue.nextTick( [callback, context] )

Аргументы:

Использование:

Вызов функции callback при следующем цикле обновления DOM. Используйте для работы с обновлённым DOM после изменения данных.

Vue.set( target, propertyName/index, value )

Аргументы:

Возвращает: установленное значение.

Использование:

Добавление свойства к реактивному объекту, гарантируя, что новое свойство также будет реактивным и будет вызвано обновление представления. Это пригодится для добавления новых свойств к реактивным объектам, поскольку иначе Vue не может отследить эти изменения (например, this.myObject.newProperty = ‘hi’ ).

Обратите внимание, объект не может быть экземпляром Vue или корневым объектом данных экземпляра Vue.

Vue.delete( target, propertyName/index )

Аргументы:

Только в версиях 2.2.0+: возможность работы с массивами + индексами.

Использование:

Удаление поля. Для реактивного объекта будет вызвано обновление шаблона. Необходим, потому что Vue не может отследить неявное удаление полей (но вам редко когда это понадобится).

Объект target не может быть экземпляром Vue, или корневым объектом данных экземпляра Vue.

Vue.directive( id, [definition] )

Аргументы:

Использование:

Регистрирует новую глобальную директиву или возвращает уже зарегистрированную.

Vue.filter( id, [definition] )

Аргументы:

Использование:

Регистрирует новый глобальный фильтр или возвращает уже зарегистрированный.

См. также: Фильтры

Vue.component( id, [definition] )

Аргументы:

Использование:

Регистрирует глобальный компонент или возвращает уже зарегистрированный. Регистрация автоматически устанавливает переданный id в name компонента.

См. также: Компоненты

Vue.use( plugin )

Аргументы:

Использование:

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

См. также: Плагины

Vue.mixin( mixin )

Аргументы:

Использование:

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

Vue.compile( template )

Аргументы:

Использование:

Vue.observable( object )

Аргументы:

Использование:

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

Vue.version

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

Использование:

Опции — данные

Тип: Object | Function

Подробности:

Объект с данными экземпляра Vue. Vue рекурсивно преобразует его свойства в геттеры/сеттеры, чтобы сделать их «реактивными». Объект должен быть простым: Vue проигнорирует свойства прототипа и нативные объекты, например, из API браузера. Прежде всего, данные должны быть просто данными — не рекомендуется передавать объекты со своим собственным поведением.

Добавлять реактивные свойства к корневому объекту данных после инициализации нельзя. Определяйте все корневые реактивные свойства до создания экземпляра.

При определении компонента опция data должна быть функцией, которая возвращает объект данных, потому что может быть создано множество экземпляров. Если использовать в data простой объект, то все созданные экземпляры получат ссылку на него! А когда data — функция, при создании нового экземпляра можно вызвать её и получить свежую копию данных для инициализации.

Пример:

props

Тип: Array | Object

Подробности:

Список или хэш входных параметров, по которым разрешено получение данных из родительского компонента. Можно использовать простой синтаксис в виде массива, или объект, который предоставляет дополнительные возможности: проверку типов, пользовательские валидации и значения по умолчанию.

При использовании объектного синтаксиса можно указать следующие опции:

Пример:

propsData

Подробности:

Входные параметры компонента при его создании. Обычно используются для целей модульного тестирования.

Пример:

computed

Подробности:

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

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

Вычисляемые свойства кэшируются и повторно вычисляются только при изменении реактивных зависимостей. Обратите внимание, если определённая зависимость выходит за область видимости экземпляра (т.е не реактивная), то вычисляемое свойство не будет обновляться.

Пример:

methods

Подробности:

Методы, которые будут подмешаны к экземпляру Vue. Можно запускать эти методы напрямую из экземпляра VM, или использовать их в директивах. this методов указывает на экземпляр Vue.

Не используйте стрелочные функции при определении методов (например, plus: () => this.a++ ). Стрелочные функции связываются с родительским контекстом, поэтому this будет указывать не на экземпляр Vue, и this.a окажется неопределённым.

Пример:

watch

Подробности:

Пример:

Не используйте стрелочные функции при указании методов наблюдателей (например, searchQuery: newValue => this.updateAutocomplete(newValue) ). Стрелочные функции связываются с родительским контекстом, поэтому this будет указывать не на экземпляр Vue, и this.updateAutocomplete окажется неопределённым.

Опции — DOM

Тип: string | Element

Подробности:

Указывает в какой существующий DOM-элемент монтировать экземпляр Vue. Может быть как строковым CSS-селектором, так и объектом типа HTMLElement.

См. также:

template

Тип: string

Подробности:

Строковый шаблон с разметкой для экземпляра Vue. Этот шаблон заменяет элемент в точке монтирования. Вся существующая разметка в точке монтирования будет проигнорирована, если в шаблоне нет слота для распределения контента.

Методы экземпляра — жизненный цикл

vm.$mount( [elementOrSelector] )

Аргументы:

Возвращает: vm — сам экземпляр

Использование:

Если параметр elementOrSelector не указан, шаблон будет отрисован как элемент вне документа. Вы сможете затем вставить такой элемент нативным интерфейсом DOM.

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

Пример:

См. также:

vm.$forceUpdate()

Использование:

Заставляет экземпляр Vue произвести переотрисовку. Обратите внимание, что этот метод затронет не все дочерние компоненты, а только сам экземпляр и дочерние компоненты с контентными слотами.

vm.$nextTick( [callback] )

Аргументы:

Использование:

Пример:

См. также:

vm.$destroy()

Использование:

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

Директивы

v-text

Принимает: string

Подробности:

Пример:

v-html

Принимает: string

Подробности:

Динамическая отрисовка произвольного HTML-кода на сайте — это очень опасная практика, легко приводящая к XSS-уязвимостям. Передавайте в v-html только содержимое, которому можно доверять, и никогда — необработанный пользовательский ввод.

Пример:

v-show

Принимает: any

Использование:

Переключает CSS-свойство display элемента, в зависимости от того, истинно ли указанное выражение.

При изменении состояния этой директивы вызываются анимации, заданные в transition.

Принимает: any

Использование:

Эта директива также запускает анимационные переходы при изменении условия.

v-else

Не принимает какое-либо выражение

Использование:

v-else-if

Принимает: any

Использование:

Принимает: Array | Object | number | string | Iterable (с версии 2.6)

Использование:

Многократно отрисовывает элемент или блок шаблона, основываясь на переданных данных. Значение директивы должно следовать синтаксису alias in expression — в alias будет элемент текущей итерации:

Кроме того, вы можете указать название для индекса (или ключа, если вы работаете с объектом):

По умолчанию v-for будет пытаться обновить элементы «на месте», не перемещая их. Если вам нужно, чтобы элементы перемещались, сохраняя явную упорядоченность, укажите атрибут key :

Использование v-for подробно описано в секции руководства по ссылке ниже.

См. также:

Сокращение: @

Принимает: Function | Inline-выражение | Object

Параметр: event

Модификаторы:

Использование:

Прикрепляет к элементу подписчик события. Тип события указывается в параметре. Выражение может быть именем метода, inline-выражением или вовсе отсутствовать, если указан один или несколько модификаторов.

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

Начиная с версии 2.4.0+, v-on также поддерживает привязку к объекту пар событие/обработчик без аргумента. Обратите внимание, что при использовании синтаксиса объекта не поддерживаются никакие модификаторы.

Пример:

Подписка на пользовательское событие в дочернем элементе (обработчик вызывается, когда дочерний элемент вызывает “my-event”):

См. также:

v-bind

Сокращение: :

Принимает: any (если указан параметр) | Object (если параметр не указан)

Параметр: attrOrProp (опционально)

Модификаторы:

Использование:

Динамически связывает атрибуты тега или входной параметр компонента с выражением.

При использовании с атрибутами class и style поддерживает массивы и объекты в качестве значений. Подробнее это описано в соответствующем руководстве по ссылке ниже.

Для правильного связывания входного параметра компонента, тот должен быть корректно определён в дочернем компоненте.

Если аргумент не указан, связанное значение может быть содержащим пары имя-значение. Обратите внимание, что в этом случае атрибуты class и style не поддерживают массивы и объекты.

Пример:

См. также:

v-model

Принимает: разное, в зависимости от типа форм или выходных данных компонентов

Используется только с:

Модификаторы:

Использование:

Двусторонним образом связывает элемент ввода данных или компонент с переменной. Директива подробно описана в руководстве по ссылке ниже.

См. также:

v-slot

Сокращение: #

Принимает: JavaScript выражение, допустимое в позиции аргумента (можно использовать деструктуризацию в поддерживаемых окружениях). Опционально — требуется только в случае, когда используются входные параметры у слота.

Параметр: имя слота (опционально, по умолчанию default )

Ограничение:

Использование:

Указывает именованные слоты или слоты с входными параметрами.

Пример:

Более подробно можно изучить по ссылкам ниже.

См. также:

Не принимает какое-либо выражение

Использование:

Пример:

v-cloak

Не принимает какое-либо выражение

Использование:

Эта директива останется на элементе до тех пор, пока связанный с ним экземпляр Vue не закончит компиляцию. В сочетании с CSS-правилом [v-cloak] < display: none >этой директивой можно скрывать не скомпилированные шаблоны до тех пор, пока экземпляр Vue не будет готов.

Пример:

v-once

Не принимает какое-либо выражение

Использование:

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

См. также:

Специальные атрибуты

Принимает: number | string | boolean (с версии 2.4.2) | symbol (с версии 2.5.12)

Атрибут key помогает алгоритму работы с виртуальным DOM определить, какие ноды соответствует какой строке данных. Если этот атрибут не указан, Vue использует алгоритм, минимизирующий перемещение элементов и старается обновить и повторно использовать как можно больше элементов правильного типа «на местах». А если ключ указан, Vue изменяет порядок следования элементов, основываясь на изменении порядка ключей. Элементы, соответствующие ключам, которых больше нет, Vue всегда уничтожает.

Потомки одного и того же общего родителя должны иметь уникальные ключи. Повторяющиеся ключи приведут к ошибкам при отрисовке.

Как правило, используется в связке с v-for :

Можно также применить эту директиву, чтобы элемент всегда заменялся на новый, а не переиспользовался. Это может помочь, если вы хотите:

Принимает: string

Принимает: string | Object (объект с настройками компонента)

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

См. также:

slot устарело

Предпочитайте использовать v-slot в 2.6.0+.

Принимает: string

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

Подробнее в руководстве по ссылке ниже.

slot-scope устарело

Предпочитайте использовать v-slot в 2.6.0+.

Принимает: выражение аргумента функции

Использование:

Используется для обозначения элемента или компонента в качестве слота с ограниченной областью видимости. Значением атрибута должно быть валидное выражение JavaScript, которое может использоваться в качестве аргумента сигнатуры функции. Это означает, что в поддерживаемых окружениях вы также можете использовать деструктурирование ES2015 в выражении. Служит заменой для scope в версии 2.5.0+.

Этот атрибут не поддерживает динамические привязки.

scope удалено

Заменён на slot-scope в 2.5.0+. Предпочитайте использовать v-slot в 2.6.0+.

Используется для обозначения элемента в качестве слота с ограниченной областью видимости, который заменён на slot-scope в версии 2.5.0+.

Использование:

Встроенные компоненты

component

Входные параметры:

Использование:

«Метакомпонент» для отрисовки динамических компонентов. Настоящий компонент для отрисовки определяется параметром is :

transition

Входные параметры:

События:

Использование:

Указывает анимацию перехода для одного элемента или компонента. не порождает дополнительного элемента DOM при отрисовке, и не отображается в иерархии компонентов в инспекторе. Этот компонент просто применяет поведение перехода к своему содержимому.

transition-group

Входные параметры:

События:

Использование:

Обратите внимание, что каждый потомок должен иметь уникальное значение key, чтобы анимации работали корректно.

keep-alive

Props:

Использование:

Когда компонент, расположенный внутри показывается или скрывается, вызываются его хуки жизненного цикла activated или deactivated соответственно.

В версии 2.2.0+, activated и deactivated будет срабатывать для всех вложенных компонентов внутри дерева.

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

include и exclude

Входные параметры include и exclude позволяют организовать условное кэширование компонентов. Оба параметра можно указать в виде строки со списком имён компонентов через запятую, регулярным выражением или массивом:

Проверяется сначала собственное значение опции name компонента, а в случае его недоступности — имя, указанное при локальной регистрации (ключ в опции components компонента-родителя). Анонимные компоненты таким образом проверить не получится.

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

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

Входные параметры:

Использование:

— элемент, чьё содержимое будет распределено в шаблон компонента. Сам элемент при отрисовке заменяется.

Подробнее этот механизм описан в руководстве по ссылке ниже.

Источник