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 HTML5 este indicat sa contina meniul cu link-uri de navigare in site?
<section> <nav> <article>
<nav><ul>
 <li><a href="http://coursesweb.net/css/" title="CSS Course">CSS Course</a></li>
 <li><a href="http://www.marplo.net/jocuri/" title="Flash Games">Flash Games</a></li>
</ul></nav>
Ce proprietate CSS muta elementrul in dreapta sau stanga de la locul unde e?
text-align clear float
.some_class {
  width: 30%;
  float: left;
}
Clic pe metoda obiectului Math care rotunjeste numarul x descrescator la cel mai apropiat intreg.
Math.ceil(x) Math.abs(x) Math.floor(x)
var num = 12.34567;
num = Math.floor(num);
alert(num);       // 12
Indicati functia PHP care returneaza numarul de caractere dintr-un sir.
mb_strlen() count() stristr()
$str = "sir cu caractere utf-8 åèö";
$nrchr = mb_strlen($str);
echo $nrchr;        // 29
Clic pe raspunsul potrivit la intrebarea: "When it happened?".
On the 7th of July 1996 It is a quarter to 5. Nice weather.
When it happened? On the 8th of August 2001.
- Cand s-a intamplat? Pe 8 August 2001.
Indicati raspunsul potrivit la intrebarea: "¿Cuando sucedió?".
Hace buen tiempo. En el 8 de Agosto de 2001 Son las tres menos cuarto.
¿Cuando sucedió? En el 8 de Agosto de 2001.
- Cand s-a intamplat? Pe 8 August 2001.
Functia Render

Last accessed pages

  1. Prezentul simplu - Exercitii si teste incepatori (19146)
  2. Confusable words - Cuvinte confundabile (2962)
  3. Curs HTML gratuit Tutoriale HTML5 (32791)
  4. Verbe neregulate din limba Engleza (8527)
  5. Coduri pt culori (25898)

Popular pages this month

  1. Prezentul simplu si continuu - Present Tense Simple and Continuous (3122)
  2. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (2512)
  3. Gramatica limbii engleze - Prezentare Generala (2357)
  4. Prezent perfect si Prezent perfect continuu - Present perfect and Continuous (1961)
  5. Trecutul simplu si continuu - Past Tense Simple and Continuous (1609)