Vue JS - Scurta prezentare

Legarea Vue JS cu elemente HTML

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>

Instanta de Obiect Vue->>

Un Test simplu in fiecare zi

HTML

CSS

JavaScript

PHP-MySQL

Engleza

Spaniola

Ce tag adauga imagine in pagina web?

<img src="http://coursesweb.net/imgs/webcourses.gif" width="191" height="63" alt="Courses-Web" />

Care din aceste coduri CSS afiseaza textul inclinat?

font-style: italic; text-decoration: underline; font-weight: 500;

#id {
  font-style: italic;
}

Clic pe functia jQuery care ascunde animat un element HTML.

click() hide() show()

$(document).ready(function() {
  $(".a_class").click(function(){ $(this).hide("slow"); });
});

Clic pe functia definita corect in PHP.

fname function() {} function fname() {} function $fname() {};

function fname($a, $b) {
  echo $a * $b;
}

Indicati forma pentru Prezent Perfect Continuu a verbului "to walk" (a merge).

have walked have been walking be walking

I have been walking for 5 hours.
- Merg pe jos de 5 ore.

Indicati Trecutul Nedefinit pentru verbul "ser" (a fi) la forma Yo.

será sería fui

Yo fui entrenador.
- Am fost antrenor.