Общие команды и инструкции, которые вы будете использовать в повседневных сеансах программирования на Vue.js.
- Директивы
- Работа с элементами формы
- Изменение событий
- Модификаторы событий мыши
- Отправлять событие, только если нажата определенная клавиша
- Модификаторы событий клавиатуры
- Крючки жизненного цикла
- Встроенные компоненты
- Глобальная конфигурация объекта Vue
- Методы объекта Vue
- Параметры, переданные объекту Vue
- Свойства экземпляра
Директивы
Директивы - это атрибуты, определяемыеv-
префикс.
Директива | Описание |
---|---|
v-text |
использует свойство как текстовое значение элемента |
v-html |
использует свойство как текстовое значение элемента, интерпретируя HTML |
v-if |
показывать элемент, только если условие истинно |
v-else |
показывает альтернативный элемент, если предыдущийv-if ложно |
v-else-if |
добавляет блок else if дляv-if строить |
v-show |
похожий наv-if , но добавляет элемент в DOM, даже если он является ложным. Просто установите его наdisplay: none . |
v-for |
выполняет итерацию по массиву или повторяемому объекту |
v-on |
слушать события DOM |
v-bind |
реактивно обновить атрибут HTML |
v-model |
устанавливает двустороннюю привязку для входных данных формы. используется в элементах формы, обновляет модель, когда пользователь изменяет значение поля формы |
v-once |
применяет свойство только один раз и никогда не обновляет его, даже если переданные данные изменяются |
v-bind
иv-on
иметь сокращенный формат:
<a v-bind:href="url">...</a>
<a :href="url">...</a>
<a v-on:click="doSomething">...</a>
<a @click="doSomething">...</a>
Примерv-if
/v-else
/v-else-if
:
<div v-if="type === 'A'">
it's A
</div>
<div v-else-if="type === 'B'">
it's B
</div>
<div v-else-if="type === 'C'">
it's C
</div>
<div v-else>
it's neither one
</div>
Условные
Вы можете встроить условное выражение в выражение, используя тернарный оператор:
{{ isTrue ? 'yes' : 'no' }}
Работа с элементами формы
Чтобы модель обновлялась, когда происходит событие изменения, а не каждый раз, когда пользователь нажимает клавишу, вы можете использоватьv-model.lazy
вместо простоv.model
.
Работа с полями ввода,v-model.trim
полезно, потому что автоматически удаляет пробелы.
И если вы принимаете число вместо строки, убедитесь, что вы используетеv-model.number
.
Изменение событий
я используюclick
в качестве примера, но относится ко всем возможным событиям
v-on:click.native
запускать собственное событие DOM вместо события Vuev-on:click.stop
остановить распространение события кликаv-on:click.passive
используетпассивная опция addEventListenerv-on:click.capture
использовать захват событий вместо всплытия событийv-on:click.self
убедитесь, что событие щелчка не произошло из дочернего события, а произошло непосредственно с этим элементомv-on:click.once
событие будет срабатывать только один разv-on:submit.prevent
: вызовevent.preventDefault()
при инициированном событии отправки, используется, чтобы избежать отправки формы для перезагрузки страницы
Для получения дополнительной информации о распространении, пузырчатой / захватывающей информации см. МойРуководство по событиям JavaScript.
Модификаторы событий мыши
v-on:click .left
срабатывает только при нажатии левой кнопки мышиv-on:click .right
срабатывает только по щелчку правой кнопкой мышиv-on:click .middle
срабатывает только при нажатии средней кнопки мыши
Отправлять событие, только если нажата определенная клавиша
v-on:keyup.enter
v-on:keyup.tab
v-on:keyup.delete
v-on:keyup.esc
v-on:keyup.up
v-on:keyup.down
v-on:keyup.left
v-on:keyup.right
Модификаторы событий клавиатуры
Запускать событие только в том случае, если также нажата определенная клавиша клавиатуры:
.ctrl
.alt
.shift
.meta
(cmd на Mac, клавиша Windows на Win)
v-привязка
v-bind .prop
привязать опору вместо атрибутаv-bind .camel
используйте camelCase для имени атрибутаv-bind .sync
синтаксический сахар, который превращается вv-on
обработчик обновления привязанного значения. Видетьэто.
Крючки жизненного цикла
beforeCreate
вызывается до создания приложенияcreated
вызывается после создания приложенияbeforeMount
вызывается до того, как приложение будет установлено в DOMmounted
вызывается после того, как приложение установлено в DOMbeforeDestroy
вызывается до того, как приложение будет уничтоженоdestroyed
вызывается после уничтожения приложенияbeforeUpdate
вызывается перед обновлением свойстваupdated
вызывается после обновления свойстваactivated
вызывается, когда активируется поддерживаемый компонентdeactivated
вызывается при деактивации поддерживаемого компонента
Встроенные компоненты
Vue предоставляет 5 встроенных компонентов:
<component>
<transition>
<transition-group>
<keep-alive>
<slot>
Глобальная конфигурация объекта Vue
ВVue.config
объект имеет следующие свойства, которые вы можете изменить при создании экземпляра:
Свойство | Описание |
---|---|
silent |
по умолчанию false, если true подавлять журналы и предупреждения |
optionMergeStrategies |
позволяет определитьиндивидуальная стратегия слияниядля вариантов |
devtools |
по умолчанию true при разработке и false при производстве. Вы можете переопределить эти значения. |
errorHandler |
позволяет установить функцию обработчика ошибок. Полезно для подключения Sentry и других подобных сервисов |
warnHandler |
позволяет установить функцию обработчика предупреждений, аналогичнуюerrorHandler , но для предупреждений вместо ошибок |
ignoredElements |
используется, чтобы позволить Vue игнорировать пользовательские элементы, определенные вне его, напримерВеб-компоненты. |
keyCodes |
позволяют вам определять пользовательские ключевые псевдонимы дляv-on |
performance |
по умолчанию false. Если установлено значение true, отслеживает производительность компонентов Vue в браузере DevTools. |
productionTip |
по умолчанию true. Установите значение false, чтобы отключить предупреждение «вы находитесь в режиме разработки» во время разработки в консоли. |
Методы объекта Vue
Метод | Описание |
---|---|
Vue.extend |
позволяет создать подкласс объекта Vue, чтобы создать собственный профиль |
Vue.nextTick |
откладывает выполнение обратного вызова после следующего цикла обновления DOM |
Vue.set |
добавить свойство к объекту |
Vue.delete |
удалить свойство из объекта |
Vue.directive |
установить (или получить) глобальную директиву |
Vue.filter |
установить (или получить) глобальный фильтр |
Vue.component |
установить (или получить) глобальный компонент |
Vue.use |
установить плагин Vue.js |
Vue.mixin |
установить глобальный миксин |
Vue.compile |
скомпилировать строку шаблона в функцию рендеринга |
Vue.version |
возвращает текущую установленную версию Vue |
Параметры, переданные объекту Vue
При инициализации объекта Vue вы передаете объект:
const vm = new Vue({
})
Этот объект принимает ряд свойств.
Свойство | Описание |
---|---|
data |
позволяет передавать набор реактивных данных, которые будут использоваться приложением Vue. Все реактивные свойства должны быть добавлены во время инициализации, вы не можете добавить новые позже. |
props |
это набор атрибутов, которые предоставляются родительским компонентам в качестве входных данных. |
propsData |
данные по умолчанию для реквизита. Полезно только во время тестирования |
methods |
набор методов, определенных в экземпляре Vue |
computed |
как методы, но кешируются внутри |
watch |
позволяет просматривать свойства и вызывать функцию при их изменении |
Пример определения данных, методов и вычисляемых свойств:
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
methods: {
reverseMessageAsMethod: function () {
return this.message.split('').reverse().join('')
}
},
computed: {
// a computed getter
reversedMessage: function () {
// `this` points to the vm instance
return this.message.split('').reverse().join('')
}
}
})
console.log(vm.reverseMessageAsMethod) // => ‘olleH’
vm.message = ‘Goodbye’
console.log(vm.reversedMessage) // => ‘eybdooG’
ДОМ
el
устанавливает элемент DOM, на котором монтируется экземпляр. Это может быть селектор CSS или HTMLElement.template
шаблон, представленный в виде строки, который заменит смонтированный элементrender
в качестве альтернативы для определения шаблона вы можете определить шаблон с помощью функции рендерингаrenderError
установить альтернативный выход, когда функция, прикрепленная кrender
терпит неудачу
Ресурсы экземпляра Vue
directives
набор директив для связи с экземпляром Vuefilters
набор фильтров для связи с экземпляром Vuecomponents
набор компонентов, которые нужно связать с экземпляром Vue
Параметры композиции Vue
parent
указывает родительский экземплярmixins
устанавливает массив объектов миксинаextends
расширить другой компонент
Другие параметры объекта Vue
name
установка имени для компонента позволяет вам вызывать его, что полезно при отладке или когда вам нужно рекурсивно добавить компонент в его шаблонfunctional
если true, устанавливает компонент без состояния (нетdata
) и без экземпляров (нетthis
), что делает его более легкимmodel
позволяет настроить свойство, используемое в событиях, полезно, например, при взаимодействии с формамиcomments
по умолчанию false. Если установлено значение true, сохраняет HTML-комментарии, помещенные в шаблоны.
Свойства экземпляра
Учитывая экземпляр Vue, сохраненный в переменнойconst vm = new Vue(/*...*/)
, вы можете просматривать его и взаимодействовать с ним.
Свойства экземпляра Vue
vm.$data
объект данных, связанный с экземпляромvm.$props
реквизит, который получил экземплярvm.$el
элемент DOM, к которому привязан экземплярvm.$options
объект, используемый для создания экземпляра Vuevm.$parent
родительский экземплярvm.$root
корневой экземпляр (если это корневой экземпляр, это указывает на себя)vm.$children
массив дочерних экземпляровvm.$slots
массив связанных слотов, содержащихся в шаблонеvm.$scopedSlots
массив связанных слотов с заданной областью действияvm.$refs
объект, содержащий свойство для каждого элемента, на который указываетref
атрибут, определенный в шаблонеvm.$isServer
истина, если экземпляр Vue запущен на сервере (полезно при рендеринге на стороне сервера)vm.$attrs
объект атрибутов, которые предоставляются компоненту, но не определены как свойстваvm.$listeners
объектv-on
прослушиватели событий, назначенные компоненту
Данные о методах
vm.$watch
настроить наблюдатель для изменений свойств в данных Vue. Он также может следить за изменениями значений внутри объектов.vm.$set
установить свойствоvm.$delete
удалить собственность
События
vm.$emit
запускает настраиваемое событие наvm
Экземпляр Vuevm.$on
прослушивать настраиваемое событие наvm
Экземпляр Vuevm.$once
подобно$on
, но слушает только один разvm.$off
удаляет прослушиватель событий из экземпляра Vue
Методы жизненного цикла
vm.$mount
смонтировать экземпляр Vue на элементе DOM, если он еще не смонтированvm.$forceUpdate
заставитьvm
Экземпляр Vue для повторного рендеринга. Не вызывает повторную визуализацию дочерних компонентов.vm.$nextTick
принимает обратный вызов и планирует его для следующего цикла обновления DOMvm.$destroy
уничтожает приложение и удаляет все дочерние компоненты, наблюдателей и слушателей
Скачать мою бесплатнуюСправочник по Vue
Больше руководств по vue:
- Обзор Vue.js
- Интерфейс командной строки Vue.js: узнайте, как его использовать
- Инструменты разработчика Vue.js
- Настройка VS Code для разработки Vue
- Создайте свое первое приложение с Vue.js
- Однофайловые компоненты Vue.js
- Шаблоны и интерполяции Vue.js
- Директивы Vue.js
- Методы Vue.js
- Вычисляемые свойства Vue.js
- Стилизация компонентов Vue.js с помощью CSS
- Наблюдатели Vue.js
- Методы Vue против наблюдателей против вычисляемых свойств
- Фильтры Vue.js
- Компоненты Vue.js
- Слоты Vue.js
- Свойства компонента Vue.js
- События Vue.js
- Связь компонентов Vue.js
- Vuex, государственный менеджер Vue.js
- Vue, используйте компонент внутри другого компонента
- Vue, как использовать опору в качестве имени класса
- Как использовать SCSS с однофайловыми компонентами Vue.js
- Использование Tailwind с Vue.js
- Маршрутизатор Vue
- Динамически отображать компонент Vue
- Шпаргалка по Vue.js
- Храните данные Vue в localStorage с помощью Vuex
- Как динамически применять класс с помощью Vue
- Vue, как использовать v-модель
- Vue, почему данные должны быть функцией
- Roadmap to become a Vue.js developer in 2020