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 tag HTML5 este indicat sa contina meniul cu link-uri de navigare in site?
<section> <nav> <article>
<nav><ul>
 <li><a href="http://coursesweb.net/css/" title="CSS Course">CSS Course</a></li>
 <li><a href="http://www.marplo.net/jocuri/" title="Flash Games">Flash Games</a></li>
</ul></nav>
Ce proprietate CSS muta elementrul in dreapta sau stanga de la locul unde e?
text-align clear float
.some_class {
  width: 30%;
  float: left;
}
Clic pe metoda obiectului Math care rotunjeste numarul x descrescator la cel mai apropiat intreg.
Math.ceil(x) Math.abs(x) Math.floor(x)
var num = 12.34567;
num = Math.floor(num);
alert(num);       // 12
Indicati functia PHP care returneaza numarul de caractere dintr-un sir.
mb_strlen() count() stristr()
$str = "sir cu caractere utf-8 åèö";
$nrchr = mb_strlen($str);
echo $nrchr;        // 29
Clic pe raspunsul potrivit la intrebarea: "When it happened?".
On the 7th of July 1996 It is a quarter to 5. Nice weather.
When it happened? On the 8th of August 2001.
- Cand s-a intamplat? Pe 8 August 2001.
Indicati raspunsul potrivit la intrebarea: "¿Cuando sucedió?".
Hace buen tiempo. En el 8 de Agosto de 2001 Son las tres menos cuarto.
¿Cuando sucedió? En el 8 de Agosto de 2001.
- Cand s-a intamplat? Pe 8 August 2001.
Componente in Vue JS

Last accessed pages

  1. Curs CSS Online Tutoriale CSS3 (4434)
  2. Conditional IF in Limba Engleza - Fraze Conditionale (39931)
  3. Prezentul simplu si continuu - Present Tense Simple and Continuous (52156)
  4. Poezii pentru copii, in engleza (8573)
  5. Lucrul cu stiluri CSS (2771)

Popular pages this month

  1. Prezentul simplu si continuu - Present Tense Simple and Continuous (3122)
  2. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (2511)
  3. Gramatica limbii engleze - Prezentare Generala (2356)
  4. Prezent perfect si Prezent perfect continuu - Present perfect and Continuous (1960)
  5. Trecutul simplu si continuu - Past Tense Simple and Continuous (1609)