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
Ce tag HTML5 este indicat sa contina meniul cu link-uri de navigare in site?
<section> <nav> <article>
<nav><ul>
 <li><a href="http://coursesweb.net/css/" title="CSS Course">CSS Course</a></li>
 <li><a href="http://www.marplo.net/jocuri/" title="Flash Games">Flash Games</a></li>
</ul></nav>
Ce proprietate CSS muta elementrul in dreapta sau stanga de la locul unde e?
text-align clear float
.some_class {
  width: 30%;
  float: left;
}
Clic pe metoda obiectului Math care rotunjeste numarul x descrescator la cel mai apropiat intreg.
Math.ceil(x) Math.abs(x) Math.floor(x)
var num = 12.34567;
num = Math.floor(num);
alert(num);       // 12
Indicati functia PHP care returneaza numarul de caractere dintr-un sir.
mb_strlen() count() stristr()
$str = "sir cu caractere utf-8 åèö";
$nrchr = mb_strlen($str);
echo $nrchr;        // 29
Clic pe raspunsul potrivit la intrebarea: "When it happened?".
On the 7th of July 1996 It is a quarter to 5. Nice weather.
When it happened? On the 8th of August 2001.
- Cand s-a intamplat? Pe 8 August 2001.
Indicati raspunsul potrivit la intrebarea: "¿Cuando sucedió?".
Hace buen tiempo. En el 8 de Agosto de 2001 Son las tres menos cuarto.
¿Cuando sucedió? En el 8 de Agosto de 2001.
- Cand s-a intamplat? Pe 8 August 2001.
Vue JS - Evenimente

Last accessed pages

  1. Aleg locul doi sa il castig pe primul (73)
  2. Lucrul cu stiluri CSS (5164)
  3. Notiuni fundamentale despre bazele de date SQL (8683)
  4. Miscare text in buton (414)
  5. Prezent perfect continuu - Exercitii si teste incepatori (9271)

Popular pages this month

  1. Prezentul simplu si continuu - Present Tense Simple and Continuous (2868)
  2. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (2789)
  3. Curs HTML gratuit Tutoriale HTML5 (2404)
  4. Curs CSS Online Tutoriale CSS3 (1914)
  5. Curs si Tutoriale JavaScript (1912)