MyTetra Share
Делитесь знаниями!
Встроенные директивы в Vue
28.01.2018
12:58
Автор: br0ke
Текстовые метки: javascript, vue.js, vuejs, vue, directive, built-in, built-in directive, directives, директивы, v-bind, v-model, v-on, v-once, v-html, v-if, v-for, @click
Раздел: Информационные технологии - JavaScript - Vue

Директива -- это команда, обрабатываемая 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>


Так же в этом разделе:
 
MyTetra Share v.0.52
Яндекс индекс цитирования