Директивы Vue.js это специальные атрибуты, которые мы можем использовать внутри html шаблона компонента vue, для того чтобы тем или иным образом взаимодействовать с html тегами и не только. Все директивы обычно начинаются с буквы v, затем через дефис идет название директивы. В статье мы разберем основные директивы, которые вы будете наиболее часто использовать в вашем Vue приложении.
v-show
Данная директива отвечает за отображение элемента в зависимости от переданного значения. Если мы передадим в значение true, то элемент отобразится на странице и наоборот.
|
1 2 3 |
<template> <h1 v-show="true">Это заголовок</h1> </template> |
Так же мы можем передать в значение директивы функцию или метод, который будет возвращать булево значение.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<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. В зависимости от значений будет отображаться тот или иной компонент. В примере ниже отрисуется третий заголовок.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<template> <input type="text" v-model="inputText"> </template> <script> export default { name: 'App', data() { return { inputText: '' } } } </script> |
v-on
Добавление события на элемент реализуется директивой v-on. Аргументом директивы после двоеточия нужно передать название события. Названия событий аналогичны событиям JavaScript. В примере мы навесили обработчик события click, на кнопку, которая увеличивает переменную counter на единицу.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<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 доступна возможность навесить сразу несколько событий на элемент.
|
1 |
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button> |
v-for
Для того чтобы вывести данные массива в список элементов существует директива v-for. Она имеет следующий синтаксис — v-for=»item in items». В значение директивы мы передаем итерируемый элемент (в нашем случае это item) и массив, который мы будем обходить (items). Далее в теле тега мы уже можем обращаться к итерируемому элементу.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<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 разметку внутрь данного элемента.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<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 приложение. Надеюсь материал был полезен для вас.
