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>

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Ce tag HTML5 este indicat sa contina meniul cu link-uri de navigare in site?
<section> <nav> <article>
<nav><ul>
 <li><a href="http://coursesweb.net/css/" title="CSS Course">CSS Course</a></li>
 <li><a href="http://www.marplo.net/jocuri/" title="Flash Games">Flash Games</a></li>
</ul></nav>
Ce proprietate CSS muta elementrul in dreapta sau stanga de la locul unde e?
text-align clear float
.some_class {
  width: 30%;
  float: left;
}
Clic pe metoda obiectului Math care rotunjeste numarul x descrescator la cel mai apropiat intreg.
Math.ceil(x) Math.abs(x) Math.floor(x)
var num = 12.34567;
num = Math.floor(num);
alert(num);       // 12
Indicati functia PHP care returneaza numarul de caractere dintr-un sir.
mb_strlen() count() stristr()
$str = "sir cu caractere utf-8 åèö";
$nrchr = mb_strlen($str);
echo $nrchr;        // 29
Clic pe raspunsul potrivit la intrebarea: "When it happened?".
On the 7th of July 1996 It is a quarter to 5. Nice weather.
When it happened? On the 8th of August 2001.
- Cand s-a intamplat? Pe 8 August 2001.
Indicati raspunsul potrivit la intrebarea: "¿Cuando sucedió?".
Hace buen tiempo. En el 8 de Agosto de 2001 Son las tres menos cuarto.
¿Cuando sucedió? En el 8 de Agosto de 2001.
- Cand s-a intamplat? Pe 8 August 2001.
Vue Directive

Last accessed pages

  1. Confusable words - Cuvinte confundabile - Test Engleza (1416)
  2. Trecutul simplu si continuu - Past Tense Simple and Continuous (35871)
  3. Prezentul simplu - Exercitii si teste incepatori (19146)
  4. Confusable words - Cuvinte confundabile (2962)
  5. Curs HTML gratuit Tutoriale HTML5 (32791)

Popular pages this month

  1. Prezentul simplu si continuu - Present Tense Simple and Continuous (3122)
  2. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (2512)
  3. Gramatica limbii engleze - Prezentare Generala (2357)
  4. Prezent perfect si Prezent perfect continuu - Present perfect and Continuous (1961)
  5. Trecutul simplu si continuu - Past Tense Simple and Continuous (1611)