SFC компоненты

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

<template>
  <div>
    <h1>t('Hellow'), {{ name }}!</h1>
  </div>
  <button @click="changeName">World</button>
  <button @click="changeName">Vue</button>
</template>

<script setup>
import { ref } from "vue";
import { t } from "vue-i18n";

const name = ref("World");

const changeName = (newName) => {
  name.value = newName;
};
</script>

<style>
h1 {
  color: red;
}
</style>

<i18n>
{
  "en": {
    "Hello": "Hello"
  },
  "ru": {
    "Hello": "Привет"
  }
}
</i18n>

В данном примере мы используем SFC с 4-мя блоками:

• шаблон отображения
• логику поведения
• стили HTML
• локализацию i18n

Шаблон

Шаблон представлен в SFC блоком <template> и представляет из себя валидный HTML код.

Связь с данными

Наиболее простой способ связывания данных — текстовая интерполяция с использованием синтаксиса из двойных фигурных скобок:

<span>Сообщение: {{ msg }}</span>

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

v-html При использовании двойных фигурных скобок значение переменной будет интерпилировано как текст, таким образом не получится подставить HTML код. Если значение переменной следует интерполировать как HTML код, то можно использовать директиву v-html. Однако в если переменная будет содержать другие привязки они будут проигнорированы и будут интерполироваться как текст. В подобных сценариях необходимо использовать дочерние компоненты.