Директива -- это команда, обрабатываемая Vue, записанная как аттрибут HTML-тэга. Обычно директивы Vue начинаются с префикса 'v-'. Некоторым директивам можно передавать дополнительные аргументы через двоеточие.

Например:

<div class='root'>

{{message}}

<input type='text' v-model='message'/>

</div>

new Vue({

el: '.root',

data: {

message: 'someMessage'

}

})

Список часто используемых встроенных директив (built-in directives):

1. v-bind (сокращается как ':');
2. v-model;
3. v-on (сокращается как '@');
4. v-once;
5. v-html;
6. v-if и v-else;
7. v-for.

v-bind:

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

Например:

<div v-bind:id="dynamicId"></div>

<img v-bind:src="imgSrc">

<!-- Ниже используем сокращенный синтаксис -->

<a :href="linkUrl">{{linkName}}</a>

v-model:

Создает двухстороннюю привязку HTML-элемента и свойства. Например, это можно использовать для редактирования свойств через поля ввода (input).

Например:

<div class='root'>

{{message}}

<input type='text' v-model='message'/>

</div>

new Vue({

el: '.root',

data: {

message: 'someMessage'

}

})

v-on:

Устанавливает обработчик на событие (event). Поддерживаются все стандартные события DOM. Название события нужно передать через двоеточие. Через точку после названия события поддерживаются модификаторы. Модификаторы можно объединять в цепочки (использовать сразу несколько).

Например:

<div id="example-1">
<button v-on:click="counter += 1">+1</button>
<p>Кнопка выше была нажата {{counter}} раз</p>
</div>

var example1 = new Vue({
el: '#example-1',
data: {
counter: 0
}
})

Еще пример:

<!-- событие click не будет всплывать дальше -->
<a v-on:click.stop="doThis"></a>

<!-- событие submit больше не будет перезагружать страницу -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- модификаторы можно объединять в цепочки -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- Событие click сработает только 1 раз -->
<a v-on:click.once="doThis"></a>

<!-- вызвать `vm.submit()` только если `keyCode` равен 13 -->
<input v-on:keyup.13="submit">

<!-- аналогично примеру выше -->
<input v-on:keyup.enter="submit">

<!-- работает также и в сокращённой записи -->
<input @keyup.enter="submit">

Еще пример:

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">

<button v-on:click="increase(2, $event)">Click me</button>

<p>{{ counter }}</p>

<p v-on:mousemove="updateCoordinates">

Coordinates: {{ x }} / {{ y }}

- <span v-on:mousemove.stop="">DEAD SPOT</span>

</p>

<input type="text" v-on:keyup.enter.space="alertMe">

</div>

new Vue({

el: '#app',

data: {

counter: 0,

x: 0,

y: 0

},

methods: {

increase: function(step, event) {

this.counter += step;

},

updateCoordinates: function(event) {

this.x = event.clientX;

this.y = event.clientY;

},

alertMe: function() {

alert('Alert!');

}

}

});

v-once:

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

Пример:

<!-- single element -->
<span v-once>This will never change: {{msg}}</span>
<!-- the element have children -->
<div v-once>
<h1>comment</h1>
<p>{{msg}}</p>
</div>
<!-- component -->
<my-component v-once :comment="msg"></my-component>
<!-- `v-for` directive -->
<ul>
<li v-for="i in list" v-once>{{i}}</li>
</ul>

v-html:

По умолчанию синтаксис интерполяции экранирует HTML-теги, так что HTML-код будет просто выведен на экран текстом. Если же нужно отрисовать HTML на странице, то необходимо использовать директиву v-html. Содержимое будет выведено как обычный HTML, а не как шаблон Vue. ВНИМАНИЕ! Использование может создать возможность для XSS-атаки. Ни в коем случае нельзя использовать v-html для пользовательского ввода.

Пример:

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

Еще пример:

<div id="app">

<h1 v-once>{{ title }}</h1>

<p>{{ sayHello() }} - <a v-bind:href="link">Google</a></p>

<hr>

<p v-html="finishedLink"></p>

</div>

new Vue({

el: '#app',

data: {

title: 'Hello World!',

link: 'http://google.com',

finishedLink: '<a href="http://google.com">Google</a>'

},

methods: {

sayHello: function() {

this.title = 'Hello!';

return this.title;

}

}

});

v-if:

Осуществляет рендеринг элемента, только если передаваемое значение истинно. При изменении значения выражения на противоположное, элемент и содержащиеся в нем компоненты и директивы уничтожаются/пересоздаются. Если значение ложно, то элемент будет полностью удален из DOM.

Пример:

<h1 v-if="ok">Да</h1>
<h1 v-else>Нет</h1>

v-for:

Осуществляет многократный рендеринг элемента, основываясь на переданных данных. Значение директивы должно соответствовать синтаксису "alias in expression". Внутри элемента будет доступно свойство alias, которое будет меняться в зависимости от итерации.

Примеры:

<div v-for="item in items">
{{ item.text }}
</div>

<div v-for="(item, index) in items"></div>
<div v-for="(val, key) in object"></div>
<div v-for="(val, key, index) in object"></div>