Директивы Vue.js

Что такое директива

Следующее определение, с которым мы с вами познакомимся - это определение директивы. Давайте разбираться, что означает это определение.

Исходя из названия можно понять, что директива - это описание какого-то набора действий, которые должны быть совершены. Это действительно так и во Vue директивы отвечают за тот набор действий, те алгоритмы, которые должны быть выполнены. Эти алгоритмы должны применяться в шаблоне нашего компонента, к которому мы хотим эти директивы применить. Директивы работают только в шаблонах. 

Первое, что нам нужно понять для чего нужны директивы - для того, чтобы описать какие-то алгоритмы внутри наших шаблонов. С помощью директив мы можем создавать условные операторы, мы можем создавать циклы, можем создавать какие-то дополнительные служебные конструкции, которые мы можем применять в шаблоне. 

По сути, это такое небольшое программирование, которые мы можем использовать внутри нашего шаблона. 

Как же создаются директивы?

Директивы обязательно должны применяться к каким-то элементам нашей разметки. Они представляют собой некие атрибуты, которые мы можем добавлять для наших элементов. Любая директива начинается со знака "v-", далее идёт знак тире. IDE система сам подсказывает какие возможные директивы мы можем здесь с вами использовать.

Казалось бы, их много, но по сути, их не так и много. Есть достаточно ограниченное количество директив. 

Исходя из названия директивы можно понять то, что она делает.

У директивы есть имя, которая находится после конструкции "v-". У директивы может быть, а может не быть значение. Например, для директивы v-else нет никакого значения. 

Давайте кратко рассмотрим основные директивы Vue, с которыми чаще всего приходится встречаться на практике.

v-if

Директива v-if во Vue используется для условного отображения элементов в зависимости от значения выражения. Это позволяет изменять содержимое страницы в зависимости от данных или состояния приложения.

<template>
  <div>
    <div v-if="isLoggedIn">
      Привет, {{ username }}!
    </div>
    <div v-else>
      <button @click="login">Войти</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoggedIn: false,
      username: ''
    };
  },
  }
}
</script>

Подробнее о директиве v-if мы поговорим здесь.

v-show

Директива v-show очень похожа на директиву v-if, но есть ряд важных отличий. во Vue эта директива используется для условного отображения элемента на основе значения выражения, которое ей передается. Эта директива работает путем изменения CSS-свойства display элемента на none, если условие вычисляется как ложное, и на block или на его исходное значение, если условие истинно.

<div id="app">
  <p v-show="isVisible">Абзац будет показан или скрыт</p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      isVisible: true
    }
  });
</script>

Более подробнее об этой директиве и ее отличии от v-if можно посмотреть здесь.

https://webkyrs.info/page/vue-direktiva-v-show

v-for

Директива v-for во Vue используется для создания повторяющихся элементов в DOM на основе данных из массива или объекта. Она позволяет вам создавать элементы с помощью цикла на основе уровня данных.

Пример использования директивы v-for:

<div id="app">
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
</div>
new Vue({
  el: '#app',
  data: {
    items: [
      { id: 1, name: 'Item 1' },
      { id: 2, name: 'Item 2' },
      { id: 3, name: 'Item 3' }
    ]
  }
});

Подробный урок по этой директиве

https://webkyrs.info/page/vue-tsikl-for-direktiva-v-for

v-bind

Директива v-bind во Vue используется для привязки значений атрибутов HTML к уровню данных в компоненте Vue. Это позволяет динамически изменять значения атрибутов и свойств на основе данных в приложении Vue.

Например, если у вас есть переменная message в экземпляре Vue, и вы хотите использовать ее значение в атрибуте title элемента, вы можете сделать это с помощью v-bind следующим образом:

<div id="app">
  <div v-bind:title="message">
    Наведите курсор мыши здесь, чтобы увидеть сообщение
  </div>
</div>
<script>
  new Vue({
    el: '#app',
    data: {
      message: 'Привет, мир! Это сообщение из Vue.js.'
    }
  });
</script>

Более подробно об этом атрибуте мы поговорим вот здесь:

https://webkyrs.info/page/v-bind-vue-svyaz-shablona-s-dannimi

v-on

Директива v-on во Vue используется для прослушивания событий и выполнения определенных действий в ответ на эти события. Например, вы можете использовать v-on для привязки функции к событию клика или событию ввода данных.

Вот пример использования директивы v-on для привязки функции к событию клика:

<button v-on:click="handleClick">Нажми меня</button>

В этом примере, когда пользователь кликает на кнопку, вызывается метод handleClick из экземпляра Vue.

https://webkyrs.info/page/sobytiia-vue-js-i-ikh-obrabotka

v-model

Директива v-model во Vue.js используется для создания двусторонней привязки данных между элементом формы (например, input, textarea или select) и состоянием приложения. Это позволяет автоматически синхронизировать значения элементов формы с данными в вашем приложении, а также обновлять состояние приложения на основе ввода пользователя.

Когда значение элемента формы изменяется пользователем, значение в состоянии приложения автоматически обновляется. И наоборот, если вы измените значение в состоянии приложения, элемент формы автоматически обновится, чтобы отобразить новое значение.

Например, если у вас есть поле ввода текста и вы хотите сохранить его значение в состоянии вашего Vue.js приложения, вы можете использовать директиву v-model следующим образом:

<input v-model="message" placeholder="Введите текст">
data() {
  return {
    message: '' // начальное значение поля ввода
  }
}

Теперь, когда пользователь вводит текст в поле ввода, значение будет автоматически обновляться в свойстве message вашего Vue-компонента.

https://webkyrs.info/page/v-model-vue-svyaz-dannih-i-predstavleniya

По ходу курса мы с вами будем знакомиться с этими и другими разными директивами, которые мы можем использовать в наших шаблонах Vue компонентов. Давайте будем приступать.