Directivele sunt atribute speciale, cu prefixul v-. Rolul unei directive este sa aplice in mod reactiv modificari secundare la DOM atunci cand valoarea expresiei sale se schimba.
Sa vedem un exemplu cu directiva conditionala v-if.
In urmatorul exemplu directiva v-if adauga si sterge elementul <h4> in functie de valoarea True /False a proprietatii seen.
<div id='app'>
<h3 v-if='seen'>Now you see me</h3>
Click on this button to insert /remove the H4 element:
<button @click='seen =!seen'>Click</button>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {seen: false}
})
</script>
Alt exemplu, cu directiva
v-once care e folosita pentru a nu se mai face alte actualizari /modificari cand datele se schimba.
<div id='app'>
<span v-once>Asta nu se schimba: {{ msg }}</span>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {msg: 'Viata e Iubire'}
});
//Trying to change the msg
vm.msg ='Alt mesaj';
</script>
Argumente pentru Directive
La unele directive se poate aplica un "argument", notat cu caracterul doua-puncte dupa numele directivei ( v-directive:argument ).
De exemplu, directiva v-bind se poate folosi pentru a actualiza reactiv un atribut HTML.
Exemple
1. In urmatorul exemplu,
href este argumentul, care spune directivei
v-bind sa lege atributul "href" al tagului HTML cu valoarea proprietatii
url.
<div id='app'>
<a v-bind:href='url'>Link</a>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {url: '//coursesweb.net/'}
})
</script>
2. Directiva
v-html se aplica pentru a reda cod HTML. Valoare ei reprezinta numele proprietatii care contine sirul HTML.
<div id='demo'>
<div v-html='str_htm'></div>
</div>
<script>
var vm = new Vue({
el: '#demo',
data: {
str_htm: '<h3>Iertarea vindeca</h3><b>Iert totul, inclusiv pe mine</b>, mintea devine sanatoasa si <i>trupul se vindeca</i>.'
}
})
</script>
3. Un alt exemplu e cu directiva
v-on care e folosita pentru a detecta evenimente aplicate de utilizator (click, input, mouseenter, etc.):
<div id='app'>
<button v-on:click='test_f'>Click Btn</button>
</div>
<script>
var vm = new Vue({
el: '#app',
methods: {
test_f: function(){
alert('MarPlo.net');
}
}
})
</script>
- Aici argumentul (click) e numelke evenimentului care va fi urmarit, iar
test_f e numele metodei care va fi apelata.
Argumente Dinamice pentru Directive
In Vue JS se pot folosi argumente dinamice, adaugate intre paranteze patrate ( v-directive:[argument] ).
In urmatorul exemplu ev_name va fi evaluat dinamic iar valoarea evaluata va reprezenta evenimentul urmarit.
<div id='app'>
<button v-on:[ev_name]='test_f'>Click Btn</button>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {ev_name: 'click'},
methods: {
test_f: function(){
alert('MarPlo.net');
}
}
})
</script>
Cand valoarea proprietatii
ev_name e "click",
v-on:[ev_name] va fi echivalent cu
v-on:click.
Modificatori
Modificatorii indica faptul ca o directiva trebuia evaluata intr-un mod special. Acestea sunt sufixe adaugate cu punct dupa numele atributului.
De exemplu, modificatorul .prevent transmite directivei v-on sa apeleze event.preventDefault() la evenimentul declansat:
<form v-on:submit.prevent='onSubmit'> ... </form>
Notatii prescurtate la v-bind si v-on
Vue ofera prescurtari speciale pentru doua dintre cele mai des utilizate directive, v-bind si v-on.
prescurtari v-bind
<!-- full syntax -->
<a v-bind:href='url'> ... </a>
<!-- shorthand -->
<a :href='url'> ... </a>
<!-- shorthand with dynamic argument -->
<a :[key]='url'> ... </a>
prescurtari v-on
<!-- full syntax -->
<a v-on:click='doSomething'> ... </a>
<!-- shorthand -->
<a @click='doSomething'> ... </a>
<!-- shorthand with dynamic argument -->
<a @[event]='doSomething'> ... </a>