Production deployment

Composing with Components

The component system is another important concept in Vue, because it’s an abstraction that allows us to build large-scale applications composed of small, self-contained, and often reusable components. If we think about it, almost any type of application interface can be abstracted into a tree of components:


In Vue, a component is essentially a Vue instance with pre-defined options. Registering a component in Vue is straightforward:

Now you can compose it in another component’s template:

But this would render the same text for every todo, which is not super interesting. We should be able to pass data from the parent scope into child components. Let’s modify the component definition to make it accept a :

Now we can pass the todo into each repeated component using :

This is a contrived example, but we have managed to separate our app into two smaller units, and the child is reasonably well-decoupled from the parent via the props interface. We can now further improve our component with more complex template and logic without affecting the parent app.

In a large application, it is necessary to divide the whole app into components to make development manageable. We will talk a lot more about components later in the guide, but here’s an (imaginary) example of what an app’s template might look like with components:

Relation to Custom Elements

You may have noticed that Vue components are very similar to Custom Elements, which are part of the Web Components Spec. That’s because Vue’s component syntax is loosely modeled after the spec. For example, Vue components implement the Slot API and the special attribute. However, there are a few key differences:

  1. The Web Components Spec has been finalized, but is not natively implemented in every browser. Safari 10.1+, Chrome 54+ and Firefox 63+ natively support web components. In comparison, Vue components don’t require any polyfills and work consistently in all supported browsers (IE9 and above). When needed, Vue components can also be wrapped inside a native custom element.

  2. Vue components provide important features that are not available in plain custom elements, most notably cross-component data flow, custom event communication and build tool integrations.

Although Vue doesn’t use custom elements internally, it has when it comes to consuming or distributing as custom elements. Vue CLI also supports building Vue components that register themselves as native custom elements.

Простой контейнер состояния с нуля

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

Для решения этой проблемы, мы можем использовать простое хранилище:

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

Кроме того, если что-то пойдёт не так — у нас будет лог, по которому можно отследить последовательность действий, приводящую к возникновению бага.

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

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

Плюсом такого подхода является возможность записи всех происходящих с хранилищем изменений, что позволяет применять продвинутые техники отладки, такие как логи изменений, слепки данных и «машину времени»

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

Это вновь приводит нас к Vuex, так что если вы дочитали до этого места — пожалуй, пора его попробовать!

##company## — ##description##

Изменить эту страницу на GitHub! Netlify

Хуки жизненного цикла экземпляра

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

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

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

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

Модификаторы событий

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

Для решения этой задачи Vue предоставляет модификаторы событий для , которые указываются как постфиксы и отделяются точкой:

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

В отличие от остальных модификаторов, которые поддерживают только нативные события DOM, модификатор может использоваться и в . Если вы ещё не читали о компонентах, не беспокойтесь об этом сейчас.

Vue также предоставляет модификатор , соответствующий опции .

Модификатор особенно полезен для повышения производительности на мобильных устройствах.

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

Данные и методы

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

Когда значения изменяются, представление будет переотрисовано

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

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

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

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

С полным списком свойств и методов экземпляра Vue можно ознакомиться в .

# Важные изменения

Определение загрузчиков webpack

Vue Loader v15 теперь использует другую стратегию для определения загрузчиков, которые должны использоваться для языкового блока.

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

С версии v15, будет вести себя так, как если бы это был загруженный файл . Поэтому, чтобы обработать его, вам нужно предоставить явное правило в вашей основной конфигурации webpack:

Преимущество состоит в том, что это же правило также применяется и к обычным импортам из JavaScript, и вы можете конфигурировать опции для этих загрузчиков так как захотите. В версии v14 и ниже, если вы хотите предоставить пользовательские опции для предполагаемого загрузчика, то вам необходимо дублировать их в собственной опции у Vue Loader. С версии v15 это больше не требуется.

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

Импорт однофайловых компонентов из зависимостей


Обычная практика, указывать для правил транспиляции JS (например, ) которые применяются к файлам . Из-за изменения версии v15, если вы импортируете однофайловые компоненты SFC внутри , его секция также будет исключена из транспиляции.

Чтобы обеспечить транспиляцию JS для однофайловых компонентов Vue в , вам необходимо делать для них исключение с помощью функции в опции exclude:

Обработка секций шаблонов

v14 и ниже использует consolidate для компиляции . v15 теперь обрабатывает их с помощью загрузчиков webpack.

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

Например, для поддержки , вы можете использовать pug-plain-loader:

Если вы также собираетесь импортировать файлы как HTML-строки в JavaScript, вам нужно будет добавить в цепочку после загрузчика пре-процессора

Обратите внимание, что добавление сломает использование в компонентах Vue, поэтому вам потребуется два правила, одно направленное на файлы Vue с использованием , другое (fallback) нацеленное на импорты JavaScript:

Внедрение стилей

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

Обратите внимание, что порядок внедрения всё ещё не гарантируется, поэтому вам следует избегать написания CSS, который зависит от порядка внедрения

PostCSS

Vue Loader больше не применяет трансформацию PostCSS по умолчанию. Для использования PostCSS сконфигурирйте таким образом, как и для обычных CSS файлов.

CSS модули

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

Хорошая новость в том, что теперь вы можете настраивать в одном месте:

Если вы хотите использовать CSS модули только в некоторых компонентах Vue, вы можете использовать правило и проверять наличие строки внутри :

Conditionals and Loops

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

Now you see me

Go ahead and enter in the console. You should see the message disappear.

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

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

  1. {{ todo.text }}

In the console, enter . You should see a new item appended to the list.

Новая документация

Команда Vue docs обновила нашу документацию для v3, и теперь она доступна на v3.vuejs.org! Это было грандиозное мероприятие, и большое спасибо за усердную работу команде разработчиков документации: @NataliaTepluhina, @bencodezen, @phanan и @sdras. Новая документация была тщательно адаптирована для описания различий между версиями v2 и v3, работает на VuePress и имеют улучшенные примеры кода, которые можно редактировать встроенными средствами.

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

Обратите внимание, что новая документация, особенно руководство по миграции, все еще находится в стадии разработки, и мы продолжим ее дорабатывать на протяжении всего этапа RC

Vue в реальном мире

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

Если вы хотите создавать продукты на основе Vue.js для реальных пользователей, вам нужно знать больше!

Скаффолдинг

Создав несколько Vue-приложений, вы обнаружите, что почти в каждом проекте есть одни и те же конфигурации, настройки и инструменты разработчика.

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

Full-stack / приложения с аутентификацией

Реальные приложения Vue работают с данными, которые могут приходить из разных источников. Чаще всего – из безопасного API на Node, Laravel, Rails, Django или какой-либо другой серверной платформы.

Возможно, данные будут предоставлены обычным REST API или GraphQL, или это могут быть данные в реальном времени через веб-сокеты.

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

Тестирование

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

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

Команда Vue поддерживает инструмент под названием Vue Test Utils, который позволяет создавать и запускать тесты для изолированных компонентов Vue.

Хотя тестирование E2E не связано с Vue, оно также может обеспечить надежность вашего проекта. Отличный инструмент E2E, который можно добавить в проект через Vue CLI 3 – Cypress.

Оптимизация

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

Чтобы оптимизировать приложение Vue, можно использовать различные методы, включая рендеринг на стороне сервера (server-side rendering). При этом приложение Vue выполняется на сервере, а пользователь получает конечный HTML-код.

Другие методы оптимизации включают использование асинхронных компонентов (async components) и функций визуализации (render functions).

What is Vue.js?

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and .

If you’d like to learn more about Vue before diving in, we walking through the core principles and a sample project.

If you are an experienced frontend developer and want to know how Vue compares to other libraries/frameworks, check out the Comparison with Other Frameworks.

Dynamic Components

Sometimes, it’s useful to dynamically switch between components, like in a tabbed interface:

{{ tab }}

The above is made possible by Vue’s element with the special attribute:


In the example above, can contain either:

  • the name of a registered component, or
  • a component’s options object

See this example to experiment with the full code, or this version for an example binding to a component’s options object, instead of its registered name.

Keep in mind that this attribute can be used with regular HTML elements, however they will be treated as components, which means all attributes will be bound as DOM attributes. For some properties such as to work as you would expect, you will need to bind them using the .

That’s all you need to know about dynamic components for now, but once you’ve finished reading this page and feel comfortable with its content, we recommend coming back later to read the full guide on Dynamic & Async Components.

Модификаторы клавиш

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

Можно также использовать любые допустимые имена клавиш, предоставляемые через в качестве модификаторов, именуя их в kebab-case.

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

Коды клавиш

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

Использование значений также разрешено:

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

  • (ловит как «Delete», так и «Backspace»)

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

Можно также через глобальную опцию :

v-if

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

Также можно добавить блок «иначе», используя директиву :

Условные группы с использованием и

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

Для указания блока «иначе» для можно использовать директиву :

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

Как следует из названия, служит в качестве блока «else if» для директивы . Можно объединять эти директивы в длинные цепочки:

Как и , должен следовать сразу за элементом с или .

Управление повторным использованием элементов при помощи

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

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

Попробуйте сами, введя что-нибудь в поле ввода и нажав на кнопку переключения:

Иногда такое поведение нежелательно, поэтому Vue можно явно указать: «эти элементы должны быть полностью независимы, не надо их переиспользовать». Для этого всего лишь нужно указать уникальное значение ключа :

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

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

Создание экземпляра Vue

Каждое приложение начинается с создания нового экземпляра Vue с помощью функции :

Хоть Vue и не реализует паттерн MVVM в полной мере, архитектура фреймворка им во многом вдохновлена. Поэтому переменную с экземпляром Vue традиционно именуют (сокращённо от ViewModel).

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

Приложение Vue состоит из корневого экземпляра Vue, создаваемого с помощью , опционально организованного в дерево вложенных, повторно используемых компонентов. Например, дерево компонентов для приложения TODO-списка может выглядеть так:

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

DOM Template Parsing Caveats

Some HTML elements, such as , , and have restrictions on what elements can appear inside them, and some elements such as , , and can only appear inside certain other elements.

This will lead to issues when using components with elements that have such restrictions. For example:

The custom component will be hoisted out as invalid content, causing errors in the eventual rendered output. Fortunately, the special attribute offers a workaround:

It should be noted that this limitation does not apply if you are using string templates from one of the following sources:

  • String templates (e.g. )
  • Single-file () components

That’s all you need to know about DOM template parsing caveats for now – and actually, the end of Vue’s Essentials. Congratulations! There’s still more to learn, but first, we recommend taking a break to play with Vue yourself and build something fun.

Once you feel comfortable with the knowledge you’ve just digested, we recommend coming back to read the full guide on Dynamic & Async Components, as well as the other pages in the Components In-Depth section of the sidebar.

##company## — ##description##

Edit this on GitHub! Netlify

How to use

You need to import the component and then either use or and add it.

You can import the whole package or each module individual.

importVueChartsfrom'vue-chartjs'import{Bar,Line}from'vue-chartjs'

Just create your own component.

import{Bar}from'vue-chartjs'exportdefault{  extends Bar,mounted(){this.renderChart({      labels'January','February','March','April','May','June','July','August','September','October','November','December',      datasets{          label'GitHub Commits',          backgroundColor'#f87979',          data40,20,12,39,10,40,39,80,40,20,12,11}})}}

or in TypeScript

import{Bar}from'vue-chartjs';import{Component}from'vue-property-decorator';@Component({extendsBar,})exportdefaultclassCommitChartextendsVue<Bar>{mounted(){this.renderChart({labels'January','February','March','April','May','June','July','August','September','October','November','December',datasets{label'GitHub Commits',backgroundColor'#f87979',data40,20,12,39,10,40,39,80,40,20,12,11}})}}

Then simply import and use your own extended component and use it like a normal vue component

importCommitChartfrom'path/to/component/CommitChart'

Declarative Rendering


At the core of Vue.js is a system that enables us to declaratively render data to the DOM using straightforward template syntax:

{{ message }}

We have already created our very first Vue app! This looks pretty similar to rendering a string template, but Vue has done a lot of work under the hood. The data and the DOM are now linked, and everything is now reactive. How do we know? Open your browser’s JavaScript console (right now, on this page) and set to a different value. You should see the rendered example above update accordingly.

Note that we no longer have to interact with the HTML directly. A Vue app attaches itself to a single DOM element ( in our case) then fully controls it. The HTML is our entry point, but everything else happens within the newly created Vue instance.

In addition to text interpolation, we can also bind element attributes like this:

Hover your mouse over me for a few seconds to see my dynamically bound title!

Here we are encountering something new. The attribute you are seeing is called a directive. Directives are prefixed with to indicate that they are special attributes provided by Vue, and as you may have guessed, they apply special reactive behavior to the rendered DOM. Here, it is basically saying “keep this element’s attribute up-to-date with the property on the Vue instance.”

If you open up your JavaScript console again and enter , you’ll once again see that the bound HTML — in this case the attribute — has been updated.

Сохранение состояния

При обновлении Vue списка элементов, отображаемого директивой , по умолчанию используется стратегия обновления «на месте». Если порядок элементов массива или объекта изменился, Vue не станет перемещать элементы DOM, а просто обновит каждый элемент «на месте», чтобы он отображал новые данные по соответствующему индексу. Во Vue версий 1.x подобное поведение достигалось указанием .

Режим по умолчанию эффективен, но применим только в случаях, когда результат отрисовки вашего списка не полагается на состояние дочерних компонентов или временные состояния DOM (например, значения полей форм).

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

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

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

Не указывайте в качестве ключей непримитивные значения. Вместо этого используйте строковые или числовые значения.

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

Pre-Compiling Templates

When using in-DOM templates or in-JavaScript template strings, the template-to-render-function compilation is performed on the fly. This is usually fast enough in most cases, but is best avoided if your application is performance-sensitive.

The easiest way to pre-compile templates is using Single-File Components — the associated build setups automatically performs pre-compilation for you, so the built code contains the already compiled render functions instead of raw template strings.

If you are using Webpack, and prefer separating JavaScript and template files, you can use vue-template-loader, which also transforms the template files into JavaScript render functions during the build step.

Usage

importVuefrom'vue'importEChartsfrom'vue-echarts'import'echarts/lib/chart/bar'import'echarts/lib/component/tooltip'import'echarts-gl'Vue.component('v-chart', ECharts)

Vue-ECharts offers an untranspiled version for webpack by default. If you are using official Vue CLI to create your project, you may encounter the problem that the default configuration will exclude from files to be transpiled by Babel. You need to modify the configuration as follows:

For Vue CLI 3+, add and into in like this:

module.exports={  transpileDependencies'vue-echarts','resize-detector'}

For Vue CLI 2 with the template, modify like this:

      {        test: /\.js$/,        loader: 'babel-loader',-       include: +       include: [+         resolve('src'),+         resolve('test'),+         resolve('node_modules/vue-echarts'),+         resolve('node_modules/resize-detector')+      }

If you are using bare webpack config, just do similar modifications make it work.

When using Vue-ECharts on the server side with Nuxt.js, it may be not properly transpiled because Nuxt.js prevents files under from being bundled into the server bundle with only a few exceptions by default. We need to whitelist manually.

For Nuxt.js v2, modify as follows:

module.exports={  build{    transpile'vue-echarts','resize-detector'}}

For Nuxt.js v1, modify as follows:

constnodeExternals=require('webpack-node-externals')module.exports={  build{extend(config,{ isServer }){if(isServer){config.externals=nodeExternals({            whitelistes6-promise|\.(?!(?:js|json)$).{1,5}$i,^vue-echarts})}}}}
require.config({  paths{'vue''path/to/vue','echarts''path/to/echarts','vue-echarts''path/to/vue-ehcarts'}})require('vue','vue-echarts',function(Vue,ECharts){Vue.component('v-chart', ECharts)})

Without any module system, the component is exposed as .

Vue.component('v-chart', VueECharts)

Отображение массива элементов с помощью v-for

Используйте директиву для отрисовки списка элементов на основе массива данных. У директивы особый синтаксис записи: , где — исходный массив, а — ссылка на текущий элемент массива:

Результат:

{{ item.message }}

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

Результат:

{{ parentMessage }} — {{ index }} — {{ item.message }}

Вместо разделителем можно использовать , как в итераторах JavaScript:

для объекта

можно также использовать для итерирования по свойствам объекта:

Результат:

{{ value }}

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

{{ name }}: {{ value }}

И третий — для индексов:

{{ index }}. {{ name }}: {{ value }}

При итерировании по объекту порядок обхода такой же как и в . Его консистентность не гарантируется при использовании различных реализаций движков JavaScript.


С этим читают