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 tag afiseaza textul oblic?
<strong> <pre> <em>
<p>Cursuri, Jocuri, Anime: <em>www.MarPlo.net</em></p>
Care proprietate CSS defineste spatiul dintre continutul elementului si bordura lui?
margin padding position
h3 {
  padding: 2px 0.2em;
}
Clic pe metoda ce returneaza primul element indicat de selectorii specificati.
getElementsByName() querySelector() querySelectorAll()
// preia primul Div cu class="cls", si afiseaza continutul
var elm = document.querySelector("div.cls");
alert(elm.innerHTML);
Indicati variabila PHP ce contine datele din formular trimise cu method="post".
$_SESSION $_GET $_POST
if(isset($_POST["field"])) {
  echo $_POST["field"];
}
Indicati pronumele corespunzator celui din paranteza in propozitia: "(Noi) speak english".
I They We
We speak english.
- Noi vorbim engleza.
Indicati pronumele corespunzator celui din paranteza in propozitia: "(Noi) hablamos español".
Ellos Vosotros Nosotros
Nosotros hablamos español.
- Noi vorbim spaniola.
Sintaxa Template

Last accessed pages

  1. Curs PHP MySQL, Tutoriale si Scripturi PHP (19863)
  2. Prepozitii A, de sau en (583)
  3. Teste spaniola - Tests y ejercicios de Español - Gramática (8435)
  4. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (77717)
  5. Por sau para: Exercitiu 1 (1049)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (4472)
  2. Curs HTML gratuit Tutoriale HTML5 (3703)
  3. Curs si Tutoriale JavaScript (3404)
  4. Curs PHP MySQL, Tutoriale si Scripturi PHP (3277)
  5. Curs CSS Online Tutoriale CSS3 (3193)