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
Ce atribut e folosit in tag-ul <a> pentru adresa link-ului?
src href rel<a href="http://coursesweb.net/" title="CoursesWeb.net">CoursesWeb.net</a>
Ce proprietate CSS seteaza tipul fontului utilizat?
font-family text-decoration font-sizeh2 {
font-family:"Calibri", sans-serif;
}Ce instructiune selecteaza toate tag-urile <div> cu class="cls"?
querySelector("div.cls") getElementsByTagName("div") querySelectorAll("div.cls")var elm_list = document.querySelectorAll("div.cls");
var nr_elms = elm_list.length; // numar elemente selectate
alert(nr_elms);Indicati functia care returneaza suma valorilor dintr-un array.
array_sum() array_diff() array_shift()$arr =[1, 2, 3, 4);
$arr_sum = array_sum($arr);
echo $arr_sum; // 10
Indicati forma corecta a verbului "study" (a studia) la Trecutul Simplu in aceasta propozitie: "We (study) English."
studyed studys studiedWe studied English.
- Noi am studiat engleza.
Indicati forma corecta a verbului "decir" (a spune) la Prezent in aceasta propozitie: "Yo (decir) siempre la verdad."
digas digo decirYo digo siempre la verdad.
- Eu spun mereu adevarul.