Если вы хотите вывести данные в свой шаблон или создать реактивные элементы на странице, интерполируйте данные в шаблон с помощью фигурных скобок. Vue
обработает и заменит этот заполнитель данными.
Далее, для второго упражнения, нам необходимо создать новый vue компонент и в секция script должна выглядеть вот так:
<script>
export default {
data() {
return {
title: 'My first component!',
}
},
}
</script>А секция template:
<template>
<div>
<h1>{{ title }}</h1>
</div>
</template>Отмечу, что во vue2 , внутри секции template допустим только 1 корневой элемент, во vue 3, это ограничение снято.
Когда вы сохраните документ, вы увидите, что в h1, подгрузились даные из секции data.
В Vue внутри фигурных скобок разрешается размещать любой код JavaScript. Например, вы можете преобразовать текст внутри фигурных скобок с помощью метода toUpperCase():
<template>
<div>
<h1>{{ title.toUpperCase() }}</h1>
</div>
</template>После этого, внутри h1, заголоок будет преобразован в uppercase формат.
Интерполяция также может обрабатывать условную логику. Внутри объекта данных добавьте логическое значение ключа - isUppercase: false, добавив данное свойство в объект data:
<template>
<div>
<h1>{{ isUppercase ? title.toUpperCase() : title }}</h1>
</div>
</template>
<script>
export default {
data() {
return {
title: 'My first component!',
isUppercase: false,
}
},
}
</script>Теперь формат заголовка в uppercase нотации, зависит от значения переменной isUppercase, и если в поле data , данная переменная установлена в true:
isUppercase: true,Заголовок примет нотацию uppercase.
Теперь давайте, перепишем данный код с использованием composition API:
<script setup>
const title ='My first component!';
const isUppercase = true;
</script>В этом упражнении мы смогли применить встроенные условия в
интерполированные теги ({{}}) с помощью логической переменной. Функция позволяет нам
изменять отображаемые данные без чрезмерно сложных ситуаций, которые
могут быть полезны в определенных случаях использования. Мы также начали использовать некоторые функцию composition API.
Поскольку теперь мы знакомы с использованием интерполяции для привязки локальных данных, мы
мы перейдем к нашей следующей теме — как прикреплять данные и методы к HTML , а также начнем изучать события и атрибуты элементов с использованием атрибутов Vue.