# Стандартные директивы в Vue.js

В этом видео мы с вами разберем стандартные директивы во vue. Если вы работали с Angular 1, то для вас практически не будет ничего нового, так как синтаксис отличается совсем немного и идея такая же.

Итак, что такое директива? Это кусок javascript кода, который применяется на любой DOM элемент и может его менять.

Сразу скажу, что мне вообще не нравится, что в vue скопировали директивы, как сущность с Angular 1 и компоненты с React. Потому что вы можете описать компонент и реализовать внутри любую бизнес логику какую хотите и переиспользовать этот компонент везде. И это намного более правильный подход, который используется и в других фреймворках, чем написание директив. И на мой взгляд, это запутывает начинающих, ведь можно написать компоненту, а можно директиву.

Итак, давайте разберем самые часто используемые директивы.

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

<div class='root'>
  {{message}}
  <input type='text' v-model='message'/>
</div>

new Vue({
  el: '.root',
  data: {
    message: 'someMessage'
  }
})

Это значит, что у нас при изменении message на странице меняется переменная. Вы можете вешать ее на input, select и textarea.

Дальше идет директивая v-on, которая позволяет вешать слушателей на DOM элементы. И, конечно, v-on:click - это самая часто используемая. И в v-on у нас есть алиас в виде собачки, чтобы писать меньше кода.

Давайте добавим кнопку с click, которая будет менять переменную в data.

<button @click='onSubmit'>Submit</button>

methods: {
  onSubmit () {
    console.log('onSubmit')
    this.isShown = !this.isShown
  }
}

Как мы видим в браузере, все работает.

Дальше идет v-show, которая позволяет скрывать елемент на странице, применяя к нему display:none.

<div v-show='isShown'>
  {{message}}
</div>

Если мы посмотрим на страницу, то элемент рендерится, но к нему применяется display: none.

Также у нас есть директива v-if, которая работает также, как и v-show, но удаляет элемент со страницы полностью.

<div v-if='isShown'>
  {{message}}
</div>

Вместе с v-if идет директива v-else. Ее можно повесить только на следующий элемент после директивы v-if. Тогда он будет отображаться, когда v-if не выполняется.

<div v-if='isShown'>
  {{message}}
</div>
<div v-else>
  else
</div>

Я бы не советовал использовать v-else, потому что, как только вы перенесете элемент, либо добавите еще один между ними, то ничего работать не будет. Лучше вместо v-else писать v-if с отрицанием.

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

data: {
  message: 'someMessage',
  isShown: false,
  users: [
    {name: 'Alex'},
    {name: 'Jack'},
    {name: 'John'}
  ]
}

<ul>
  <li v-for="user in users">
    {{user.name}}
  </li>
</ul>

Если мы посмотрим в браузер, то у нас вывелся список юзеров.

В этом видео мы с вами разобрали самые часто используемые директивы в vue.

Если у вас возникли какие-то вопросы или комментарии, пишите их прямо под этим видео.