Curs Vuejs


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
Care meta tag se foloseste pentru scurta descriere a paginii?
<meta content="..."> <meta description="..."> <meta http-equiv="...">
<meta name="description" content="70-160 caractere ce descriu continutul paginii" />
Ce proprietate CSS opreste efectul dat de "float"?
clear text-align position
#some_id {
  clear: both;
}
Clic pe metoda ce creaza un array cu toate elementele din pagina cu un anumit nume de tag.
getElementsByName() getElementById() getElementsByTagName()
var divs = document.getElementsByTagName("div");
var nr_divs = divs.length;
alert(nr_divs);
Indicati functia PHP ce returneaza numarul de elemente dintr-un array.
is_[) count() strlen()
$arr =[7, 8, "abc", 10);
$nri = count($arr);
echo $nri;        // 4
Indicati adverbul corespunzator adjectivului din paranteza in propozitia: "I live (happy)".
happly happily hapily
I live happily.
- Traiesc fericit (in mod fericit).
Indicati adverbul corespunzator adjectivului din paranteza in propozitia: "Vivo (feliz)".
felizamente felizmente felices
Vivo felizmente.
- Traiesc fericit (cu fericire).
Vue Directive

Last accessed pages

  1. Curs PHP MySQL, Tutoriale si Scripturi PHP (65714)
  2. Genul substantivelor 2 (4174)
  3. Curs HTML gratuit Tutoriale HTML5 (101247)
  4. Prezentul continuu - Exercitii si teste incepatori (18691)
  5. Genul substantivelor 1 (5837)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (2930)
  2. Curs HTML gratuit Tutoriale HTML5 (2369)
  3. Curs si Tutoriale JavaScript (2106)
  4. Curs PHP MySQL, Tutoriale si Scripturi PHP (2077)
  5. Curs CSS Online Tutoriale CSS3 (1988)