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
Care atribut specifica metoda HTTP de trimitere (GET, POST) a datelor din formular?
action method value
<form action="script.php" method="post"> ... </form>
Ce proprietate CSS adauga umbra la chenar?
background-image box-shadow border-radius
#id {
  background-color: #bbfeda;
  box-shadow: 11px 11px 5px #7878da;
}
Clic pe functia care elimina primul element dintr-un array?
pop() push() shift()
var fruits = ["mar", "cireasa", "banana"];
fruits.shift();
alert(fruits.length);           // 2
Indicati functia cu care se poate verifica daca un anumit modul e instalat in PHP.
function() filetype() extension_loaded()
if(extension_loaded("PDO") === true) echo "PDO este valabil."
Alegeti verbul auxiliar corect care trebuie in propozitia: " ... I listen to music?".
has have Can
 Can I listen to music?
- Pot asculta muzica?
Alegeti verbul corect care trebuie in propozitia: "Me ... las frutas dulces"
están gustan gusta
Me gustan las frutas dulces.
- Imi plac fructele dulci.
Componente in Vue JS

Last accessed pages

  1. Invatare Vue.js - Tutoriale (353)
  2. Download carti electronice si programe pentru Limba Engleza (24889)
  3. Curs PHP MySQL, Tutoriale si Scripturi PHP (48147)
  4. Curs si Tutoriale JavaScript (50505)
  5. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (120918)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (544)
  2. Curs HTML gratuit Tutoriale HTML5 (437)
  3. Curs PHP MySQL, Tutoriale si Scripturi PHP (377)
  4. Curs CSS Online Tutoriale CSS3 (375)
  5. Curs si Tutoriale Ajax (374)