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 atribut e folosit in tag-ul <img> pentru adresa imaginii?
href src rel
<img src="http://coursesweb.net/imgs/webcourses.gif" width="191" height="63" alt="Courses-Web" />
Care din aceste coduri CSS ascunde elementul in pagina?
display: none; display: inline; position: relative;
#id {
  display: none;
}
Ce instructiune opreste executia lui while() sau for() ?
continue prompt() break
for(var i = 0; i< 8; i++) {
  if(i > 1) break;
  alert(i);
}
Indicati functia utilizata pentru a crea constante.
define() include() defined()
define("CONSTANT_NAME", "value");
echo CONSTANT_NAME;
Care este forma de plural a substativului "class" (clasa)?
classes clases clasis
This school has three classes.
- Scoala asta are trei clase.
Care este pluralul substativului "voz" (voce)?
vose voze voces
Escuché dos voces.
- Am auzit doua voci.
Functia Render

Last accessed pages

  1. Curs CSS Online Tutoriale CSS3 (25036)
  2. Node.js cu baza de date MySQL (313)
  3. Curs cu Tutoriale Node.js (1817)
  4. Node.js - Mutare si Copiere Fisier (131)
  5. Curs si Tutoriale JavaScript (34116)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (7497)
  2. Curs HTML gratuit Tutoriale HTML5 (6108)
  3. Curs si Tutoriale JavaScript (5077)
  4. Curs PHP MySQL, Tutoriale si Scripturi PHP (4766)
  5. Curs CSS Online Tutoriale CSS3 (4629)