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

Care tag se foloseste in <table> pentru a crea celula de tip "header"?

<table><tr>
  <th>Title 1</th>
  <th>Title 2</th>
</tr></table>

Ce proprietate CSS seteaza distanta dintre randuri?

line-height word-spacing margin

.some_class {
  line-height: 150%;
}

Care functie deschide o noua fereastra.

alert() confirm() open()

document.getElementById("id_button").onclick = function(){
  window.open("http://coursesweb.net/");
}

Indicati functia PHP care returneaza un array cu numele fisierelor si directoarelor dintr-un director.

mkdir() scandir() readdir()

$ar_dir = scandir("dir_name");
var_export($ar_dir);

Care din urmatoarele forme a verbului "sleep" (a dormi) se foloseste pentru viitor?

sleeping slept will sleep

He will sleep there.
- El va dormi acolo.

Care din urmatoarele forme a verbului "dormir" (a dormi) se foloseste pentru viitor?

dormido dormirá durmiendo

Él dormirá allí.
- El va dormi acolo.