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 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.
Sintaxa Template

Last accessed pages

  1. Articole definite si nedefinite 1 (6177)
  2. CSS3 Flexbox Container (2942)
  3. Curs de Miracole (4572)
  4. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (278655)
  5. Coduri pt culori (74239)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (34)
  2. Cursuri limba engleza gratuite si lectii online (13)
  3. Gramatica limbii spaniole. Indrumator si prezentare generala (12)
  4. Expresii uzuale din Limba Spaniola (A-D) (9)
  5. Teste spaniola - Tests y ejercicios de Español - Gramática (9)