Componente in Vue JS

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>

<<-VueJS - Utilizare v-bind -- Class si Style cu ..->>

Un Test simplu in fiecare zi

HTML

CSS

JavaScript

PHP-MySQL

Engleza

Spaniola

Ce atribut face ca valoarea din caseta de text sa nu poata fi modificata de utilizator?

checked="checked" readonly="readonly" disabled="disabled"

<input type="text" value="valoare-fixa" readonly="readonly" name="a_name" />

Ce proprietate CSS permite crearea de colturi rotunjite?

background-size border-size border-radius

.class {
  border:2px solid blue;
  border-radius:1.2em;
}

Ce instructiune afiseaza o fereastra cu mesaj si butoane OK si Cancel?

indexOf() confirm() prompt()

var ques = window.confirm("Rezultatul lui 0+0 este 0?");
if (ques) alert("Corect");
else alert("Incorect");

Indicati functia PHP care returneaza numarul cel mai mic dintr-o multime de numere.

floor() ceil() min()

$min_nr = min(12, 8, 25, 13);
echo $min_nr;        // 8

Alegeti verbul corect care trebuie in propozitia: "Its ears ... big".

are is has

Its ears are big.
- Urechile lui sunt mari.

Alegeti verbul corect care trebuie in propozitia: "Los niños ... deportistas"

soy son está

Los niños son deportistas.
- Copii sunt sportivi.