Структура компонента Vue

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

<script>
// тут следует писать JavaScript код компонента
export default {
  data() {
    return {
      var1: 1,
      var2: 2,
    }
  }
}
</script>

<template>
  // тут следует писать верстку компонента
  {{ var1 + var2 }}
</template>

<style scoped>
// тут следует писать стили компонента
</style>

В теге script следует писать JavaScript код нашего компонента. Код должен представлять собой объект, который будет экспортироваться из нашего файла компонента. В экспортируемом объекте указываются различные настройки и функции компонента.

В теге template следует писать HTML в котором доступны переменные например из тега script с которыми можно выполнять различные действия.

Результатом этого кода будет следующий HTML:

<div id="app">
    3
</div>

В теге style можно будет писать CSS код, при этом он будет применяться только к HTML коду компонента, и не будет применен где-то вовне. Это сделано специально для удобства и достигается за счет атрибута scoped.

Из чего может состоять тег script

1. data для хранения данных, подробнее
2. methods для хранения своих функций, которые на языке Vue называются методы, подробнее
3. computed вычисляемые свойства, подробнее
4. watch асинхронные действия, подробнее
5. mixins повторяющийся код, подробнее
6. name название компонента
7. created хук жизненного цикла, выполняется после создания компонента и инициализации его реактивных данных. В этом хуке можно выполнять операции, которые не зависят от DOM, например, получать данные с сервера
8. mounted хук жизненного цикла, выполняется после того, как Vue отрисовал компонент и вставил его в DOM-дерево