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 se foloseste pentru a include fisier extern CSS in pagina web?
<body> <script> <link>
<link href="/templ/style.css" rel="stylesheet" type="text/css" />
Ce proprietate CSS seteaza marimea textului?
font-weight text-decoration font-size
h2 {
  font-size: 1em;
}
Indicati proprietate JavaScript care poate sa adauge cod HTML intr-un element.
text value innerHTML
document.getElementById("someID").innerHTML = "Continut HTML";
Clic pe functia care returneaza numarul de caractere dintr-un sir in PHP.
count() strlen() stristr()
$str = "http://CoursesWeb.net/";
$nr_chr = strlen($str);
echo $nr_chr;       // 22
Care este forma de feminin a adjectivului "white" (alb)?
white whitea whites
(In limba engleza adjectivele au aceeasi forma pt. ambele genuri)
The snow is white. - Zapada e alba.
Care este forma de feminin a adjectivului "blanco" (alb)?
blanc blance blanca
La nieve es blanca.
- Zapada e alba.
Functia Render

Last accessed pages

  1. Articolul din limba engleza - The article (38467)
  2. Prezentul simplu si continuu - Present Tense Simple and Continuous (81330)
  3. Ser si Estar 4 (1519)
  4. Numerale, Numere in limba engleza - Numerals (32571)
  5. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (132993)

Popular pages this month

  1. Prezentul simplu si continuu - Present Tense Simple and Continuous (4926)
  2. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (4781)
  3. Curs HTML gratuit Tutoriale HTML5 (4179)
  4. Curs si Tutoriale JavaScript (3317)
  5. Curs PHP MySQL, Tutoriale si Scripturi PHP (3165)