Curs Vuejs


Vue.js contine un set de directive de baza pentru a afisa sau ascunde elemente HTML bazate pe conditii: v-if, v-else, v-else-if si v-show.

Directiva v-if

Directiva v-if adauga sau sterge elemente din DOM in functie de valoarea true sau false a expresiei date.

- Sintaxa:
<div v-if='can_add'>content</div>
Daca valoarea lui "can_add" e True acel element HTML e adaugat in DOM, daca valoarea e False elementul e sters.

- Exemple:
<div id='demo'>
 <div v-if='can_add'>Iertarea este vindecare.</div>
 Click to <button @click='addRem'>Add/Remove</button>
</div>

<script>
var vm = new Vue({
 el: '#demo',
 data:{ can_add:false },
 methods:{
 addRem:function(){
 this.can_add = !this.can_add; //switch true /false
 }
 }
});
</script>

Grupuri conditionale v-if in <template>

Directiva v-if poate fi atasata la un singur element, dar se pot controla si mai multe elemente HTML cu un v-if. Pentru a face asta se adauga toate acele taguri HTML in elementul <template>.

- Exemplu:
<div id='demo'>
 <template v-if='can_add'>
 <h4>Iertarea este vindecare.</h4>
 <h4>Vindecarea este iertare.</h4>
 </template>
 Click to <button @click='addRem'>Add/Remove</button>
</div>

<script>
var vm = new Vue({
 el: '#demo',
 data:{ can_add:false },
 methods:{
 addRem:function(){
 this.can_add = !this.can_add; //switch true /false
 }
 }
});
</script>

Directiva v-else

Directiva v-else este utilizata pentru a adauga continut doar atunci cand expresia adiacenta v-if e False.
La v-else nu se adauga valoare, dar se adauga intr-un tag HTML care sa urmeze imediat dupa un element cu v-if sau v-else-if.

- Exemplu:
<div id='demo'>
 <h4 v-if='can_add'>This is in tag with v-if.</h4>
 <h4 v-else>This content is from v-else.</h4>
 Click to <button @click='addRem'>Toggle message</button>
</div>

<script>
var vm = new Vue({
 el: '#demo',
 data:{ can_add:false },
 methods:{
 addRem:function(){
 this.can_add = !this.can_add; //switch true /false
 }
 }
});
</script>

Directiva v-else-if

Directiva v-else-if se foloseste cand avem mai mult de doua optiuni conditionale.
Un element v-else-if urmeaza imediat dupa un v-if sau un alt tag cu v-else-if.

- Exemplu:
<div id='demo'>
 <h4 v-if='rest ==1'>This is in the tag with v-if, rest ={{rest}}.</h4>
 <h4 v-else-if='rest ==2'>This is from v-else-if, rest ={{rest}}.</h4>
 <h4 v-else>This content is from v-else, rest not 1 or 2; rest ={{rest}}.</h4>
 Click to <button @click='addRem'>Alternate elements</button>
</div>

<script>
var vm = new Vue({
 el: '#demo',
 data:{ rest:0, nr:0 },
 methods:{
 addRem:function(){
 this.nr++;
 this.rest = this.nr %3;
 }
 }
});
</script>

Directiva v-show

Efectul directivei v-show e similar cu v-if, se foloseste pentru a ascunde sau afisa un element HTML in functie de valoarea unei expresii.
Diferenta dintre ele este:

- Exemplu:
<div id='demo'>
 <h4 v-show='can_show'>Observarea duce la vindecare.</h4>
 Click to <button @click='addRem'>Show /Hide</button>
</div>

<script>
var vm = new Vue({
 el: '#demo',
 data:{ can_show:false },
 methods:{
 addRem:function(){
 this.can_show = !this.can_show; //switch true /false
 }
 }
});
</script>

v-show prezinta un avantaj de performanta daca elementele sunt afisate si ascunse frecvent, in timp ce v-if are avantajul cand vine vorba de timpul de redare initial.

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Ce atribut e folosit in tag-ul <a> pentru adresa link-ului?
src href rel
<a href="http://coursesweb.net/" title="CoursesWeb.net">CoursesWeb.net</a>
Ce proprietate CSS seteaza tipul fontului utilizat?
font-family text-decoration font-size
h2 {
  font-family:"Calibri", sans-serif;
}
Ce instructiune selecteaza toate tag-urile <div> cu class="cls"?
querySelector("div.cls") getElementsByTagName("div") querySelectorAll("div.cls")
var elm_list = document.querySelectorAll("div.cls");
var nr_elms = elm_list.length;       // numar elemente selectate
alert(nr_elms);
Indicati functia care returneaza suma valorilor dintr-un array.
array_sum() array_diff() array_shift()
$arr =[1, 2, 3, 4);
$arr_sum = array_sum($arr);
echo $arr_sum;       // 10
Indicati forma corecta a verbului "study" (a studia) la Trecutul Simplu in aceasta propozitie: "We (study) English."
studyed studys studied
We studied English.
- Noi am studiat engleza.
Indicati forma corecta a verbului "decir" (a spune) la Prezent in aceasta propozitie: "Yo (decir) siempre la verdad."
digas digo decir
Yo digo siempre la verdad.
- Eu spun mereu adevarul.
Directive Conditionale v-if, v-else, v-show

Last accessed pages

  1. Curs si Tutoriale Ajax (91487)
  2. Verbe modale 2 - Teste incepatori (6720)
  3. Creare obiecte, proprietati si metode (1152)
  4. Prepozitii - Prepositions (23343)
  5. Curs CSS Online Tutoriale CSS3 (99504)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (5467)
  2. Curs HTML gratuit Tutoriale HTML5 (4599)
  3. Curs si Tutoriale JavaScript (3969)
  4. Curs PHP MySQL, Tutoriale si Scripturi PHP (3724)
  5. Curs CSS Online Tutoriale CSS3 (3629)