Vue (основы)

Data – это функция, описывающая объект состояния (state) нашего компонента.

{{some variable}} – интерполяция, позволяющая выводить данные в шаблон. Работает только с текстовой частью и нельзя прописать так внутри атрибутов.

v-model– директива для двустороннего связывания. Ей можно легко связывать и поля формы со стейтом.

v-on: (краткая запись – @) – директива для подписи на событие. Например: v-on:keydown.enter="add" либо  @keydown.enter="add" – при нажатии энтера выполняем функцию “add” заданую в methods.

v-for – директива для вывода части кода в цикле. Например: v-for=”t in tickets” либоv-for=”t of tickets”, где tickers – массив объектов с ключами, содержащими переменные, нужные для вывода в этих блоках (каждый объект отвечает за один блок и от количества этих объектов зависит количество выведенных блоков). В v-for можно писать не просто массивы для перебора, описанныее в Data, а и выражения из methods. Т.е. не только v-for="t in arrFromData", а и v-for="(bar, idx) in funcFromMethods()" , где функция эта возвращает итерируемый объект, который может постоянно менятьяс (например, данные для графика).

v-if – директива, позволяющая показывать / скрывать блок при определенном условии. Например, если внутри v-for выводит блоки, и когда массив для них в Data пустым становится, то можно так скрыть весь блок. Для этого можно просто в атрибутах скрываемого блока прописать условие либо обернуть нужный участок кода в тег template:

<template v-if="tickers.length > 0">
 //some code
<input v-model="ticker" v-on:keydown.enter="add"> //связали с переменной ticker и повесили добавление через enter
<button @click="add">Добавить</button>
  <div v-for="t in tickers" :key="t.name"
    v-on:click="sel = t" //по клику получаем блок и кладем его в sel
  >
    {{ t.name }}
    {{ t.price }}
  </div>
  <buttom @click="handleDelete(t)">
   Удалить
  </buttom>
 //some code
</template>

<script>
export default {
 name: "App",
 data() {
   return {
    ticker: "some text",
    tickers: [
       { name: "DEMO", price: "_" },
       { name: "DEMO", price: "_" },
       { name: "DEMO", price: "_" },
       { name: "DEMO", price: "_" }
    ],
    sel: null
   };
  }
};
</script>

Нельзя для одного блока одновременно применить v-for и v-if.

Добавление, удаление и получение элемента по клику

В коде ниже показано, как для всех этих приемов может выглядеть data() и methods:

<script>
export default {
  name: "App",
  data() {
    return {
      ticker: "default",
//наш массив объектов для их вывода по умолчанию на странице при помощи v-for:
      tickers: [ 
        { name: "DEMO", price: "4" },
        { name: "DEMO", price: "_" },
        { name: "DEMO", price: "1" },
        { name: "DEMO", price: "_" }
      ],
      sel: null // войство для хранения выделенного (полученного по клику элемента)
    };
  },
  methods: {
    add() { //функция, добавляющая новвый объект в наш массив для отображения
      const newTicker = {
        name: this.ticker,
        price: "_"
      };
      this.tickers.push(newTicker);
      this.ticker = "";
    },
//функция для удаления одного из объектов, среди выведеных циклом (см. код в предыдущем окне)
    handleDelete(tickerToRemove) {
      this.tickers = this.tickers.filter((t) => t != tickerToRemove);
    }
  }
};
</script>

Добавление класса по клику

Выше показано, как мы получаем в переменную sel один из выводимых циклом блоков по клику. Теперь можно повесить класс на этот блок, который применяется, пока он находится в переменной (сделать выделение):

 <div
    v-for="t in tickets"
    :key="t.name"
    v-on:click="sel = t"
    :class="sel === t ? 'border-2' : ''" //здесь добавляем класс и убираем по клику
    class="border-purple-800 border-solid cursor-pointer"
  >

Но есть более специфичный синтаксис, предлагаемый Vue. Это объект, который в качестве ключей принимает названия клакссов, а в качестве свойств – условия для их отображения:

 <div
    v-for="t in tickets"
    :key="t.name"
    v-on:click="sel = t"
    :class="{
      'border-2': sel === t 
    }"
    class="border-purple-800 border-solid cursor-pointer"
  >

Прекращение всплытия (чтобы кнопка “удалить” не выделяла блок)

Если мы захочем, чтобы где-то отображалась переменная из стейта выделенного блока, которая, то просто используем в нужном месте {{ sel.name }}. Но при нажатии на кнопку “удалить” тоже будет выводится это название, что нам не нужно.

Для этого в обычном js есть “stop propagation“, отменяющее так называемое всплытие. Во Vue же для этого используется модификатор stop: @click.stop="handleDelete(t)"

Получение “глобальной” информации в компонентах

В компоненты приходят объекты this.$router и this.$router. При помощи них можно получить, например:

• теущий урл: this.$route.path
• массивы всех роутов приложения:  this.$router.options.routes с их подпутями тоже в виде массивов;
• объект текущиго дочерного компонент внутри лейаута: this.$router.currentRoute, у которого можно взять его имя (name), передаваемые в него пропсы ([0]?.props или т.п.) и т.д.;