Curs Vuejs


Detectare evenimente

VueJS foloseste directiva v-on pentru a detecta evenimente in pagina HTML.
Directiva v-on e urmata de numele evenimentului (:click, :input, :mouseenter, etc.), si in general ca valoare la acest atribut se adauga numele unei metode definita in proprietatea methods. Acea metoda e apelata la emiterea evenimentului.

Sintaxa de baza:
<button v-on:eventName='methodName'>Try it</button>

<script>
var vm = new Vue({
 //...
 methods:{
 methodName: function(event){
 //code to execute..
 }
 }
})
</script>
- eventName e numele evenimentului: click, input, mouseenter, etc.

Exemplu simplu cu click:
<div id='demo'>
<h1>{{hi}}</h1>
<button v-on:click='greet'>Try it</button>
</div>

<script>
var vue_ob = new Vue({
 el: '#demo',
 data: {hi: ''},
 methods:{
 greet: function(ev){
 this.hi ='Hello brother';
 }
 }
})
</script>

In metoda adaugata la v-on se poate transmite o valoare si un al doilea argument cu instanta evenimentului:
<button v-on:eventName='methodName("string", $event)'>Try it</button>

<script>
var vm = new Vue({
 //...
 methods:{
 methodName: function(value, event){
 //code to execute..
 }
 }
})
</script>

Testati si studiati urmatorul exemplu:
<div id='demo'>
<h1>{{hi}}</h1>
<a href='/' v-on:click='test("Linkul e oprit", $event)'>Open the page</a>
</div>

<script>
var vue_ob = new Vue({
 el: '#demo',
 data: {hi: ''},
 methods:{
 test: function(val, ev){
 this.hi = val;
 if(ev){
 ev.preventDefault();
 alert('Link address: '+ ev.target.href);
 }
 }
 }
})
</script>

Evenimente multiple in v-on

Se pot adauga mai multe evenimente intr-un obiect in directiva v-on, dar fara argument.
- Sintaxa:
<button v-on={event_1:method_1, event_2:method_2}>Try it</button>

Observatie: Cu aceasta metoda nu puteti adauga modificator, nici nu puteti transmite un argument la metoda apelata, dar este transmisa automat instanta evenimentului.


Exemplu:
<div id='demo'>
<div v-bind:style='styleobj' v-on='{mouseenter:bground, mouseleave:bground}'>Place the mouse here</div>
</div>

<script>
var vue_ob = new Vue({
 el: '#demo',
 data: {
 styleobj:{background:'#fbfc00', height:'111px', width:'111px'}
 },
 methods:{
 bground: function(ev){
 let bgr ={mouseenter:'#bbbbfe', mouseleave:'#00e000'};
 this.styleobj.background = bgr[ev.type];
 }
 }
})
</script>

Evenimente - Modificatori

Vue ofere modificatori care se pot adauga dupa numele evenimentului de la v-on.
Sintaxa:
<button v-on:eventName.modifier='methodName'>Try it</button>

Exemple cu unele modificatoare disponibile in Vue:
prevent - apeleaza event.preventDefault().
 
<form action='/' id='frm1' v-on:submit.prevent='test'>
The submit event will not reload the page, but will call a Vue method.<br>
<input type='text' name='inp1' value='MarPlo'/> <input type='submit' value='Send'/>
<div>{{text}}</div>
</form>

<script>
var vue_ob = new Vue({
 el: '#frm1',
 data: {
 text:''
 },
 methods:{
 test: function(ev){
 this.text = ev.target.inp1.value;
 }
 }
})
</script>
once - apeleaza metoda o singura data.
<div id='demo'>
Nr. clicks: <b>{{nrc}}</b><br>
Only one click is emitted: <button v-on:click.once='nrc +=1'>Click</button>
</div>

<script>
var vue_ob = new Vue({
 el: '#demo',
 data: {
 nrc:0
 }
})
</script>
self - evenimentul este emis doar daca a fost declansat direct din elementul specificat, nu din sub-elementele lui.
<div id='demo'>
Click event is registered with '<b>self</b>' modifier on Parent.<br>
If you click on the Child element, it will have no effect.<br>
Nr. clicks: <b>{{nrc}}</b><br>
<div style='background:#b0b0fe; height:144px; text-align:center; width:220px' v-on:click.self='nrc +=1'>
Parent
<div style='background:#00da00; margin:12px; height:88px; width:115px'>Child</div>
</div>
</div>

<script>
var vue_ob = new Vue({
 el: '#demo',
 data: {
 nrc:0
 }
})
</script>
left | middle | right - emite evenimentul doar la apasarea butonului de mouse specificat: stanga, mijloc sau dreapta.
<div id='demo'>
It registers the clicks on the right button mouse: <b>v-on:click.right.prevent</b>.<br>
The <b>prevent</b> modifier is added to stop default behavior (here to stop opening menu on right click).<br><br>
Nr. clicks: <b>{{nrc}}</b><br>
<div style='background:#afaffe; height:144px; text-align:center; width:222px' v-on:click.right.prevent='nrc +=1'>
Right click here
</div>

<script>
var vue_ob = new Vue({
 el: '#demo',
 data: {
 nrc:0
 }
})
</script>

Se pot inlantui mai multi modificatori la un eveniment cu v-on, vedeti in exemplu de mai sus: v-on:click.right.prevent.


Modificatori pentru Taste

Vue.js ofera modificatori pentru taste la detectarea apasarii anumitor butoane de la tastatura (Ctrl, Enter, etc.).
- Sintaxa:
v-on.eventname.keyname
Se pot inlantui mai multe nume de butoane: v-on.onkeydown.ctrl.enter

- Exemplu:
<div id='demo'>
Add some text, then press enter.
<form action='/' v-on:keydown.enter.prevent='submitFrm'>
<input type='text' value='MarPlo'/>
<div v-html='str'></div>
</form>
</div>

<script>
var vue_ob = new Vue({
 el: '#demo',
 data: {
 str:''
 },
 methods:{
 submitFrm:function(ev){
 this.str ='The form submits the text: <b>'+ ev.target.value +'</b>';
 }
 }
})
</script>

prescurtare pentru v-on.event

Ca prescurtare, se poate inlocui v-on: cu caracterul @.
- Sintaxa:
<div @eventName='methodName'></div>

Evenimente dinamice

In Vue JS se pot folosi si evenimente dinamice, adaugate intre paranteze patrate:
v-on:[event]='methodName'

//OR
@[event]='methodName'

Exemplu:
<div id='demo'>
<h1>{{hi}}</h1>
<button @[ev_name]='greet'>Try it</button>
</div>

<script>
var vue_ob = new Vue({
 el: '#demo',
 data: {
 hi: '',
 ev_name: 'click'
 },
 methods:{
 greet: function(ev){
 this.hi ='Iert trecutul, iubesc prezentul, am incredere in viitor.';
 }
 }
})
</script>

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 :active
a: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.
Vue JS - Evenimente

Last accessed pages

  1. OOP - Clase si Obiecte - Creare Clasa (6765)
  2. Verbe ca si Gustar (1846)
  3. Gramatica limbii spaniole. Indrumator si prezentare generala (66723)
  4. Alte forme complexe cu DIV si CSS (479)
  5. Introducere in HTML (24987)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (767)
  2. Exercitii engleza - English Tests and exercises - Grammar (596)
  3. Prezentul simplu si continuu - Present Tense Simple and Continuous (587)
  4. Gramatica limbii engleze - Prezentare Generala (580)
  5. Prezentul simplu - Exercitii si teste incepatori (504)