Директивы Vue.js это специальные атрибуты, которые мы можем использовать внутри html шаблона компонента vue, для того чтобы тем или иным образом взаимодействовать с html тегами и не только. Все директивы обычно начинаются с буквы v, затем через дефис идет название директивы. В статье мы разберем основные директивы, которые вы будете наиболее часто использовать в вашем Vue приложении.

v-show

Данная директива отвечает за отображение элемента в зависимости от переданного значения. Если мы передадим в значение true, то элемент отобразится на странице и наоборот.

<template>
  <h1 v-show="true">Это заголовок</h1>
</template>

Так же мы можем передать в значение директивы функцию или метод, который  будет возвращать булево значение.

<template>
  <h1 v-show="showTitle(3)">Это заголовок</h1>
</template>

<script>
    export default {
        name: 'App',
        data() {
        },
        methods: {
            showTitle(num) {
                return num > 0
            }
        }
    }
</script>

В данном случае если мы передадим в метод showTitle число > 0, то заголовок будет отображаться, если отрицательное, то нет.

v-if

Эта директива так же как и v-show отвечает за условную отрисовку элементов, с той лишь разницей, что при использовании v-show элемент всегда будет оставаться в DOM и будет меняться только значение css свойcтва display. Если вы управляете видимостью элемента через v-if, то ваш элемент будет пропадать и появляться в DOM дереве в зависимости от значения директивы. v-if принимает значения по аналогии с v-show.

<template>
  <h1 v-if="showTitle(3)">Это заголовок</h1>
</template>

<script>
    export default {
        name: 'App',
        methods: {
            showTitle(num) {
                return num > 0
            }
        }
    }
</script>

v-else, v-else-if

Директива v-if удобна тем, что её можно использовать вместе с директивами v-else и v-else-if. В зависимости от значений будет отображаться тот или иной компонент. В примере ниже отрисуется третий заголовок.

<template>
  <h1 v-if="showTitle(-2)">Это заголовок</h1>
  <h1 v-else-if="showTitle(-3)">Это заголовок 2</h1>
  <h1 v-else>Это заголовок 3</h1>  
</template>

<script>
    export default {
        name: 'App',
        data() {
        },
        methods: {
            showTitle(num) {
                return num > 0
            }
        }
    }
</script>

v-bind

Директива служит для так называемой data binding — привязки данных. Для того чтобы осуществить вывод динамических данных внутри html атрибута необходимо передать аргументом директиве v-bind этот атрибут. Аргументы к директивам передаются после символа двоеточие. Например: v-bind:href. В примере кода мы привязали значение переменной url к атрибуту href.

<template>
  <а class="link" v-bind:href="urlToGoogle">Google</а>
</template>

<script>
    export default {
        name: 'App',
        data() {
            return {
                urlToGoogle: 'https://www.google.com/'
            }
        }
    }
</script>

v-model

Директива несколько похожа на v-bind и служит для двухсторонней привязки между данными элементами формы и данными из объекта data (two-way binding). Директива игнорирует атрибуты value, checked, selected, которые присутствуют у элементов. За истинное значение директива берет данные, которые мы передаём ей из объекта data. В примере ниже мы привязали значение инпута к переменной inputText в объекте дата экземпляра vue. При вводе данных значение из инпута будет автоматически записываться в переменную inputText.

<template>
  <input type="text" v-model="inputText">
</template>

<script>
    export default {
        name: 'App',
        data() {
            return {
                inputText: ''
            }
        }
    }
</script>

v-on

Добавление события на элемент реализуется директивой v-on. Аргументом директивы после двоеточия  нужно передать название события. Названия событий аналогичны событиям JavaScript. В примере мы навесили обработчик события click, на кнопку, которая увеличивает переменную counter на единицу.

<template>
  <div class="counter">{{counter}}</div>
  <button v-on:click="increaseCounter">+1</button>
</template>

<script>
    export default {
        name: 'App',
        data() {
            return {
                counter: 0
            }
        },
        methods: {
            increaseCounter: function () {
                return this.counter++;
            }
        }
    }
</script>

Так же с версии vue 2.4.0 доступна возможность навесить сразу несколько событий на элемент.

<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

v-for

Для того чтобы вывести данные массива в список элементов существует директива v-for. Она имеет следующий синтаксис — v-for=»item in items». В значение директивы мы передаем итерируемый элемент (в нашем случае это item) и массив, который мы будем обходить (items). Далее в теле тега мы уже можем обращаться к итерируемому элементу.

<template>
  <ul class="students">
    <li v-for="student in students">{{student}}</li>
  </ul>
</template>

<script>
    export default {
        name: 'App',
        data() {
            return {
                students: [
                    'Alex',
                    'Robert',
                    'Marta'
                ]
            }
        }        
    }
</script>

Данный код выведет следующий результат:

• Alex
• Robert
• Marta

v-html

С помощью данной директивы по аналогии с innerHTML можно устанавливать html разметку внутрь данного элемента.

<template>
  <div v-html="code"></div>
</template>

<script>
    export default {
        name: 'App',
        data() {
            return {
                code: '<i>Hello</i> <small>World</small>!'
            }
        }
    }
</script>

 

Заключение

В статье мы познакомились с основными директивами Vue.js , без которых не обходится ни одно Vue приложение. Надеюсь материал был полезен для вас.