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.
Un Test simplu in fiecare zi
HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care tip de <input> creaza un element cu data tip calendar?
type="text" type="date" type="button"<input type="date" name="set_date" value="2012-10-15" />
Ce proprietate CSS adauga efect de umbre la text?
font-style color text-shadowh2 {
text-shadow: 2px 3px 3px #a0a1fe;
}Clic pe functia care adauga elemente noi la sfarsitul unui array.
pop() shift() push()var pags = ["lectii", "cursuri"];
pags.push("download", "tutoriale");
alert(pags[2]); // downloadCe functie aranjeaza un array in ordine crescatoare, dupa chei, mentinand corelatia dintre chei si valori?
asort() ksort() sort()$lang =[10=>"PHP", 20=>"JavaScript", "site"=>"coursesweb.net");
ksort($lang);
var_export($lang); // array ("site"=>"coursesweb.net", 10=>"PHP", 20=>"JavaScript")La adjectivul "big" (mare), care este forma de Comparativ (mai mare)?
biggest biger biggerHe is bigger than his sister.
- El este mai mare decat sora lui.
Care este Comparativul adjectivului "grande" (mare)?
menos grande más grande el más grandeÉl es más grande que su hermana.
- El este mai mare decat sora lui.
