Curs Vuejs

Acest tutorial este o prezentare de baza a functiei Vue js render.


Functia render este o alternativa la proprietatea template, si ofera posibilitatea de a face componenta Vue dinamica. De asemenea, se pot transmite argumente si valori de la componenta parinte la structura HTML rezultata.
Sa vedem un exemplu din care se intelege cum functioneaza proprietatea render.

- In urmatorul exemplu cream o componenta Vue (denumita "comp_test") care poate reda un element HTML cu definire dinamica: nume-tag, culoare, marime-font si id.
<div id = 'demo'>
 <comp_test :elm_type="'h1,#0000ee,30,title'">Libertatea este Libera</comp_test>
 <comp_test :elm_type="'h3,#00ce00,25,h3tag'">Ca sa am pace, dau pace.</comp_test>
 <comp_test :elm_type="'p,#ee0000,24,ptag'">Gandul precede perceptia.</comp_test>
 <comp_test :elm_type="'div,#1234fb,24,divtag'">Pace mintii, sanatate trupului.</comp_test>
</div>
<script>
Vue.component('comp_test',{
 render : function(createElement){
 //gets an array of values from the string added to elm_type attribute
 var a = this.elm_type.split(',');

 //creates and returns the DOM element with data from elm_type, and defined in the attrs object-parameter
 return createElement(a[0],{
 attrs:{
 style:'color:'+a[1]+';font-size:'+a[2]+'px;',
 id:a[3]
 }
 },
 this.$slots.default //To use the text added in component
 )
 },

 //defines the prop required in each <comp_test> as a string
 props:{
 elm_type:{
 attributes: String,
 required: true
 }
 }
});

var vm = new Vue({
 el: '#demo'
});
</script>
Dupa cum puteti vedea, fiecare tag <comp_test> leaga o proprietate :elm_type care e definita in props in componenta Vue.
Atributul elm_type din tag trebuie sa contina un sir cu datele pentru elementul HTML care va fi redat ('nume-tag, culoare, marime-font, id').
In functia render se preia intr-un Array datele din sirul de la atributul "elm_type".
var a = this.elm_type.split(',');

Functia render primeste metoda createElement ca argument, si o returneaza.
createElement creaza elementele in DOM cu datele din elm_type (definite in obiectul attrs).
Continutul adaugat in elementul HTML rezultat este textul de la fiecare <comp_test>, datorita urmatorului argument:
this.$slots.default

- Resultat:

Libertatea este Libera

Ca sa am pace, dau pace.

Gandul precede perceptia.

Pace mintii, sanatate trupului.

Pentru detalii despre metoda createElement din functia render vedeti documentatia Vue: createElement Arguments.

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Ce tag adauga imagine in pagina web?
<div> <img> <span>
<img src="http://coursesweb.net/imgs/webcourses.gif" width="191" height="63" alt="Courses-Web" />
Care din aceste coduri CSS afiseaza textul inclinat?
font-style: italic; text-decoration: underline; font-weight: 500;
#id {
  font-style: italic;
}
Clic pe functia jQuery care ascunde animat un element HTML.
click() hide() show()
$(document).ready(function() {
  $(".a_class").click(function(){ $(this).hide("slow"); });
});
Clic pe functia definita corect in PHP.
fname function() {} function fname() {} function $fname() {};
function fname($a, $b) {
  echo $a * $b;
}
Indicati forma pentru Prezent Perfect Continuu a verbului "to walk" (a merge).
have walked have been walking be walking
I have been walking for 5 hours.
- Merg pe jos de 5 ore.
Indicati Trecutul Nedefinit pentru verbul "ser" (a fi) la forma Yo.
será sería fui
Yo fui entrenador.
- Am fost antrenor.
Functia Render

Last accessed pages

  1. Genul substantivelor 2 (5883)
  2. Gramatica limbii spaniole. Indrumator si prezentare generala (57834)
  3. Coduri pt culori (56744)
  4. Efecte jQuery simple de ascundere si afisare (601)
  5. Substantivul din limba engleza - The Noun (54444)

Popular pages this month

  1. Conditional IF in Limba Engleza - Fraze Conditionale (1559)
  2. Exercitii engleza - English Tests and exercises - Grammar (1428)
  3. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (1290)
  4. Curs HTML gratuit Tutoriale HTML5 (1106)
  5. Gramatica limbii engleze - Prezentare Generala (1004)