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>
Un Test simplu in fiecare zi
HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care tag HTML5 defineste un text marcat, evidentiat?
<mark> <embed> <span><p>Cursuri graruite: <mark>MarPlo.net</mark> , jocuri, anime.</p>
Ce pseudo-clasa CSS defineste un stil la element cand mouse-ul e deasupra lui?
:focus :hover :activea:hover {
font-weight: bold;
color: #00da01;
}
Clic pe functia ce returneaza un sir cu un numar rotunjit la x decimale.
toPrecision(x) toFixed(x) floor(x)var num = 12.34567;
num = num.toFixed(2);
alert(num); // 12.35
Indicati functia PHP care adauga continutul unui fisier intr-un array.
[) file() readfile()$arr = file("a_file.txt", FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
var_export($arr);
Clic pe raspunsul potrivit la intrebarea: "What time is it?"
On the 7th of July 1996 It is a quarter to 5. Nice weather.What time is it? It is a quarter to 5.
- Cat este ora? E 5 fara un sfert.
Indicati raspunsul potrivit la intrebarea: "¿Qué hora es?"
Hace buen tiempo. En el 7 de julio de 1996 Son las tres menos cuarto.¿Qué hora es? Son las tres menos cuarto.
- Cat este ora? E 3 fara un sfert.