Curs Vuejs


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 tag creaza un text ingrosat?
<q> <strong> <em>
<p>Adresa: <strong>http://CoursesWeb.net/</strong> - Tutoriale.</p>
Care din aceste coduri CSS afiseaza textul ingrosat?
text-size: 18px; font-style: italic; font-weight: 800;
#id {
  font-weight: 800;
}
Ce functie JavaScript apeleaza o alta functie, in mod repetat, la un anumit interval de timp?
setInterval() setTimeout() push()
function someFunction() { alert("CoursesWeb.net"); }
setInterval("someFunction()", 2000);
Clic pe variabila definita corect in PHP.
var vname = 8; $vname = 8; $vname == 8;
$vname = 8;
echo $vname;
Care din urmatoarele forme ale verbului "travel" (a calatori) e la timpul Prezent Perfect?
have traveled shall travel had traveled
We have traveled in space.
- Noi am calatorit (deja) in spatiu.
Care din urmatoarele forme ale verbului "pintar" (a picta) se foloseste la Trecutul Imperfect?
ir a pintar pintaba pintó
La niña pintaba un arco iris.
- Fetita picta un curcubeu.
Componente in Vue JS

Last accessed pages

  1. Preluare date dintr-un sir cu obiect JSON (298)
  2. Verbe frazale din limba Engleza (22887)
  3. Scriere cod CSS (2899)
  4. PHP PDO Introducere Conectari la Baze de Date (1170)
  5. Verbe modale - SHALL, SHOULD, OUGHT TO, WILL, WOULD, USED TO, BE TO, DARE (20551)

Popular pages this month

  1. Prezentul simplu si continuu - Present Tense Simple and Continuous (4503)
  2. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (4270)
  3. Curs HTML gratuit Tutoriale HTML5 (3732)
  4. Curs si Tutoriale JavaScript (2926)
  5. Curs PHP MySQL, Tutoriale si Scripturi PHP (2801)