Sef lucr. dr. ing. TURC Traian Studenț : [609369]

UNIVERSITATEA “PETRU MAIOR” DIN TÂRGU MUREȘ
FACULTATEA DE INGINERIE
SPECIALIZAREA: AUTOMATICĂ ȘI INFORMATICĂ APLICATĂ

PROIECT Tehnologii WEB
Vue.js

Coordonator :
Sef lucr. dr. ing. TURC Traian Studenț :
Gyorgy Cătălin

Cuprins
1. Ce este Vue.js ? ………………………….. ………………………….. ………………………….. ………………………….. ….. 3
2. Concepte Vue.js ………………………….. ………………………….. ………………………….. ………………………….. …. 3
2.1 Condiționale și bucle ………………………….. ………………………….. ………………………….. …………………….. 3
2.2 Input -uri user ………………………….. ………………………….. ………………………….. ………………………….. …… 4
2.2 Componente ………………………….. ………………………….. ………………………….. ………………………….. ……. 4
3. La ce putem folosi Vue.js? ………………………….. ………………………….. ………………………….. ……………….. 8
4. Bibliografie ………………………….. ………………………….. ………………………….. ………………………….. ………… 9

1. Ce este Vue.js ?

Vue.js este un “framework” ( o librărie ), bazată sau construită cu
JavaScript, care ajută la dezvolatrea aplicațiilor web.
Această librărie, a fost gândită pentru a fii folosită la dezvoltarea parții de
front -end a aplicațiilor web și mai mult de atât se concentrează pe partea vizuală,
afisări de date, efecte, etc (User Interface).
Aplicațiile bazate pe Vue.js, se folosesc si se integrează cu alte limbaje de
programare ca HTML, CSS și JavaScript.
2. Concepte Vue.js
2.1 Condiționale și bucle

Cu Vue.js put em creea condiții și bucle chiar în interiorul directivelor pe
care le scriem în limbajul HTML.
<div id= "app-3">
<p v-if="seen">Now you see me </p>
</div>

Mai apoi, cre ând o variabilă în interiorul codului Vue.js, putem să afisăm
sau să ascundem un element de pe aplicația web, doar schimbând starea acestei
variabile.
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})

De asemenea, pentru matrici de date, se pot afișa datele cu usurință, cu o
instrucțiune Vue.js
<div id= "app-4">
<ol>
<li v-for="todo in todos" >
{{ todo.text }}
</li>
</ol>
</div>
2.2 Input -uri user
Cu ajutorul librăriei Vue.js, putem de asemenea foarte ușor gestiona datele
din input -urile de pe aplicația web, declarând o variabilă, care la evenimentu l de
schimbare a datelor din input se va schimba.

<div id= "app-6">
<p>{{ message }} </p>
<input v -model="message" >
</div>
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
})

2.2 Componente

Un alt concept intrudus prin librăria Vue.js, este cel de “Componentă” .
Acest concept ne ajut ă să creem aplicații mai mari, împărțind această aplicație în
așa numite componente, care mai apoi vor fii unite.

Cod HTML
<div id= "app-demo">
<ol>
<afisare-cos
v-for="item in cosCumparaturi "
v-bind:todo= "item"
v-bind:key= "item.id" >
</afisare-cos>
</ol>
</div>

Cod componentă

Vue.component( 'afisare-cos', {
props: [ 'element '],
template: '<li>{{ element .text }}</li>'
})

Cod componentă principală(aplicație)

var appDemo = new Vue({
el: '#app-demo',
data: {
cosCumparaturi : [
{ id: 0, text: 'Ceas' },
{ id: 1, text: 'Papuci' },
{ id: 2, text: 'Sandale ' }
]
}

})

Această aplicație va afișa fiecare element din vectorul „cosCumparaturi”.
Oricand putem printr -o altă comppnentă să adăugăm elemente vectorului
„cosCumparaturi”, iar componenta „afisare -cos” va face update la datele afișate.
De asemenea, în interiorul com ponentelor Vue.js, putem să avem metode
și variabile locale, care să gestioneze datele necesare acelei componente.
Alte elememente utile din componentele Vue.js, sunt funcțiile care se
execută în diferite momente ale instanței unei componente.
Ca de exem plu, există funcții care se apelează în momentul creeri
componentei, la distrugerea componentei, înainte de a fii creată aceasta, etc.
Un alt lucru foarte util ar fi funcțiile care se pot definii ca și „watcher”.
Acestea pot fii folosite pentru a modifica date, pentru a face tranziții, pentru a
face animții în momentul în care un element este modificat, fie de alte
componente, fie de aplicație.

3. La ce putem folosi Vue.js?

Vue.js se poate folosi la o mulțime de aplicații web din ziua de azi cum ar fi:
Aplicații pentru comunicare (messenger online), jocuri, magazine online.
Acesta, atât la aplicațiile de comunicare, cât și la jocuri, face mai ușoară
munca pentru o echipa de developer de exemplu, deoarece se poate lucra
modular la o aplicație web, și mai mult decât atât se pot relfolosi componente la
alte aplicații.

4. Bibliografie

[1] https://vuejs.org/v2/guide/