Vue Directive

Directivele sunt atribute speciale, cu prefixul v-. Rolul unei directive este sa aplice in mod reactiv modificari secundare la DOM atunci cand valoarea expresiei sale se schimba.

Sa vedem un exemplu cu directiva conditionala v-if.
In urmatorul exemplu directiva v-if adauga si sterge elementul <h4> in functie de valoarea True /False a proprietatii seen.

<div id='app'>
<h3 v-if='seen'>Now you see me</h3>
Click on this button to insert /remove the H4 element: 
<button @click='seen =!seen'>Click</button>
</div>

<script>
var vm = new Vue({
 el: '#app',
 data: {seen: false}
})
</script>

Alt exemplu, cu directiva v-once care e folosita pentru a nu se mai face alte actualizari /modificari cand datele se schimba.

<div id='app'>
<span v-once>Asta nu se schimba: {{ msg }}</span>
</div>

<script>
var vm = new Vue({
 el: '#app',
 data: {msg: 'Viata e Iubire'}
});

//Trying to change the msg
vm.msg ='Alt mesaj';
</script>

Argumente pentru Directive

La unele directive se poate aplica un "argument", notat cu caracterul doua-puncte dupa numele directivei ( v-directive:argument ).
De exemplu, directiva v-bind se poate folosi pentru a actualiza reactiv un atribut HTML.

Exemple

1. In urmatorul exemplu, href este argumentul, care spune directivei v-bind sa lege atributul "href" al tagului HTML cu valoarea proprietatii url.

<div id='app'>
<a v-bind:href='url'>Link</a>
</div>

<script>
var vm = new Vue({
 el: '#app',
 data: {url: '//coursesweb.net/'}
})
</script>

2. Directiva v-html se aplica pentru a reda cod HTML. Valoare ei reprezinta numele proprietatii care contine sirul HTML.

<div id='demo'>
<div v-html='str_htm'></div>
</div>

<script>
var vm = new Vue({
 el: '#demo',
 data: {
 str_htm: '<h3>Iertarea vindeca</h3><b>Iert totul, inclusiv pe mine</b>, mintea devine sanatoasa si <i>trupul se vindeca</i>.'
 }
})
</script>

3. Un alt exemplu e cu directiva v-on care e folosita pentru a detecta evenimente aplicate de utilizator (click, input, mouseenter, etc.):

<div id='app'>
<button v-on:click='test_f'>Click Btn</button>
</div>

<script>
var vm = new Vue({
 el: '#app',
 methods: {
 test_f: function(){
 alert('MarPlo.net');
 }
 }
})
</script>

- Aici argumentul (click) e numelke evenimentului care va fi urmarit, iar test_f e numele metodei care va fi apelata.

Argumente Dinamice pentru Directive

In Vue JS se pot folosi argumente dinamice, adaugate intre paranteze patrate ( v-directive:[argument] ).
In urmatorul exemplu ev_name va fi evaluat dinamic iar valoarea evaluata va reprezenta evenimentul urmarit.

<div id='app'>
<button v-on:[ev_name]='test_f'>Click Btn</button>
</div>

<script>
var vm = new Vue({
 el: '#app',
 data: {ev_name: 'click'},
 methods: {
 test_f: function(){
 alert('MarPlo.net');
 }
 }
})
</script>

Cand valoarea proprietatii ev_name e "click", v-on:[ev_name] va fi echivalent cu v-on:click.

Modificatori

Modificatorii indica faptul ca o directiva trebuia evaluata intr-un mod special. Acestea sunt sufixe adaugate cu punct dupa numele atributului.
De exemplu, modificatorul .prevent transmite directivei v-on sa apeleze event.preventDefault() la evenimentul declansat:

<form v-on:submit.prevent='onSubmit'> ... </form>

Notatii prescurtate la v-bind si v-on

Vue ofera prescurtari speciale pentru doua dintre cele mai des utilizate directive, v-bind si v-on.

prescurtari v-bind

<!-- full syntax -->
<a v-bind:href='url'> ... </a>

<!-- shorthand -->
<a :href='url'> ... </a>

<!-- shorthand with dynamic argument -->
<a :[key]='url'> ... </a>

prescurtari v-on

<!-- full syntax -->
<a v-on:click='doSomething'> ... </a>

<!-- shorthand -->
<a @click='doSomething'> ... </a>

<!-- shorthand with dynamic argument -->
<a @[event]='doSomething'> ... </a>

<<-Sintaxa Template -- Directive Conditionale v-if, v-else, ..->>

Un Test simplu in fiecare zi

HTML

CSS

JavaScript

PHP-MySQL

Engleza

Spaniola

Ce element HTML adauga continut flash SWF in pagina web?

<object type="application/x-shockwave-flash" data="file.swf" width="500" height="250">
 <param name="src" value="file.swf" />
 Browser-ul dv. nu suporta SWF.
</object>

Care pseudo-clasa CSS adauga un stil la un camp input de formular cand e cursorul in el?

:active :focus :hover

input:focus {
  background-color: #88fe88;
}

Clic pe instructiunea care transforma un sir JSON in obiect JavaScript.

JSON.stringify(javascript_object) object.toString() JSON.parse(json_string)

var jsnstr = '{"url": "http://coursesweb.net/", "title": "Web Development Courses"}';
var obj = JSON.parse(jsnstr);
alert(obj.url);

Indicati functia PHP care poate crea sau scrie un fisier pe server.

fopen() file_put_contents() file_get_contents()

if (file_put_contents("file.txt", "content")) echo "Fisierul a fost creat";
else echo "Fisierul nu poate fi creat";

Cum se spune "al treilea" in engleza?

threeth third three

I planted the third tree.
- Am plantat al treilea pom.

Cum se spune "al treilea" in spaniola?

segundo tres tercero

Yo planté el tercero árbol.
- Am plantat al treilea pom.