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 или т.п.) и т.д.;