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 atribut specifica metoda HTTP de trimitere (GET, POST) a datelor din formular?
action method value
<form action="script.php" method="post"> ... </form>
Ce proprietate CSS adauga umbra la chenar?
background-image box-shadow border-radius
#id {
  background-color: #bbfeda;
  box-shadow: 11px 11px 5px #7878da;
}
Clic pe functia care elimina primul element dintr-un array?
pop() push() shift()
var fruits = ["mar", "cireasa", "banana"];
fruits.shift();
alert(fruits.length);           // 2
Indicati functia cu care se poate verifica daca un anumit modul e instalat in PHP.
function() filetype() extension_loaded()
if(extension_loaded("PDO") === true) echo "PDO este valabil."
Alegeti verbul auxiliar corect care trebuie in propozitia: " ... I listen to music?".
has have Can
 Can I listen to music?
- Pot asculta muzica?
Alegeti verbul corect care trebuie in propozitia: "Me ... las frutas dulces"
están gustan gusta
Me gustan las frutas dulces.
- Imi plac fructele dulci.
Vue JS - Evenimente

Last accessed pages

  1. Pronumele in limba engleza - Pronouns (27000)
  2. Afisare si chenare din CSS la elemente HTML (1864)
  3. Conditional IF in Limba Engleza - Fraze Conditionale (57884)
  4. Viitorul - Verbul la viitor (2587)
  5. Programe pentru invatare limba Spaniola (4527)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (635)
  2. Curs HTML gratuit Tutoriale HTML5 (536)
  3. Curs si Tutoriale JavaScript (437)
  4. Curs PHP MySQL, Tutoriale si Scripturi PHP (392)
  5. Curs CSS Online Tutoriale CSS3 (372)