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
Care atribut face ca optiunea din <select> sa fie selectata?
checked="checked" selected="selected" disabled="disabled"
<select name="a_name">
 <option value="val1">Optiune 1</option>
 <option value="val2" selected="selected">Optiune 2</option>
</select>
Care din aceste valori CSS creaza culoare gradient pentru fundal?
contain repeat-x linear-gradient
#id {
  background: linear-gradient(top left, #1f1, #fff, #11f);
}
Care cod creaza un array in JavaScript?
[] {} new Object()
var arr = [1, "CoursesWeb.net", "MarPlo.net"];
alert(arr[2]);
Indicati functia PHP folosita pentru redirect la alta pagina.
function() header() switch()
header("Location: http://coursesweb.net/");
exit;
Indicati articolul corect la cuvantul "garden" in propozitia: "... garden is a place with flowers".
An The A
The garden is a place with flowers.
- Gradina este un loc cu flori.
Indicati articolul corect pentru cuvantul: "jardín" (gradina)
la los el
El jardín es un lugar de flores.
- Gradina e un loc cu flori.
Functia Render

Last accessed pages

  1. Gramatica limbii spaniole. Indrumator si prezentare generala (70587)
  2. Autobiografia unui Yoghin, Paramhansa Yogananda (2293)
  3. Prezentul simplu - Exercitii si teste incepatori (70640)
  4. Operatori in JavaScript (8338)
  5. Español popular - Jerga de mexico (E-Ñ) (564)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (52)
  2. Gramatica limbii engleze - Prezentare Generala (21)
  3. Gramatica limbii spaniole. Indrumator si prezentare generala (20)
  4. Curs de Miracole (18)
  5. Cursuri limba engleza gratuite si lectii online (18)