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

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

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

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

Это действующий шаблон Vue.js:

<span>Hello!</span>

Этот шаблон можно поместить в явно объявленный компонент Vue:

new Vue({
  template: '<span>Hello!</span>'
})

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

<template>
  <span>Hello!</span>
</template>

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

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

new Vue({
  data: {
    name: 'Flavio'
  },
  template: '<span>Hello!</span>'
})

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

new Vue({
  data: {
    name: 'Flavio'
  },
  template: '<span>Hello {{name}}!</span>'
})

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

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

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

<template>
  <span>Hello {{name}}!</span>
</template>

<script> export default { data() { return { name: ‘Flavio’ } } } </script>

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

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

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

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

{{ name }}напоминает интерполяцию шаблона Mustache / Handlebars, но это просто визуальное напоминание.

Хотя в этих шаблонизаторах они «тупые», во Vue вы можете делать гораздо больше, он более гибкий.

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

{{ name.reverse() }}
{{ name === 'Flavio' ? 'Flavio' : 'stranger' }}

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

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

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

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

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

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

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

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

Скачать мою бесплатнуюСправочник по Vue


Больше руководств по vue: