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
Ce tip de <input> creaza un camp de text care trebuie sa contina doar numere?
type="text" type="number" type="date"
<input type="number" name="points" min="5" max="80" />
Ce proprietate CSS permite modificarea transparentei unui element?
font-style opacity color
#id {
  filter:alpha(opacity=40);    /* for IE */
  opacity:0.4;
}
Clic pe functia care formateaza un numar la o anumita lungime de caractere.
toPrecision() exp() toFixed()
var num = 12.84567;
alert( num.toPrecision(3) );       // 12.8
Ce functie aranjeaza aleator elementele dintr-un array?
natsort() shuffle() sort()
$lang =[10=>"PHP", 20=>"JavaScript", "site"=>"coursesweb.net");
shuffle($lang);
var_export($lang);     // array (0=>"coursesweb.net", 1=>"PHP", 2=>"JavaScript")
Indicati Superlativul cuvantului "good" (bun).
better best goodest
She is the best in our class.
- Ea este cea mai buna din clasa noastra.
Care este Superlativul cuvantului "bueno" (bun)?
el mejor más bueno muy bueno
Él es el mejor en nuestra clase.
- El este cel mai bun din clasa noastra.
Vue Directive

Last accessed pages

  1. Teste spaniola - Tests y ejercicios de Español - Gramática (29476)
  2. Limba spaniola curs online incepatori si avansati (31335)
  3. Prezent perfect - Exercitii si teste incepatori (21176)
  4. Cursuri Franceza, Germana, Italiana si Rusa (8294)
  5. Accentul si Pronuntia (28894)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (150)
  2. Coduri pt culori (75)
  3. Gramatica limbii engleze - Prezentare Generala (74)
  4. Cursuri limba engleza gratuite si lectii online (63)
  5. Gramatica limbii spaniole. Indrumator si prezentare generala (56)