Vue.js шаблоны и интерполяции

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

Любой HTML является допустимым Vue.js шаблон, и в дополнение к этому, Vue.js обеспечивает две мощные функции: интерполяция и директивы .

Это действительный Vue.js шаблон:

Hello!

Этот шаблон может быть помещен внутрь компонента Vue, объявленного явно:

new Vue({
  template: 'Hello!'
})

или его можно поместить в один файловый компонент:

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

Это можно сделать с помощью интерполяции. Сначала мы добавляем некоторые данные в наш компонент:

new Vue({
  data: {
    name: 'Flavio'
  },
  template: 'Hello!'
})

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

new Vue({
  data: {
    name: 'Flavio'
  },
  template: 'Hello {{name}}!'
})

Здесь есть одна интересная вещь. Посмотрите, как мы только что использовали имя вместо this.data.name ?

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

В одном компоненте файла это было бы:

Я использовал обычную функцию в своем экспорте. Почему бы не использовать функцию стрелки?

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

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

Теперь вернемся к интерполяции.

{{имя}} напоминает интерполяцию шаблона Усы/Руль, но это всего лишь визуальное напоминание.

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

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

{{ name.reverse() }}

{{ name === 'Flavio' ? 'Flavio' : 'stranger' }}

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

{{ Math.sqrt(16) * Math.random() }}

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

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

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

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

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

Если вам нужен фрагмент HTML-кода, вам нужно вместо этого использовать директиву v-html .

Оригинал: “https://flaviocopes.com/vue-templates/”