Sintaxa Template

Utilizare expresii JavaScript in Vue Template

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>

<<-Instanta de Obiect Vue -- Vue Directive->>

Un Test simplu in fiecare zi

HTML

CSS

JavaScript

PHP-MySQL

Engleza

Spaniola

Ce atribut face ca valoarea din caseta de text sa nu poata fi modificata de utilizator?

checked="checked" readonly="readonly" disabled="disabled"

<input type="text" value="valoare-fixa" readonly="readonly" name="a_name" />

Ce proprietate CSS permite crearea de colturi rotunjite?

background-size border-size border-radius

.class {
  border:2px solid blue;
  border-radius:1.2em;
}

Ce instructiune afiseaza o fereastra cu mesaj si butoane OK si Cancel?

indexOf() confirm() prompt()

var ques = window.confirm("Rezultatul lui 0+0 este 0?");
if (ques) alert("Corect");
else alert("Incorect");

Indicati functia PHP care returneaza numarul cel mai mic dintr-o multime de numere.

floor() ceil() min()

$min_nr = min(12, 8, 25, 13);
echo $min_nr;        // 8

Alegeti verbul corect care trebuie in propozitia: "Its ears ... big".

are is has

Its ears are big.
- Urechile lui sunt mari.

Alegeti verbul corect care trebuie in propozitia: "Los niños ... deportistas"

soy son está

Los niños son deportistas.
- Copii sunt sportivi.