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 atribut e folosit in tag-ul <a> pentru adresa link-ului?

src href rel

<a href="http://coursesweb.net/" title="CoursesWeb.net">CoursesWeb.net</a>

Ce proprietate CSS seteaza tipul fontului utilizat?

font-family text-decoration font-size

h2 {
  font-family:"Calibri", sans-serif;
}

Ce instructiune selecteaza toate tag-urile <div> cu class="cls"?

querySelector("div.cls") getElementsByTagName("div") querySelectorAll("div.cls")

var elm_list = document.querySelectorAll("div.cls");
var nr_elms = elm_list.length;       // numar elemente selectate
alert(nr_elms);

Indicati functia care returneaza suma valorilor dintr-un array.

array_sum() array_diff() array_shift()

$arr =[1, 2, 3, 4);
$arr_sum = array_sum($arr);
echo $arr_sum;       // 10

Indicati forma corecta a verbului "study" (a studia) la Trecutul Simplu in aceasta propozitie: "We (study) English."

studyed studys studied

We studied English.
- Noi am studiat engleza.

Indicati forma corecta a verbului "decir" (a spune) la Prezent in aceasta propozitie: "Yo (decir) siempre la verdad."

digas digo decir

Yo digo siempre la verdad.
- Eu spun mereu adevarul.