Curs Vuejs


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 atribut specifica adresa unde sunt trimise datele din formular?
method action name
<form action="script.php" method="post"> ... </form>
Ce proprietate CSS desparte cuvinte lungi, adaugand pe rand nou?
word-wrap line-height font-size
#id {
  width: 100px;
  word-wrap: break-word;
}
Ce functie aranjeaza elementele din array in ordine alfabetica, bazat pe valorile lor?
pop() sort() shift()
var tutorials = ["php", "html", "css", "flash"];
tutorials.sort();
alert(tutorials[0]);          // css
Indicati functia care returneaza valoarea ultimului element din array.
current() next() end()
$code =[10=>"Perl", 20=>"PHP", 21=>"Python", 30=>"JavaScript");
$last = end($code);
echo $last;      // JavaScript
Alegeti verbul auxiliar corect care trebuie in propozitia: "Her plane ... just arrived".
have has does
Her plane has just arrived.
- Avionul ei tocmai a sosit.
Indicati forma corecta a verbului SER (a fi) in propozitia: "Vosotros ... muy simpáticos".
son soy sois
Vosotros sois muy simpáticos.
- Sunteti foarte simpatici.
Vue JS - Scurta prezentare

Last accessed pages

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (157782)
  2. Adjective - Exercitii si teste engleza incepatori (9232)
  3. Exercitii engleza - English Tests and exercises - Grammar (55364)
  4. Exemplu simplu de aplicatie CRUD cu MySQL in Laravel (731)
  5. Curs CSS Online Tutoriale CSS3 (64188)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (1119)
  2. Curs HTML gratuit Tutoriale HTML5 (1047)
  3. Curs si Tutoriale JavaScript (838)
  4. Curs CSS Online Tutoriale CSS3 (764)
  5. Curs PHP MySQL, Tutoriale si Scripturi PHP (745)