Componentele Vue sunt o caracteristica importanta in VueJS, cu ele se pot crea elemente personalizate care pot fi refolosite de mai multe ori in HTML.
Componentele se creaza cu metoda: Vue.component().

- Sintaxa:
Vue.component('component-name', { options });

Accepta aceleasi optiuni ca si new Vue(), precum data, computed, watch, methods, si functii "lifecycle hooks". Singura exceptie fiind cateva proprietati specifice pentru elementul radacina, precum el.
Proprietatea data trebuie sa fie o functie care returneaza un obiect, astfel incat fiecare instanta sa poata mentine o copie independenta a datelor returnate.

Sa cream o componenta, care sa ofere o mai buna intelegere a modului in care componentele functioneaza in Vue.js.
// Define a new component called test_comp
Vue.component('test_comp', {
 data: function(){
 return { txt:'Viata este miracol' }
 },
 template: '<div><h4>Acesta sunt Eu</h4><p>{{txt}}.</p></div>'
});

Ca sa utilizati aceasta componenta Vue in documentul html, creati un element html personalizat in care numele etichetei este numele componentei (aici "test_comp"), apoi creati o instanta Vue, ca in exemplul urmator:
<div id='demo'>
 <test_comp></test_comp>
</div>

<script>
new Vue({ el: '#demo' });
</script>
Tag-ul personalizat (aici <test_comp>) e inlocuit cu valoarea proprietatii template definita in component.

Daca aveti mai multe taguri html in template-ul componentei, trebuie sa le adaugati pe toate intr-un element parinte.
In exemplul nostru am adaugat tagurile H4 si P in interiorul unui Div.


Reutilizare Componente Vue

Componentele pot fi refolosite de cate ori doriti.
Exemplu:
<div id='demo'>
 <test_comp></test_comp>
 <test_comp></test_comp>
 <test_comp></test_comp>
</div>

<script>
// Define a new component called test_comp
Vue.component('test_comp', {
 data: function(){
 return { txt:'Viata este miracol' }
 },
 template: '<div><h4>Aceasta sunt EU</h4><p>{{txt}}.</p></div>'
});

// Create a Vue instance
new Vue({ el: '#demo' });
</script>

Evenimente si Metode in Componente

In Componentele Vue se pot defini metode (in methods), precum si evenimente in codul HTML de la proprietatea template.
Exemplu:
<div id='demo'>
Click on these:
 <comp_test></comp_test>
 <comp_test></comp_test>
</div>

<script>
// Define a new component called comp_test
Vue.component('comp_test', {
 template: '<div v-bind:style="styleobj" @click="countClicks">Nr. clicks: {{ nr_c }}.</div>',
 data: function(){
 return {nr_c:0, styleobj:{background:'#babafe', height:'80px', margin:'8px', width:'111px'}};
 },
 methods:{
 countClicks: function(ev){
 this.nr_c++;
 }
 }
});

// Create a Vue instance
new Vue({ el: '#demo'});
</script>

Transmitere date in Component cu Props

In Vue.js props contine variabile ce pot fi utilizate pentru a transmite valori la sub-elementele HTML din component.
Props sunt atribute personalizate pe care le puteti inregistra intr-o componenta si sunt definite intr-un Array in proprietatea props.
Testati si studiati urmatorul exemplu:
<div id='demo'>
 <comp_button text='Comments'></comp_button>
 <comp_button text='Likes'></comp_button>
 <comp_button text='Shares'></comp_button>
</div>

<script>
// Define a new component called comp_button
Vue.component('comp_button', {
 props: ['text'],
 template: '<button>{{text}}</button> '
});

// Create a Vue instance
new Vue({ el: '#demo' });
</script>
Props sunt similare cu variabilele, transmit valorile pe care le primesc din codul componentei (sau de la instanta Vue) la elementele copil din componenta.
Putem obtine aceleasi rezultat cu urmatorul cod (cu o directiva v-for); formula mai eleganta:
<div id='demo'>
 <comp_button v-for='txt in ar_txt' v-bind:text='txt'></comp_button>
</div>

<script>
// Define a new component called comp_button
Vue.component('comp_button', {
 props: ['text'],
 template: '<button>{{text}}</button> '
});

const btn_txt =['Comments', 'Likes', 'Shares']; //array with data for text in component

// Create a Vue instance
new Vue({
 el: '#demo',
 data:{
 ar_txt: btn_txt
 }
});
</script>

Componente Globale si Locale

Componentele globale sunt definite cu metoda Vue.component(), dar componentele pot fi inregistrate si direct in instanta Vue, in proprietatea components. Aceasta se numeste inregistrare Locala, dupa cum se vede si in urmatorul script:
<div id='demo'>
 <comp_arti v-for='obj in article' v-bind:post='obj'></comp_arti>
</div>

<script>
//array with data for article content in component
const arti =[
 {title: 'Sunt Fericit', cnt:'<i>Transmit doar bucurie</i>'},
 {title: 'Sunt Bun', cnt:'<b>Recunosc sfintenie si inocenta in tot ce percep.</b>'},
 {title: 'Sunt (in) Pace', cnt:'<b>Doar sunt Eu insumi.</b>'}
];

// Create a Vue instance
new Vue({
 el: '#demo',
 data:{
 article: arti
 },
 components:{
 comp_arti:{
 props:['post'],
 template:'<div><h3>{{post.title}}</h3><div v-html="post.cnt"></div></div>'
 }
 }
});
</script>

Distribuire Continut cu Slot

Daca doriti sa transmiteti continut html direct de la tagul parinte la o componenta, utilizati tagul <slot> in template-ul componentei.
In urmatorul exemplu, tagul <slot> va fi inlocuit cu continutul HTML adaugat in elementul <msg_box> (parinte).
<div id='demo'>
 <msg_box>
 <i>Sunt Liber.</i>
 </msg_box>
</div>

<script>
Vue.component('msg_box', {
 template:'<div class="my_msg"><b>Succes:</b> <slot></slot></div>'
})

// Create a Vue instance
new Vue({
 el: '#demo'
});
</script>

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Ce atribut indica faptul ca un camp de formular trebuie completat?
required="required" autofocus="autofocus" placeholder="text"
<input type="text" name="name1" required="required" />
Ce metoda CSS misoreaza sau mareste dimensiunile unui element (inclusiv continutul)?
translate() scale() skew()
#some_id:hover {
  transform: scale(2, 1.5);
  -ms-transform: scale(2, 1.5);    /* IE 9 */
  -moz-transform: scale(2, 1.5);   /* Firefox */
}
Click pe metoda obiectului Date care returneaza ziua din luna.
setDate() getMonth() getDate()
var rightnow = new Date();
var day = rightnow.getDate();
alert(day);
Ce functie este folosita pentru a incarca un fisier pe server?
is_file() move_uploaded_file() fopen()
if(move_uploaded_file($_FILES["field_name"]["tmp_name"], "dir/file_name")) {
  echo "Fisierul a fost incarcat";
}
Cum se spune in engleza expresia: "Ploua cu galeata"?
rain cats and dogs rain buckets quiet rain
In Bucharest it`s raining cats and dogs.
- In Bucuresti ploua cu galeata.
Cum se spune in spaniola expresia: "Ploua cu galeata"?
llover cubo llover a cántaros lluvia tranquila
En Madrid está lloviendo a cántaros.
- In Madrid ploua cu galeata.
Componente in Vue JS

Last accessed pages

  1. Exercitii engleza - English Tests and exercises - Grammar (32046)
  2. Trecut perfect continuu - Exercitii si teste incepatori (2307)
  3. Curs CSS Online Tutoriale CSS3 (7298)
  4. Curs si Tutoriale JavaScript (15264)
  5. Trecut perfect - Exercitii si teste incepatori (2839)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (2353)
  2. Curs HTML gratuit Tutoriale HTML5 (1689)
  3. Curs si Tutoriale JavaScript (1651)
  4. Curs PHP MySQL, Tutoriale si Scripturi PHP (1605)
  5. Curs CSS Online Tutoriale CSS3 (1487)