Skip to content

Latest commit

 

History

History
2724 lines (1839 loc) · 133 KB

index.md

File metadata and controls

2724 lines (1839 loc) · 133 KB
Raw
title type
API
api

Глобальные параметры

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

silent

  • Тип: boolean

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

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

    Vue.config.silent = true

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

optionMergeStrategies

  • Тип: { [key: string]: Function }

  • По умолчанию: {}

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

    Vue.config.optionMergeStrategies._my_option = function (parent, child, vm) {
  return child + 1
}

const Profile = Vue.extend({
  _my_option: 1
})

// Profile.options._my_option = 2

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

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

  • См. также: Пользовательские стратегии слияния опций

devtools

  • Тип: boolean

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

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

    // убедитесь, что устанавливаете свойство синхронно сразу после загрузки Vue
Vue.config.devtools = true

    Определяет, должен ли Vue разрешать vue-devtools проводить инспекцию. Значение по умолчанию для разработки — true, для production — false. Установите true, чтобы vue-devtools работали и в production.

errorHandler

  • Тип: Function

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

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

    Vue.config.errorHandler = function (err, vm, info) {
  // Обработка ошибки. В `info` подробности Vue-специфичной ошибки,
  // например, в каком хуке жизненного цикла произошла ошибка.
  // Доступно только в версиях 2.2.0+
}

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

    В версиях 2.2.0+, этот хук также отслеживает ошибки в хуках жизненного цикла компонентов. Кроме того, если установлено значение undefined, отловленные ошибки будут выведены через console.error вместо остановки приложения.

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

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

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

warnHandler

Добавлено в версии 2.4.0+

  • Тип: Function

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

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

    Vue.config.warnHandler = function (msg, vm, trace) {
  // `trace` — это трассировка иерархии компонентов
}

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

ignoredElements

  • Тип: Array<string | RegExp>

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

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

    Vue.config.ignoredElements = [
  'my-custom-web-component',
  'another-web-component',
  // Используйте `RegExp` для игнорирования элементов, начинающихся с «ion-»
  // Добавлено в версии 2.5.0+
  /^ion-/
]

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

keyCodes

  • Тип: { [key: string]: number | Array<number> }

  • По умолчанию: {}

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

    Vue.config.keyCodes = {
  v: 86,
  f1: 112,
  // camelCase НЕ БУДЕТ РАБОТАТЬ
  mediaPlayPause: 179,
  // используйте kebab-case в двойных кавычках
 "media-play-pause": 179,
  up: [38, 87]
}
    <input type="text" @keyup.media-play-pause="method">

    Определение пользовательских псевдонимов кодов клавиш для директивы v-on.

performance

Добавлено в версии 2.2.0+

  • Тип: boolean

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

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

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

productionTip

Добавлено в версии 2.2.0+

  • Тип: boolean

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

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

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

Глобальный API

Vue.extend( options )

  • Аргументы:

    • {Object} options

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

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

    Внимание: у объекта, передаваемого в Vue.extend(), свойство data должно быть функцией.

    <div id="mount-point"></div>
    // Создание конструктора
var Profile = Vue.extend({
  template: '<p>{{firstName}} {{lastName}}, также известный как {{alias}}</p>',
  data: function () {
    return {
      firstName: 'Уолтер',
      lastName: 'Уайт',
      alias: 'Гейзенберг'
    }
  }
})
// создаёт экземпляр Profile и монтирует его к элементу DOM
new Profile().$mount('#mount-point')

    Результатом будет:

    <p>Уолтер Уайт, также известный как Гейзенберг</p>

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

Vue.nextTick( [callback, context] )

  • Аргументы:

    • {Function} [callback]
    • {Object} [context]

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

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

    // изменение данных
vm.msg = 'Привет'
// DOM ещё не обновлён
Vue.nextTick(function () {
  // теперь DOM обновлён
})

// использование с Promise (добавлено в 2.1.0+, см. примечание ниже)
Vue.nextTick()
  .then(function () {
    // DOM обновлён
  })

    Добавлено в версии 2.1.0+: функция возвращает Promise, когда не указан коллбэк и они поддерживаются окружением. Обратите внимание, Vue не поставляется с полифилом для Promise. Если требуется поддержка браузеров, которые не поддерживают их нативно (например, IE), необходимо предоставить полифил самостоятельно.

  • См. также: Асинхронная очередь обновлений

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

  • Аргументы:

    • {Object | Array} target
    • {string | number} propertyName/index
    • {any} value

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

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

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

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

  • См. также: Подробно о реактивности

Vue.delete( target, propertyName/index )

  • Аргументы:

    • {Object| Array} target
    • {string | number} propertyName/index

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

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

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

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

  • См. также: Подробно о реактивности

Vue.directive( id, [definition] )

  • Аргументы:

    • {string} id
    • {Function | Object} [definition]

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

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

    // регистрируем директиву-объект:
Vue.directive('my-directive', {
  bind: function () {},
  inserted: function () {},
  update: function () {},
  componentUpdated: function () {},
  unbind: function () {}
})

// регистрируем директиву в виде простой функции:
Vue.directive('my-directive', function () {
  // Vue будет вызывать эту функцию для `bind` и `update`
})

// получаем определение директивы, если она зарегистрирована:
var myDirective = Vue.directive('my-directive')

  • См. также: Пользовательские директивы

Vue.filter( id, [definition] )

  • Аргументы:

    • {string} id
    • {Function} [definition]

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

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

    // регистрируем фильтр:
Vue.filter('my-filter', function (value) {
  // возвращаем обработанное значение
})

// получаем фильтр, если он зарегистрирован:
var myFilter = Vue.filter('my-filter')

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

Vue.component( id, [definition] )

  • Аргументы:

    • {string} id
    • {Function | Object} [definition]

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

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

    // регистрируем конструктор, полученный из `Vue.extend`:
Vue.component('my-component', Vue.extend({ /* ... */ }))

// регистрируем объект с опциями
// (Vue вызовет для этого объекта `Vue.extend` автоматически):
Vue.component('my-component', { /* ... */ })

// получаем зарегистрированный компонент (всегда возвращает конструктор):
var MyComponent = Vue.component('my-component')

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

Vue.use( plugin )

  • Аргументы:

    • {Object | Function} plugin

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

    Устанавливает плагин Vue.js. Если плагин — объект, у него должен быть публичный метод install. Если плагин — функция, она будет воспринята как метод install. Этот метод будет выполнен с Vue в качестве аргумента.

    Этот метод необходимо вызывать перед new Vue().

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

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

Vue.mixin( mixin )

  • Аргументы:

    • {Object} mixin

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

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

  • См. также: Глобальные примеси

Vue.compile( template )

  • Аргументы:

    • {string} template

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

    Компилирует строковый шаблон в render-функцию. Доступно только в полной сборке.

    var res = Vue.compile('<div><span>{{ msg }}</span></div>')

new Vue({
  data: {
    msg: 'hello'
  },
  render: res.render,
  staticRenderFns: res.staticRenderFns
})

  • См. также: Render-функции и JSX

Vue.observable( object )

Добавлено в версии 2.6.0+

  • Аргументы:

    • {Object} object

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

    Создание реактивного объекта. Внутренне Vue реализует подобное для объекта, возвращаемого функцией data.

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

    const state = Vue.observable({ count: 0 })
 const Demo = {
  render(h) {
    return h('button', {
      on: { click: () => { state.count++ }}
    }, `счётчик — ${state.count}`)
  }
}

    В версии Vue 2.x, `Vue.observable` напрямую мутирует передаваемый ему объект, поэтому он эквивалентен возвращаемому объекту, как [продемонстрировано здесь](../guide/instance.html#Данные-и-методы). В Vue 3.x уже будет возвращаться реактивный прокси, оставляя исходный объект нереактивным при изменениях напрямую. Поэтому, для будущей совместимости, рекомендуем всегда работать с объектом, возвращаемым `Vue.observable`, а не с объектом переданным ему изначально.

  • См. также: Подробно о реактивности

Vue.version

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

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

    var version = Number(Vue.version.split('.')[0])

if (version === 2) {
  // Vue v2.x.x
} else if (version === 1) {
  // Vue v1.x.x
} else {
  // Неподдерживамые версии Vue
}

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

data

  • Тип: Object | Function

  • Ограничение: При создании компонента, может быть только тип Function.

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

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

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

    После создания экземпляра, объект с данными доступен через vm.$data. Экземпляр Vue также проксирует все свойства объекта, поэтому vm.a аналогично vm.$data.a.

    Свойства, имена которых начинаются с _ или $, не будут проксироваться из-за возможных конфликтов с внутренними свойствами и методами API Vue. Получить доступ к таким свойствам можно через vm.$data._property.

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

    Чтобы сделать полную копию оригинального объекта, передайте vm.$data в JSON.parse(JSON.stringify(...)).

  • Пример:

    var data = { a: 1 }

// создаём экземпляр напрямую:
var vm = new Vue({
  data: data
})
vm.a // => 1
vm.$data === data // => true

// обязательно используйте функцию во `Vue.extend()`:
var Component = Vue.extend({
  data: function () {
    return { a: 1 }
  }
})

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

    data: vm => ({ a: vm.myProp })

  • См. также: Подробно о реактивности

props

  • Тип: Array<string> | Object

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

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

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

    • type: может быть одним из следующих нативных конструкторов: String, Number, Boolean, Array, Object, Date, Function, Symbol, любой функцией пользовательского конструктора или массивов таких. Проверяет является ли входной параметр указанного типа и выдаёт предупреждение если нет. Подробнее в разделе указания типов входных параметров.
    • default: any Определяет значение по умолчанию для входного параметра. Если входной параметр не был передан, то будет использовано это значение. Для объекта или массива значение по умолчанию нужно указывать фабричной функцией, возвращающей объект или массив.
    • required: Boolean Определяет является ли входной параметр обязательным. В не-production окружениях будет выведено предупреждение в консоли, если значение истинно, а входной параметр не передавался.
    • validator: Function Пользовательская функция валидации, которая принимает входной параметр в качестве единственного аргумента. В не-production окружениях будет выведено предупреждение в консоли, если эта функция возвращает ложное значение (т.е. валидация не пройдена). Подробнее о валидации входных параметров можно прочитать здесь.

  • Пример:

    // простая форма записи:
Vue.component('props-demo-simple', {
  props: ['size', 'myMessage']
})

// объект с указанием правил валидации:
Vue.component('props-demo-advanced', {
  props: {
    // только проверка типа
    height: Number,
    // проверка типа и другие правила валидации
    age: {
      type: Number,
      default: 0,
      required: true,
      validator: function (value) {
        return value >= 0
      }
    }
  }
})

  • См. также: Входные параметры

propsData

  • Тип: { [key: string]: any }

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

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

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

  • Пример:

    var Comp = Vue.extend({
  props: ['msg'],
  template: '<div>{{ msg }}</div>'
})

var vm = new Comp({
  propsData: {
    msg: 'привет'
  }
})

computed

  • Тип: { [key: string]: Function | { get: Function, set: Function } }

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

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

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

    computed: {
  aDouble: vm => vm.a * 2
}

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

  • Пример:

    var vm = new Vue({
  data: { a: 1 },
  computed: {
    // если свойство только возвращает данные, достаточно простой функции:
    aDouble: function () {
      return this.a * 2
    },
    // свойство и возвращает, и получает данные:
    aPlus: {
      get: function () {
        return this.a + 1
      },
      set: function (v) {
        this.a = v - 1
      }
    }
  }
})
vm.aPlus   // => 2
vm.aPlus = 3
vm.a       // => 2
vm.aDouble // => 4

  • См. также: Вычисляемые свойства

methods

  • Тип: { [key: string]: Function }

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

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

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

  • Пример:

    var vm = new Vue({
  data: { a: 1 },
  methods: {
    plus: function () {
      this.a++
    }
  }
})
vm.plus()
vm.a // 2

  • См. также: Обработка событий

watch

  • Тип: { [key: string]: string | Function | Object | Array }

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

    Объект, ключи которого — выражения для наблюдения, а значения — коллбэки, вызываемые при их изменении. Значения также могут быть строками с именами методов, или объектами, содержащими дополнительные опции. Экземпляр Vue вызовет $watch() соответствующий каждому ключу объекта при своём создании.

  • Пример:

    var vm = new Vue({
  data: {
    a: 1,
    b: 2,
    c: 3,
    d: 4,
    e: {
      f: {
        g: 5
      }
    }
  },
  watch: {
    a: function (val, oldVal) {
      console.log('новое значение: %s, старое значение: %s', val, oldVal)
    },
    // строка с именем метода:
    b: 'someMethod',
    // Коллбэк будет вызываться каждый раз, когда изменяется любое из свойств
    // наблюдаемого объекта, независимо от глубины их вложенности
    c: {
      handler: function (val, oldVal) { /* ... */ },
      deep: true
    },
    // коллбэк будет вызван сразу же после начала наблюдения
    d: {
      handler: 'someMethod',
      immediate: true
    },
    // можно передать массив коллбэков, они будут вызываться один за одним
    e: [
      'handle1',
      function handle2 (val, oldVal) { /* ... */ },
      {
        handler: function handle3 (val, oldVal) { /* ... */ },
        /* ... */
      }
    ],
    // отслеживание значения `vm.e.f`: {g: 5}
    'e.f': function (val, oldVal) { /* ... */ }
  }
})
vm.a = 2 // => новое значение: 2, старое значение: 1

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

  • См. также: Методы экземпляра — vm.$watch

Опции — DOM

el

  • Тип: string | Element

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

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

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

    После монтирования экземпляра, переданный или найденный по CSS-селектору элемент будет доступен через vm.$el.

    Если эта опция указана при создании экземпляра, компиляция начинается сразу. В остальных случаях, вызовите vm.$mount(), чтобы запустить компиляцию.

    Предоставленный элемент служит только точкой монтирования. В отличие от Vue 1.x, он обязательно будет заменяться DOM-ом, сгенерированным Vue. Поэтому не стоит монтировать в корневые элементы `` или ``.

    Если не указана `render`-функция и отсутствует опция `template`, то в качестве шаблона будет использовано HTML-содержимое DOM-элемента точки монтирования. В этом случае требуется сборка Runtime + Компилятор.

  • См. также:

template

  • Тип: string

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

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

    Если строка начинается с #, она будет использована как querySelector, а в качестве строкового шаблона использоваться innerHTML элемента с указанным id. Таким образом можно подключать шаблоны из тегов <script type="x-template">.

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

    Если в опциях Vue указана `render`-функция, шаблон будет проигнорирован.

  • См. также:

render

  • Тип: (createElement: () => VNode) => VNode

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

    Альтернатива строковым шаблонам, позволяющая использовать все алгоритмические возможности JavaScript. Render-функция получает первым аргументом метод createElement, необходимый для создания элементов VNode (виртуальных нод).

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

    Функция в опции `render` имеет приоритет над `render`-функцией, скомпилированной из опции `template` и над HTML-шаблоном расположенным в точке монтирования, указанной в опции `el`.

  • См. также: Render-функции и JSX

renderError

Добавлено в версии 2.2.0+

  • Тип: (createElement: () => VNode, error: Error) => VNode

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

    Работает только в режиме разработки.

    Предоставляет альтернативное отображение если render-функция встречается с ошибкой. Ошибка будет передана в renderError в качестве второго аргумента. Это может пригодиться при использовании вместе с горячей перезагрузкой модулей.

  • Пример:

    new Vue({
  render (h) {
    throw new Error('oops')
  },
  renderError (h, err) {
    return h('pre', { style: { color: 'red' }}, err.stack)
  }
}).$mount('#app')

  • См. также: Render-функции и JSX

Опции — хуки жизненного цикла

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

Все хуки жизненного цикла автоматически привязывают контекст `this` к экземпляру Vue, чтобы получить доступ к данным, вычисляемым свойствами и методами. __Не используйте стрелочные функции для определения хуков жизненного цикла__ (например, `created: () => this.fetchTodos()`). Поскольку стрелочные функции связываются с родительским контекстом, `this` будет указывать не на экземпляр Vue, и `this.fetchTodos` окажется неопределённым.

beforeCreate

  • Тип: Function

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

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

  • См. также: Диаграмма жизненного цикла

created

  • Тип: Function

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

    Вызывается синхронно сразу после создания экземпляра. На этом этапе экземпляр закончил обработку опций и настроил наблюдение за данными, вычисляемые свойства, методы, коллбэки слежения и событий. Однако, фаза монтирования ещё не начата, и свойство $el ещё не доступно.

  • См. также: Диаграмма жизненного цикла

beforeMount

  • Тип: Function

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

    Вызывается перед началом монтирования, перед первым вызовом функции render.

    Не вызывается при отрисовке на стороне сервера.

  • См. также: Диаграмма жизненного цикла

mounted

  • Тип: Function

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

    Вызывается сразу после монтирования экземпляра, когда взамен el создан vm.$el. Если корневой экземпляр смонтирован на элемент документа, vm.$el тоже будет элементом документа.

    Обратите внимание, что mounted не гарантирует что все дочерние компоненты будут уже примонтированы. Если необходимо подождать пока не будут отрисованы все дочерние, можно воспользоваться vm.$nextTick внутри mounted:

    mounted: function () {
  this.$nextTick(function () {
    // Код, который будет запущен только после
    // отображения всех представлений
  })
}

    Не вызывается при отрисовке на стороне сервера.

  • См. также: Диаграмма жизненного цикла

beforeUpdate

  • Тип: Function

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

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

    Не вызывается при отрисовке на стороне сервера, потому что на сервере выполняется только начальная отрисовка.

  • См. также: Диаграмма жизненного цикла

updated

  • Тип: Function

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

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

    DOM компонента будет уже обновлён к моменту вызова этого хука, поэтому вы можете выполнять здесь операции связанные с DOM. Тем не менее, старайтесь избегать изменения состояния в этом хуке. Для реагирования на изменения состояния лучше использовать вычисляемые свойства или отслеживание с помощью watch.

    Обратите внимание, что updated не гарантирует что все дочерние компоненты будут уже переотрисованы. Если необходимо подождать пока все не будут повторно отрисованы, можно воспользоваться vm.$nextTick внутри updated:

    updated: function () {
  this.$nextTick(function () {
    // Код, который будет запущен только после
    // обновления всех представлений
  })
}

    Не вызывается при отрисовке на стороне сервера.

  • См. также: Диаграмма жизненного цикла

activated

deactivated

beforeDestroy

  • Тип: Function

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

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

    Не вызывается при отрисовке на стороне сервера.

  • См. также: Диаграмма жизненного цикла

destroyed

  • Тип: Function

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

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

    Не вызывается при отрисовке на стороне сервера.

  • См. также: Диаграмма жизненного цикла

errorCaptured

Добавлено в версии 2.5.0+

  • Тип: (err: Error, vm: Component, info: string) => ?boolean

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

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

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

    Правила распространения ошибок

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

    • Если существует несколько хуков errorCaptured в цепочке наследования компонента или родительской цепочке, то все они будут вызваны с той же ошибкой.

    • Если сам хук errorCaptured выбрасывает ошибку, то обе этих ошибки (зафиксированная и выброшенная хуком) будут отправлены в глобальный обработчик config.errorHandler.

    • Хук errorCaptured может возвращать false чтобы предотвратить дальнейшее распространение ошибки. Это по существу означает «эта ошибка была обработана и её следует игнорировать». Это предотвратит вызов дополнительных хуков errorCaptured или глобального обработчика config.errorHandler для этой ошибки.

Опции — ресурсы

directives

filters

  • Тип: Object

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

    Хэш фильтров, доступных экземпляру Vue.

  • См. также: Vue.filter

components

  • Тип: Object

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

    Хэш компонентов, доступных экземпляру Vue.

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

Опции — композиция

parent

  • Тип: экземпляр Vue

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

    Определяет родительский экземпляр для создаваемого. Устанавливает отношение «родитель-потомок» между ними. Родитель будет доступен дочернему экземпляру посредством this.$parent, а дочерний экземпляр будет добавлен в массив $children родителя.

    Старайтесь реже использовать `$parent` и `$children` — этот механизм мы предусмотрели на крайний случай. Для общения между родителем и ребёнком лучше использовать входные параметры и события.

mixins

  • Тип: Array<Object>

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

    Массив объектов-примесей. Примеси могут содержать те же опции, что и обычные объекты экземпляров Vue — они будут добавлены к основным опциям согласно логике Vue.extend(). Например, если и примесь и объект экземпляра содержат хук created, то будут вызваны оба.

    Хуки примесей вызываются в порядке их определения, до вызова собственных хуков компонента.

  • Пример:

    var mixin = {
  created: function () { console.log(1) }
}
var vm = new Vue({
  created: function () { console.log(2) },
  mixins: [mixin]
})
// => 1
// => 2

  • См. также: Примеси

extends

  • Тип: Object | Function

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

    Позволяет декларативно наследоваться от другого компонента (который может быть либо простым объектом, либо конструктором), не используя Vue.extend. Главным образом предназначено для облегчения наследования между компонентами, определёнными в одном файле.

    Эта функциональность аналогична mixins.

  • Пример:

    var CompA = { ... }

// наследуем от CompA, не вызывая `Vue.extend`:
var CompB = {
  extends: CompA,
  ...
}

provide / inject

Добавлено в версии 2.2.0+

  • Тип:

    • provide: Object | () => Object
    • inject: Array<string> | { [key: string]: string | Symbol | Object }

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

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

    Опция provide должна быть объектом или функцией, возвращающей объект. Этот объект содержит свойства, которые будут доступны для внедрения в их потомках. Вы можете использовать ES2015 Symbols в качестве ключей этого объекта, но только в окружениях, которые нативно поддерживают Symbol и Reflect.ownKeys.

    Опция inject должна быть:

    • массивом строк, или
    • объектом, где ключи стоят для локального связывания имени, а значение является:
      • ключом (string или Symbol) для поиска в доступных инъекциях, или
      • объектом, где:
        • свойство from является ключом (string или Symbol) для поиска в доступных инъекциях, и
        • свойство default используется как резервное значение

    Примечание: привязки provide и inject НЕ РЕАКТИВНЫ. Это сделано намеренно. Тем не менее, если вы передаёте вниз отслеживаемый объект, свойства на этом объекте остаются реактивными.

  • Пример:

    // родительский компонент предоставляет доступ к 'foo'
var Provider = {
  provide: {
    foo: 'bar'
  },
  // ...
}

// дочерний компонент внедряет 'foo'
var Child = {
  inject: ['foo'],
  created () {
    console.log(this.foo) // => "bar"
  }
  // ...
}

    С помощью ES2015 Symbols, функция provide и объект inject:

    const s = Symbol()

const Provider = {
  provide () {
    return {
      [s]: 'foo'
    }
  }
}

const Child = {
  inject: { s },
  // ...
}

    Следующие два примера работают в версии Vue 2.2.1+. Ниже этой версии, внедрённые значения устанавливаются после инициализации props и data.

    Использование внедрённого значения, значением по умолчанию для входных данных:

    const Child = {
  inject: ['foo'],
  props: {
    bar: {
      default () {
        return this.foo
      }
    }
  }
}

    Использование внедрённого значения в качестве данных:

    const Child = {
  inject: ['foo'],
  data () {
    return {
      bar: this.foo
    }
  }
}

    С версии 2.5.0+ инъекции могут быть необязательными со значением по умолчанию:

    const Child = {
  inject: {
    foo: { default: 'foo' }
  }
}

    Если потребуется внедрить значение из свойства с другим именем, используйте from для обозначения свойства-источника:

    const Child = {
  inject: {
    foo: {
      from: 'bar',
      default: 'foo'
    }
  }
}

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

    const Child = {
  inject: {
    foo: {
      from: 'bar',
      default: () => [1, 2, 3]
    }
  }
}

Опции — разное

name

  • Тип: string

  • Ограничение: учитывается только при определении компонента.

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

    Название компонента. Позволяет компоненту рекурсивно вызывать самого себя в шаблоне. Обратите внимание что когда компонент регистрируется глобально посредством Vue.component(), глобальный ID автоматически устанавливается равным его имени.

    Кроме того, компоненты с указанным name проще отлаживать из-за более понятных сообщений в консоли. Во Vue-devtools все безымянные компоненты довольно неинформативно называются <AnonymousComponent>. Указание имён для компонентов значительно улучшает ситуацию.

delimiters

  • Тип: Array<string>

  • По умолчанию: {% raw %}["{{", "}}"]{% endraw %}

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

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

    Разделители, выделяющие текст для интерполяции.

  • Пример:

    new Vue({
  delimiters: ['${', '}']
})

// Разделители изменены на стиль строк-шаблонов в ES6

functional

  • Тип: boolean

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

    Превращает компонент в функциональный, то есть не имеющий собственного состояния (data) и своего экземпляра (this). Такие компоненты по сути — просто render-функция, возвращающая узлы виртуального DOM. Это сильно ускоряет их отрисовку.

  • См. также: Функциональные компоненты

model

Добавлено в версии 2.2.0+

  • Тип: { prop?: string, event?: string }

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

    Позволяет настроить входной параметр и событие, используемые для работы v-model. По умолчанию, v-model на компоненте использует входной параметр value и событие input. Но для некоторых типов полей, таких как чекбоксы и радиокнопки, может потребоваться использовать входной параметр value для других целей. Использование опции model позволит избежать конфликта в таких случаях.

  • Пример:

    Vue.component('my-checkbox', {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    // это позволит использовать входной параметр `value` для других целей
    value: String,
    // используйте `checked` в качестве параметра, который заменяет `value`
    checked: {
      type: Number,
      default: 0
    }
  },
  // ...
})
    <my-checkbox v-model="foo" value="some value"></my-checkbox>

    Указанное выше эквивалентно:

    <my-checkbox
  :checked="foo"
  @change="val => { foo = val }"
  value="some value">
</my-checkbox>

inheritAttrs

Добавлено в версии 2.4.0+

  • Тип: boolean

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

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

    По умолчанию атрибуты из родительской области видимости, которые не были распознаны как входные параметры, будут «проваливаться» и применяться к корневому элементу дочернего компонента как обычные HTML-атрибуты. При создании компонента, который оборачивает элемент или другой компонент, это не всегда может быть ожидаемым поведением. Устанавливая inheritAttrs в false, это поведение по умолчанию может быть отключено. Атрибуты доступны через свойство экземпляра $attrs (также добавленное в версии 2.4.0) и могут быть явно привязаны к некорневому элементу с использованием v-bind.

    Примечание: эта опция не влияет на привязки class и style.

comments

Добавлено в версии 2.4.0+

  • Тип: boolean

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

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

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

    Когда установлено в значение true, будут сохраняться и отрисовываться HTML-комментарии, найденные в шаблонах. Поведение по умолчанию выбрасывает их.

Свойства экземпляра

vm.$data

  • Тип: Object

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

    Объект с данными, над которым экземпляр Vue осуществляет наблюдение. Экземпляр проксирует сюда вызовы своих полей. (Например, vm.a будет указывать на vm.$data.a)

  • См. также: Опции — данные

vm.$props

Добавлено в версии 2.2.0+

  • Тип: Object

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

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

vm.$el

  • Тип: Element

  • Только для чтения

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

    Корневой элемент DOM, управляемый экземпляром Vue.

vm.$options

  • Тип: Object

  • Только для чтения

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

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

    new Vue({
  customOption: 'что-нибудь',
  created: function () {
    console.log(this.$options.customOption) // => 'что-нибудь'
  }
})

vm.$parent

  • Тип: экземпляр Vue

  • Только для чтения

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

    Экземпляр родителя, если он есть у текущего экземпляра.

vm.$root

  • Тип: экземпляр Vue

  • Только для чтения

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

    Корневой экземпляр Vue текущего дерева компонентов. Если у экземпляра нет родителя, в этом поле будет он сам.

vm.$children

  • Тип: Array<экземпляр Vue>

  • Только для чтения

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

    Компоненты-потомки экземпляра. Обратите внимание, что порядок следования элементов в $children не гарантируется, и этот массив не реактивен. Вместо того, чтобы использовать $children для связывания данных, попробуйте использовать обычный массив и директиву v-for для создания дочерних компонентов, и используйте этот массив как «источник истины».

vm.$slots

  • Тип: { [name: string]: ?Array<VNode> }

  • Только для чтения

  • Реактивны? Нет

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

    Используется для доступа к контенту, указанному через слоты. У каждого именованного слота есть соответствующее значение (например, содержимое slot="foo" попадёт в vm.$slots.foo). Свойство default содержит узлы, не включённые в именованные слоты, либо содержимое v-slot:default.

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

    Примечание: v-slot:foo поддерживается в версии v2.6+. Для более старых версий вы можете использовать устаревший синтаксис.

    Особенно полезно vm.$slots в компонентах с render-функциями.

  • Пример:

    <blog-post>
  <template v-slot:header>
    <h1>Обо мне</h1>
  </template>

  <p>Этот контент попадёт в vm.$slots.default, потому что он не в именованном слоте.</p>

  <template v-slot:footer>
    <p>Copyright 2016 Evan You</p>
  </template>

  <p>Этот контент тоже попадёт в vm.$slots.default.</p>.
</blog-post>
    Vue.component('blog-post', {
  render: function (createElement) {
    var header = this.$slots.header
    var body   = this.$slots.default
    var footer = this.$slots.footer
    return createElement('div', [
      createElement('header', header),
      createElement('main', body),
      createElement('footer', footer)
    ])
  }
})

vm.$scopedSlots

Добавлено в версии 2.1.0+

  • Тип: { [name: string]: props => Array<VNode> | undefined }

  • Только для чтения

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

    Используется для доступа к контенту, указанному через слоты с ограниченной областью видимости. Для каждого слота, включая и слот default, объект содержащий соответствующую функцию, что возвращает VNode.

    Использование vm.$scopedSlots наиболее полезно при написании компонентов с использованием render-функций.

    Примечание: начиная с версии 2.6.0+ есть два важных изменения этого свойства:

    1. Функции слотов с ограниченной областью видимости теперь гарантированно возвращают массив VNodes, за исключением когда возвращаемое свойство является недействительным, в таком случае функция вернёт undefined.

    2. Все $slots теперь также доступны в $scopedSlots как функции. Если вы работаете с render-функциями, рекомендуем всегда обращаться к слотам через $scopedSlots, независимо от того, используют ли они свою область видимости в настоящее время или нет. Это не только упростит будущие изменения при переработке слота, но и облегчит миграцию на Vue 3, где все слоты будут функциями.

  • См. также:

vm.$refs

vm.$isServer

vm.$attrs

Добавлено в версии 2.4.0+

  • Тип: { [key: string]: string }

  • Только для чтения

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

    Содержит нераспознанные атрибуты (за исключением class и style), указанные для компонента в родительской области видимости. Если у компонента нет объявленных входных параметров, здесь окажутся все атрибуты (кроме class и style). Эти атрибуты можно передавать вниз во внутренние компоненты через v-bind="$attrs" — что может быть полезным при создании компонентов высшего порядка (HOC).

vm.$listeners

Добавлено в версии 2.4.0+

  • Тип: { [key: string]: Function | Array<Function> }

  • Только для чтения

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

    Содержит обработчики событий v-on из родительской области видимости (без модификаторов .native). Они могут быть переданы во внутренние компоненты через v-on="$listeners" — что может быть полезным при создании прозрачных обёрток компонентов.

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

vm.$watch( expOrFn, callback, [options] )

  • Аргументы:

    • {string | Function} expOrFn
    • {Function | Object} callback
    • {Object} [options]
      • {boolean} deep
      • {boolean} immediate

  • Возвращает: {Function} unwatch

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

    Запускает наблюдение за выражением или вычисляемой функцией на предмет изменений. В параметры коллбэка будут переданы новое и старое значения отслеживаемого объекта. Выражение может быть только простым путём до переменной с разделителями-точками. Для более сложных случаев используйте функцию.

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

  • Пример:

    // следим за переменной, указанной путём:
vm.$watch('a.b.c', function (newVal, oldVal) {
  // переменная изменилась, сделайте что-нибудь
})

// следим за функцией:
vm.$watch(
  function () {
    // Данный обработчик будет вызываться каждый раз, когда выражение
    // `this.a + this.b` даёт результат. Это похоже на отслеживание
    // вычисляемого свойства без определения самого вычисляемого свойства
    return this.a + this.b
  },
  function (newVal, oldVal) {
    // значение функции изменилось, сделайте что-нибудь
  }
)

    vm.$watch возвращает функцию unwatch, которая останавливает слежение:

    var unwatch = vm.$watch('a', cb)
// позднее, останавливаем слежение:
unwatch()

  • Опция: deep

    Чтобы слежение реагировало на изменения во вложенных объектах, передайте deep: true в объекте параметров. Обратите внимание, что для наблюдения за изменениями массивов этого не требуется.

    vm.$watch('someObject', callback, {
  deep: true
})
vm.someObject.nestedValue = 123
// вызывается callback

  • Опция: immediate

    Если передано immediate: true, коллбэк будет вызван сразу же после начала наблюдения с текущим значением выражения:

    vm.$watch('a', callback, {
  immediate: true
})
// `callback` вызывается сразу, с текущим значением `a`

    Обратите внимание, при использовании опции immediate нет возможности отменить отслеживание указанного свойства в коллбэке вызванном в первый раз.

    // Подобное приведёт к ошибке
var unwatch = vm.$watch(
  'value',
  function () {
    doSomething()
    unwatch()
  },
  { immediate: true }
)

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

    var unwatch = vm.$watch(
  'value',
  function () {
    doSomething()
    if (unwatch) {
      unwatch()
    }
  },
  { immediate: true }
)

vm.$set( target, propertyName/index, value )

  • Аргументы:

    • {Object | Array} target
    • {string | number} propertyName/index
    • {any} value

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

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

    Псевдоним глобального метода Vue.set.

  • См. также: Vue.set

vm.$delete( target, propertyName/index )

  • Аргументы:

    • {Object | Array} target
    • {string | number} propertyName/index

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

    Псевдоним глобального метода Vue.delete.

  • См. также: Vue.delete

Методы экземпляра — события

vm.$on( event, callback )

  • Аргументы:

    • {string | Array<string>} event (массив поддерживается только в версиях 2.2.0+)
    • {Function} callback

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

    Создаёт подписку на пользовательское событие текущего vm. Такое событие можно породить функцией vm.$emit. Коллбэк получит все дополнительные аргументы, переданные этому методу.

  • Пример:

    vm.$on('test', function (msg) {
  console.log(msg)
})
vm.$emit('test', 'привет')
// => "привет"

vm.$once( event, callback )

  • Аргументы:

    • {string} event
    • {Function} callback

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

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

vm.$off( [event, callback] )

  • Аргументы:

    • {string | Array<string>} event (массив поддерживается только в 2.2.2+)
    • {Function} [callback]

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

    Удаляет пользовательские подписчики события.

    • Если функция вызвана без параметров, она удалит все подписки на события;

    • Если указан только тип события — удалит все подписки указанного события;

    • Если указан и тип события, и коллбэк — будет удалена именно эта подписка именно этого события.

vm.$emit( eventName, [...args] )

  • Аргументы:

    • {string} eventName
    • [...args]

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

  • Примеры:

    Использование $emit только с именем события:

    Vue.component('welcome-button', {
  template: `
    <button v-on:click="$emit('welcome')">
      Нажмите для приветствия
    </button>
  `
})
    <div id="emit-example-simple">
  <welcome-button v-on:welcome="sayHi"></welcome-button>
</div>
    new Vue({
  el: '#emit-example-simple',
  methods: {
    sayHi: function () {
      alert('Привет!')
    }
  }
})

    {% raw %}

    <script> Vue.component('welcome-button', { template: ` Нажмите для приветствия ` }) new Vue({ el: '#emit-example-simple', methods: { sayHi: function () { alert('Привет!') } } }) </script> {% endraw %}

    Использование $emit с дополнительными аргументами:

    Vue.component('magic-eight-ball', {
  data: function () {
    return {
      possibleAdvice: ['Да', 'Нет', 'Может быть']
    }
  },
  methods: {
    giveAdvice: function () {
      var randomAdviceIndex = Math.floor(Math.random() * this.possibleAdvice.length)
      this.$emit('give-advice', this.possibleAdvice[randomAdviceIndex])
    }
  },
  template: `
    <button v-on:click="giveAdvice">
      Делать или нет?
    </button>
  `
})
    <div id="emit-example-argument">
  <magic-eight-ball v-on:give-advice="showAdvice"></magic-eight-ball>
</div>
    new Vue({
  el: '#emit-example-argument',
  methods: {
    showAdvice: function (advice) {
      alert(advice)
    }
  }
})

    {% raw %}

    <script> Vue.component('magic-eight-ball', { data: function () { return { possibleAdvice: ['Да', 'Нет', 'Может быть'] } }, methods: { giveAdvice: function () { var randomAdviceIndex = Math.floor(Math.random() * this.possibleAdvice.length) this.$emit('give-advice', this.possibleAdvice[randomAdviceIndex]) } }, template: ` Делать или нет? ` }) new Vue({ el: '#emit-example-argument', methods: { showAdvice: function (advice) { alert(advice) } } }) </script> {% endraw %}

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

vm.$mount( [elementOrSelector] )

  • Аргументы:

    • {Element | string} [elementOrSelector]
    • {boolean} [hydrating]

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

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

    Если при создании экземпляра Vue не была указана опция el, он окажется в «непримонтированном» (unmounted) состоянии, то есть без ассоциированного элемента DOM. Вызовите vm.$mount(), чтобы примонтировать такой экземпляр.

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

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

  • Пример:

    var MyComponent = Vue.extend({
  template: '<div>Привет!</div>'
})

// создаём и монтируем в #app (заменит #app):
new MyComponent().$mount('#app')

// другой вариант записи, делает то же самое:
new MyComponent({ el: '#app' })

// отрисовываем вне документа и вставляем в DOM позднее:
var component = new MyComponent().$mount()
document.getElementById('app').appendChild(component.$el)

  • См. также:

vm.$forceUpdate()

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

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

vm.$nextTick( [callback] )

  • Аргументы:

    • {Function} [callback]

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

    Выполняет функцию callback при следующем цикле обновления DOM. Вызывайте сразу после изменения данных, чтобы работать с обновлённым DOM. Функция делает то же самое, что и глобальный Vue.nextTick, но кроме того связывает this с текущим экземпляром в коллбэке.

    Добавлено в версии 2.1.0+: возвращает Promise, если окружение их поддерживает и коллбэк не указан. Обратите внимание, что Vue не поставляется с полифилом для Promise. Поэтому при необходимости поддержки браузеров, которые не поддерживают их нативно (например, IE), вам придётся предоставить полифил самостоятельно.

  • Пример:

    new Vue({
  // ...
  methods: {
    // ...
    example: function () {
      // меняем данные:
      this.message = 'changed'
      // DOM ещё не обновлён
      this.$nextTick(function () {
        // теперь DOM обновлён
        // `this` указывает на текущий экземпляр
        this.doSomethingElse()
      })
    }
  }
})

  • См. также:

vm.$destroy()

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

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

    Вызывает хуки beforeDestroy и destroyed.

    Как правило, вам не придётся вызывать этот метод самим. Лучше контролировать жизненный цикл дочерних компонентов в data-driven стиле директивами `v-if` и `v-for`.

  • См. также: Диаграмма жизненного цикла

Директивы

v-text

  • Принимает: string

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

    Управляет текстовым содержимым элемента (textContent). Если вам нужно управлять только частью содержимого тега, используйте интерполяцию {% raw %}{{ Mustache }}{% endraw %}.

  • Пример:

    <span v-text="msg"></span>
<!-- то же, что -->
<span>{{msg}}</span>

  • См. также: Синтаксис шаблонов — интерполяции

v-html

  • Принимает: string

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

    Управляет HTML-содержимым элемента (innerHTML). Обратите внимание, что содержимое вставляется как обычный HTML — то есть не компилируется как шаблон Vue. Не стоит организовывать вложенные шаблоны с помощью v-html, попробуйте лучше применить компоненты.

    Динамическая отрисовка произвольного HTML-кода на сайте — это очень опасная практика, легко приводящая к [XSS-уязвимостям](https://ru.wikipedia.org/wiki/Межсайтовый_скриптинг). Передавайте в `v-html` только содержимое, которому можно доверять, и **никогда** — необработанный пользовательский ввод.

    В [однофайловых компонентах](../guide/single-file-components.html) `scoped` стили не будут применены к содержимому внутри `v-html`, потому что этот HTML не обрабатывается компилятором шаблонов Vue. Если вы хотите стилизовать содержимое `v-html` с помощью локального CSS, то вы можете вместо этого использовать [CSS-модули](https://vue-loader.vuejs.org/ru/features/css-modules.html) или дополнительный глобальный элемент `<style>` с иной стратегией, такой как БЭМ.

  • Пример:

    <div v-html="html"></div>

  • См. также: Синтаксис шаблонов — интерполяции

v-show

  • Принимает: any

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

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

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

  • См. также: Условная отрисовка — v-show

v-if

  • Принимает: any

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

    Осуществляет отрисовку элемента, только если передаваемое выражение истинно. При изменении значения выражения на противоположное, элемент и содержащиеся в нём компоненты и директивы уничтожаются/пересоздаются. Если элемент — <template>, вместо него будет отрисовано его содержимое.

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

    При совместном использовании `v-if` и `v-for`, `v-for` имеет более высокий приоритет. Подробности на странице [отрисовки списков](../guide/list.html#v-for-и-v-if).

  • См. также: Условная отрисовка — v-if

v-else

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

  • Ограничение: предыдущий элемент должен иметь директиву v-if или v-else-if.

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

    Определяет «блок else» для v-if или цепочки v-if/v-else-if.

    <div v-if="Math.random() > 0.5">
  Сейчас меня видно
</div>
<div v-else>
  А сейчас — нет
</div>

  • См. также: Условная отрисовка — v-else

v-else-if

Добавлено в версии 2.1.0+

  • Принимает: any

  • Ограничение: предшествующий элемент должен иметь v-if или v-else-if.

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

    Обозначает «блок else if» для v-if. Можно объединять в цепочки.

    <div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Не A/B/C
</div>

  • См. также: Условная отрисовка — v-else-if

v-for

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

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

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

    <div v-for="item in items">
  {{ item.text }}
</div>

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

    <div v-for="(item, index) in items"></div>
<div v-for="(val, key) in object"></div>
<div v-for="(val, name, index) in object"></div>

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

    <div v-for="item in items" :key="item.id">
  {{ item.text }}
</div>

    С версии 2.6.0+, v-for также может работать со значениями, реализующими протокол Iterable, включая нативные Map и Set. К сожалению, Vue 2.x в настоящее время не поддерживает реактивность для значений Map и Set и поэтому не сможет автоматически отслеживать изменения в них.

    При совместном использовании `v-if` и `v-for`, `v-for` имеет более высокий приоритет. Подробности на странице [отрисовки списков](../guide/list.html#v-for-и-v-if").

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

  • См. также:

v-on

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

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

  • Параметр: event

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

    • .stop — вызовет event.stopPropagation().
    • .prevent — вызовет event.preventDefault().
    • .capture — добавит подписку в режиме capture.
    • .self — вызовет обработчик только если событие возникло непосредственно на этом элементе.
    • .{keyCode | keyAlias} — вызывает обработчик только при нажатии определённой клавиши.
    • .native — подписаться на нативное событие на корневом элементе компонента.
    • .once — вызовет обработчик не больше одного раза.
    • .left - (2.2.0) вызов обработчика только по событию нажатия левой кнопки мыши.
    • .right - (2.2.0) вызов обработчика только по событию нажатия правой кнопки мыши.
    • .middle - (2.2.0) вызов обработчика только по событию нажатия средней кнопки мыши.
    • .passive - (2.3.0+) вызов обработчика события DOM с опцией { passive: true }.

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

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

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

    При работе с нативными событиями DOM, метод получает нативное событие единственным аргументом. В inline-выражениях, можно получить к нему доступ с помощью $event: v-on:click="handle('ok', $event)".

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

  • Пример:

    <!-- обработчик метода -->
<button v-on:click="doThis"></button>

<!-- динамическое имя события (2.6.0+) -->
<button v-on:[event]="doThis"></button>

<!-- inline-выражение -->
<button v-on:click="doThat('hello', $event)"></button>

<!-- сокращённая запись -->
<button @click="doThis"></button>

<!-- сокращённая запись динамического имени события (2.6.0+) -->
<button @[event]="doThis"></button>

<!-- модификатор stop propagation -->
<button @click.stop="doThis"></button>

<!-- модификатор prevent default -->
<button @click.prevent="doThis"></button>

<!-- модификатор prevent default без дополнительных действий -->
<form @submit.prevent></form>

<!-- цепочка из модификаторов -->
<button @click.stop.prevent="doThis"></button>

<!-- модификатор клавиши keyAlias -->
<input @keyup.enter="onEnter">

<!-- модификатор клавиши keyCode -->
<input @keyup.13="onEnter">

<!-- обработчик метода будет вызван не больше одного раза -->
<button v-on:click.once="doThis"></button>

<!-- синтаксис объекта (2.4.0+) -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

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

    <my-component @my-event="handleThis"></my-component>

<!-- inline-выражение -->
<my-component @my-event="handleThis(123, $event)"></my-component>

<!-- подписываемся на нативное событие в компоненте -->
<my-component @click.native="onClick"></my-component>

  • См. также:

v-bind

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

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

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

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

    • .prop — используется для связывания в качестве DOM-свойства, а не атрибута (в чём разница?). Если тег является компонентом, то .prop будет устанавливать свойство на $el компонента.
    • .camel — (2.1.0+) преобразует имена атрибутов из kebab-case в camelCase.
    • .sync — (2.3.0+) синтаксический сахар, который будет преобразован в обработчик v-on для обновления связанного значения.

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

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

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

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

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

  • Пример:

    <!-- связывание атрибута -->
<img v-bind:src="imageSrc">

<!-- динамическое имя атрибута (2.6.0+) -->
<button v-bind:[key]="value"></button>

<!-- сокращённая запись -->
<img :src="imageSrc">

<!-- сокращённая запись для динамического имени атрибута (2.6.0+) -->
<button :[key]="value"></button>

<!-- поддержка конкатенации строк -->
<img :src="'/path/to/images/' + fileName">

<!-- связывание CSS-класса -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]">

<!-- связывание локального стиля -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>

<!-- связывание с объектом, содержащим атрибуты -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

<!-- связывание с атрибутами DOM при указании модификатора -->
<div v-bind:text-content.prop="text"></div>

<!-- связывание входного параметра. "prop" должен быть определён в my-component. -->
<my-component :prop="someThing"></my-component>

<!-- передача всех входных параметров компонента в child-component -->
<child-component v-bind="$props"></child-component>

<!-- XLink -->
<svg><a :xlink:special="foo"></a></svg>

    Модификатор .camel позволяет перевод имени атрибута v-bind в camelCase при использовании DOM-шаблонов, например для атрибута viewBox SVG:

    <svg :view-box.camel="viewBox"></svg>

    В использовании .camel нет необходимости, если вы пользуетесь строковыми шаблонами или vue-loader/vueify.

  • См. также:

v-model

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

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

    • <input>
    • <select>
    • <textarea>
    • компонентами

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

    • .lazy — подписаться на события change, а не input
    • .number — приводить корректную введённую строку к числу
    • .trim — удалять пробелы в начале и в конце введённой строки

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

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

  • См. также:

v-slot

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

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

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

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

    • <template>
    • компоненты (для одиночного слота по умолчанию с входными параметрами)

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

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

  • Пример:

    <!-- Именованные слоты -->
<base-layout>
  <template v-slot:header>
    Содержимое заголовка
  </template>

  Содержимое слота по умолчанию

  <template v-slot:footer>
    Содержимое подвала
  </template>
</base-layout>

<!-- Именованный слот с входными параметрами -->
<infinite-scroll>
  <template v-slot:item="slotProps">
    <div class="item">
      {{ slotProps.item.text }}
    </div>
  </template>
</infinite-scroll>

<!-- Слот по умолчанию с входными параметрами, с использованием деструктурирования -->
<mouse-position v-slot="{ x, y }">
  Позиция курсора: {{ x }}, {{ y }}
</mouse-position>

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

  • См. также:

v-pre

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

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

    Пропустить компиляцию для этого элемента и всех его потомков. Вы можете использовать это для отображения необработанных тегов {% raw %}{{}}{% endraw %}. Кроме того, пропуск большого количества элементов может ускорить компиляцию.

  • Пример:

    <span v-pre>{{ эта часть не будет скомпилирована }}</span>

v-cloak

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

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

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

  • Пример:

    [v-cloak] {
  display: none;
}
    <div v-cloak>
  {{ message }}
</div>

    Элемент <div> не появится, пока компиляция не закончится.

v-once

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

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

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

    <!-- одиночный элемент -->
<span v-once>Это никогда не изменится: {{msg}}</span>

<!-- элемент с потомком -->
<div v-once>
  <h1>comment</h1>
  <p>{{msg}}</p>
</div>

<!-- компонент -->
<my-component v-once :comment="msg"></my-component>

<!-- директива `v-for` -->
<ul>
  <li v-for="i in list" v-once>{{i}}</li>
</ul>

  • См. также:

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

key

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

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

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

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

    <ul>
  <li v-for="item in items" :key="item.id">...</li>
</ul>

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

    • Быть уверенным, что все хуки жизненного цикла компонента будут вызваны
    • Запускать анимации (например, установленные в transition)

    Например:

    <transition>
  <span :key="text">{{ text }}</span>
</transition>

    При изменении text, <span> всегда будет заменяться целиком, что спровоцирует вызов анимации.

ref

  • Принимает: string

    Название элемента или компонента для регистрации ссылки на него. В объекте $refs появится поле с названием из этого атрибута и значением: элементом DOM, если атрибут стоял на простом теге или экземпляром компонента, если атрибут стоял на пользовательском компоненте:

    <!-- vm.$refs.p будет DOM-элементом -->

<p ref="p">hello</p>

<!-- vm.$refs.child будет указывать на экземпляр дочернего компонента -->
<child-component ref="child"></child-component>

    При использовании на элементах/компонентах с v-for, регистрируется массив ссылок на элементы DOM или экземпляры компонентов.

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

  • См. также: Ссылки на компоненты-потомки

is

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+.

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

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

    Аналогично slot-scope за исключением того, что scope может использоваться только на элементах <template>.

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

component

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

    • is — string | ComponentDefinition | ComponentConstructor
    • inline-template — boolean

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

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

    <!-- динамический компонент, контролируемый -->
<!-- свойством vm `componentId` -->
<component :is="componentId"></component>

<!-- может также отрисовывать зарегистрированный или переданный параметром компонент -->
<component :is="$options.components.child"></component>

  • См. также: Динамическое переключение компонентов

transition

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

    • name — string, используется для автоматической генерации имён CSS-классов для анимаций. Например, name: 'fade' автоматически раскроется в .fade-enter, .fade-enter-active и т. д. Значение по умолчанию — "v".
    • appear — boolean, вызывать ли анимацию при первой отрисовке. По умолчанию false.
    • css — boolean, применять ли CSS-классы. По умолчанию true. Если установить в false, будут вызываться только обработчики JavaScript, зарегистрированные для событий компонента.
    • type — string, указывает тип событий, с помощью которых определяется момент завершения анимации. Доступные значения: "transition" и "animation". По умолчанию автоматически выбирается тип, задающий наибольшую продолжительность.
    • mode — string, управляет порядком анимаций исчезновения и появления элементов. Доступные режимы "out-in" (сначала старый элемент исчезает, потом новый появляется) и "in-out" (сначала новый элемент появляется, потом исчезает старый). По умолчанию исчезновение и появление происходят одновременно.
    • duration - number | { enter: number, leave: number }, указывает длительность перехода. По умолчанию Vue ожидает первого события transitionend или animationend на корневом элементе.
    • enter-class — string
    • leave-class — string
    • appear-class — string
    • enter-to-class — string
    • leave-to-class — string
    • appear-to-class — string
    • enter-active-class — string
    • leave-active-class — string
    • appear-active-class — string

  • События:

    • before-enter
    • before-leave
    • before-appear
    • enter
    • leave
    • appear
    • after-enter
    • after-leave
    • after-appear
    • enter-cancelled
    • leave-cancelled (только для v-show)
    • appear-cancelled

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

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

    <!-- простой элемент -->
<transition>
  <div v-if="ok">переключаемое содержимое</div>
</transition>

<!-- динамический компонент -->
<transition name="fade" mode="out-in" appear>
  <component :is="view"></component>
</transition>

<!-- хук на событие -->
<div id="transition-demo">
  <transition @after-enter="transitionComplete">
    <div v-show="ok">переключаемое содержимое</div>
  </transition>
</div>
    new Vue({
  ...
  methods: {
    transitionComplete: function (el) {
      // сделайте что-нибудь с переданным элементом DOM ...
    }
  }
  ...
}).$mount('#transition-demo')

  • См. также: Анимирование списков и появления/исчезновения

transition-group

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

    • tag — string, по умолчанию используется span.
    • move-class — переопределяет CSS-класс, применяемый во время анимации перемещения.
    • те же атрибуты, что и у <transition> кроме mode.

  • События:

    • те же, что и у <transition>.

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

    Указывает анимацию перехода для нескольких элементов или компонентов. <transition-group> превращается в реальный элемент DOM. По умолчанию для этого используется тег <span>, но можно указать любой другой в параметре tag.

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

    Анимации перехода реализованы с помощью CSS-трансформаций. Когда позиция потомка изменилась после обновления, ему будет добавлен CSS-класс (автоматически сгенерированный из атрибута name, или же явно указанный в атрибуте move-class). Если после применения этого класса свойство transform можно будет анимировать, элемент будет с плавным переходом переведён туда, где он должен быть с помощью техники FLIP.

    <transition-group tag="ul" name="slide">
  <li v-for="item in items" :key="item.id">
    {{ item.text }}
  </li>
</transition-group>

  • См. также: Анимирование списков и появления/исчезновения

keep-alive

  • Props:

    • include — строка, регулярное выражение или массив. Только компоненты с совпадающими именами будут кешироваться.
    • exclude — строка, регулярное выражение или массив. Все компоненты с совпадающими именами не будут кэшироваться.
    • max - число. Максимальное количество кэшируемых экземпляров.

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

    Оберните динамические компоненты тегом <keep-alive>, чтобы кэшировать экземпляры интерактивных компонентов вместо того, чтобы их уничтожать. Так же, как и <transition>, <keep-alive> — абстрактный компонент: при отрисовке он не превращается в элемент DOM, и не показывается в цепочке родителей компонента.

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

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

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

    <!-- базовый вариант -->
<keep-alive>
  <component :is="view"></component>
</keep-alive>

<!-- несколько потомков -->
<keep-alive>
  <comp-a v-if="a > 1"></comp-a>
  <comp-b v-else></comp-b>
</keep-alive>

<!-- использование вместе с `<transition>` -->
<transition>
  <keep-alive>
    <component :is="view"></component>
  </keep-alive>
</transition>

    Обратите внимание, <keep-alive> предназначен для случая, когда есть один прямой дочерний компонент, который переключается. Он не будет работать, если в нём есть v-for. При наличии несколько дочерних компонентов отображаемых по условию, как указано выше, <keep-alive> требует, чтобы отображался только один дочерний компонент в один момент времени.

  • include и exclude

    Добавлено в версии 2.1.0+

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

    <!-- строка с именами через запятую -->
<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>

<!-- регулярное выражение (используйте `v-bind`) -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>

<!-- массив (используйте `v-bind`) -->
<keep-alive :include="['a', 'b']">
  <component :is="view"></component>
</keep-alive>

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

  • max

    Добавлено в версии 2.5.0+

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

    <keep-alive :max="10">
  <component :is="view"></component>
</keep-alive>

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

  • См. также: Динамические и асинхронные компоненты — keep-alive с динамическими компонентами

slot

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

    • name — string, используется для именования слотов

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

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

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

  • См. также: Распределение контента слотами

Интерфейс VNode

Отрисовка на стороне сервера