Функциональные возможности VueJS

1. Синтаксический сахар {{}} -- вставка значений -- берет значения из data, computed

2. v-for -- перебор данных

<teleport>
<div v-for="(goods, i) in cat" style="display: flex; padding: 0 10px">
  <!--      v-bind - привязка данных для информации о корзине, v-model - двусторонняя привязка -->
  <input type="checkbox" :value="goods" v-model="catArr">
  <!--      передача значений goods, i в дочерний компонент через props, передача значений из дочернего компонента в родительский через события -->
  <CatItem :goods="goods" :i="i" @onCatItem="onCatItem"></CatItem>
</div>
</teleport>

3. v-bind: привязка данных -- данные берутся из data, computed

4. v-model: двусторонняя привязка данных -- данные берутся из data -- используется для элементов форм

5. components: ссылка на компоненты, коммуникация между компонентами -- передача данных от родительского компонента к дочернему через props, передача данных из дочернего компонента к родительскому через события

6. data: контейнер для хранения данных

7. watch: наблюдение за изменениями -- используется для v-model

8. computed: вычисляемые свойства -- пересчитываются при изменении данных в источнике данных