Curs Vuejs


Vue.js foloseste o sintaxa de template bazata pe taguri HTML. Template-ul e compilat in functii de redare Virtual DOM.
Forma de baza pentru template e un sir text (un nume de proprietate) adaugat intre doua acolade duble:
<div>Message: {{ msg }}</div>

Grupul de acolade duble va fi inlocuit de valoarea proprietatii msg din obiectul data. De asemenea, va fi actualizat de fiecare data cand valoarea proprietatii "msg" se modifica.

- Exemplu, la clic pe un buton e modificata valoarea unei proprietati din "data" (aici "str"), schimband textul adaugat intr-un Div:
<div id='app'>
<div>{{ str }}</div>
<button @click='str = "Iubesc Viata"'>Click</button>
</div>

<script>
var vm = new Vue({
 el: '#app',
 data: {str: 'Sunt Eu insumi.'}
})
</script>

Taguri HTML in template

In mod implicit continutul care va inlocui grupul de acolade duble este interpretat ca text simplu. Pentru a reda cod HTML se foloseste directiva v-html.
Exemplu:
<div id='app'>
<p>Without directive: {{ str_html }}</p>
<p>Using v-html directive: <span v-html="str_html"></span></p>
</div>

<script>
var vm = new Vue({
 el: '#app',
 data: {str_html: '<b style="color:#00f">Sunt Eu insumi.</b>'}
})
</script>

Sintaxa cu acolade duble nu se foloseste in atribute HTML.


Utilizare expresii JavaScript in Vue Template

Vue.js suporta expresii JavaScript in toate datele de legatura cu HTML (o singura expresie):
{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>
- Exemplu, arata numarul de clicuri pe un buton:
<div id='app'>
<div>Number of licks: {{ nr}}</div>
<button @click='nr +=1'>Click</button>
</div>

<script>
var vm = new Vue({
 el: '#app',
 data: {nr: 0}
})
</script>
Alt exemplu, afiseaza in ordine inversa caracterele adaugate intr-o caseta de text:
<div id='app'>
 <p>{{ msg.split('').reverse().join('') }}</p>
 Add some text in this input:<br>
 <input v-model='msg'>
</div>

<script>
var vue_ob = new Vue({
 el: '#app',
 data: {msg: 'Hello Vue!'}
})
</script>

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care meta tag se foloseste pentru scurta descriere a paginii?
<meta content="..."> <meta description="..."> <meta http-equiv="...">
<meta name="description" content="70-160 caractere ce descriu continutul paginii" />
Ce proprietate CSS opreste efectul dat de "float"?
clear text-align position
#some_id {
  clear: both;
}
Clic pe metoda ce creaza un array cu toate elementele din pagina cu un anumit nume de tag.
getElementsByName() getElementById() getElementsByTagName()
var divs = document.getElementsByTagName("div");
var nr_divs = divs.length;
alert(nr_divs);
Indicati functia PHP ce returneaza numarul de elemente dintr-un array.
is_[) count() strlen()
$arr =[7, 8, "abc", 10);
$nri = count($arr);
echo $nri;        // 4
Indicati adverbul corespunzator adjectivului din paranteza in propozitia: "I live (happy)".
happly happily hapily
I live happily.
- Traiesc fericit (in mod fericit).
Indicati adverbul corespunzator adjectivului din paranteza in propozitia: "Vivo (feliz)".
felizamente felizmente felices
Vivo felizmente.
- Traiesc fericit (cu fericire).
Sintaxa Template

Last accessed pages

  1. Jokes - Glume, Bancuri, Humor (2) (7135)
  2. Blog si Cugetari Personale (50397)
  3. Caractere speciale - Entitati HTML (6549)
  4. Elemente principale HTML (16167)
  5. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (147312)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (2928)
  2. Curs HTML gratuit Tutoriale HTML5 (2366)
  3. Curs si Tutoriale JavaScript (2105)
  4. Curs PHP MySQL, Tutoriale si Scripturi PHP (2074)
  5. Curs CSS Online Tutoriale CSS3 (1987)