Vue.js este un framework JavaScript progresiv pentru construirea de interfete de utilizator si aplicatii sofisticate pe o singura pagina, usor de invatat si de integrat cu alte biblioteci de functii JavaScript sau proiecte existente.
Se axeaza in principal pe partea de vizualizare (front-end, client side).

Instalare

Pentru a utiliza Vue in site-ul dvs., trebuie sa includeti codul vue.js in pagina, cu:
<script src='//cdn.jsdelivr.net/npm/vue'></script>
- Sau, copiati codul JavaScript de la acea adresa, salvati-l intr-un fisier .js pe server, apoi includeti acel fisier in pagina.

Vue.js Template si Directive

Vue js foloseste o sintaxa de template cu acolade duble {{ }} ca inlocuitori pentru datele ce urmeaza sa fie adaugate.

Cu Vue.js se poate extinde codul HTML cu atribute numite directive. Acestea sunt atribute HTML cu prefixul v-, si confera functionalitate aplicatiilor HTML.
Vue.js ofera directive incorporate si directive definite de programator.


Exemple:

Instanta de obiect Vue se creaza cu new Vue(). O proprietate el: face legatura intre noul obiect Vue si elementul HTML care are id-ul adaugat la el:.
Se adauga o proprietate data: cu un obiect cu date pentru structura template.
<div id='app'>
<h1>{{ message }}</h1>
</div>

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

Legarea Vue JS cu elemente HTML

Cand un obiect Vue e legat de un element HTML, acel element HTML se modifica cand datele din obiectul Vue se schimba:

<div id='app'>
{{ message }}
</div>
<button id='btn'>Click</button>

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

//When click on the #btn element, change message text
document.getElementById('btn').addEventListener('click', (ev)=>{
 vue_ob.message ='MarPlo - CoursesWeb';
});
</script>

Legatura bidirectionala

Directiva v-model leaga valoarea din diferite elemente HTML cu datele aplicatiei.
<div id='app'>
 <p>{{ msg }}</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>

Legatura cu v-for

Cu directiva v-for se poate lega un array sau obiect cu o lista de elemente HTML; de exemplu pentru a crea o lista cu taguri LI:
<div id='app'>
List created with Vue JS.
<ul>
 <li v-for='li in list'>{{ li }}</li>
</ul>
</div>

<script>
var vue_ob = new Vue({
 el: '#app',
 data: {
 list: ['Learn JavaScript', 'Learn Vue.js', 'Build Something Awesome']
 }
})
</script>

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care tag defineste zona de click intr-o harta creata dintr-o imagine?
<map> <img> <area>
<img src="image.jpg" usemap="#map1">
<map name="map1">
  <area shape="rect" coords="9, 120, 56, 149" href="#">
  <area shape="rect" coords="100, 200, 156, 249" href="#">
</map>
Ce proprietate CSS indica ce sa se intample cand continutul unui element depaseste dimensiunile lui?
display overflow position
#id {
  overflow: auto;
}
Clic pe evenimentul care este declansat cand mouse-ul e deasupra unui obiect.
onclick onmouseover onmouseout
document.getElementById("id").onmouseover = function(){
  document.write("Sa ai Viata Buna");
}
Indicati variabila PHP ce contine datele adaugate in adresa URL, dupa caracterul "?".
$_SESSION $_GET $_POST
if(isset($_GET["id"])) {
  echo $_GET["id"];
}
Clic pe pronumele reflexiv care e potrivit in propozitia: "Marc is the boy ... won the prize".
who which whoever
Marc is the boy who won the prize.
- Marc e baiatul care a castigat premiul.
Clic pe pronumele reflexiv care e potrivit in propozitia: "Voy a ver al pintor de ... les hablé ayer".
que quien cuyo
Voy a ver al pintor de quien les hablé ayer.
- Ma duc sa vad pictorul despre care ti-am vorbit ieri.
Vue JS - Scurta prezentare

Last accessed pages

  1. Blog si Cugetari Personale (8784)
  2. Verbe frazale din limba Engleza (17462)
  3. Verbe neregulate din limba Engleza (9803)
  4. Curs si Tutoriale JavaScript (21300)
  5. Prezent perfect continuu - Exercitii si teste incepatori (5224)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (4918)
  2. Curs HTML gratuit Tutoriale HTML5 (4057)
  3. Curs si Tutoriale JavaScript (3735)
  4. Curs PHP MySQL, Tutoriale si Scripturi PHP (3563)
  5. Curs CSS Online Tutoriale CSS3 (3487)