v-on
pentru a detecta evenimente in pagina HTML.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.<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.
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>
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>
<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>
v-on
, dar fara argument.Observatie: Cu aceasta metoda nu puteti adauga modificator, nici nu puteti transmite un argument la metoda apelata, dar este transmisa automat instanta evenimentului.
<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>
v-on
.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
.
v-on.onkeydown.ctrl.enter
<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>
v-on:
cu caracterul @
.v-on:[event]='methodName' //OR @[event]='methodName'
<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>
<p>Cursuri graruite: <mark>MarPlo.net</mark> , jocuri, anime.</p>
a:hover { font-weight: bold; color: #00da01; }
var num = 12.34567; num = num.toFixed(2); alert(num); // 12.35
$arr = file("a_file.txt", FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES); var_export($arr);
What time is it? It is a quarter to 5. - Cat este ora? E 5 fara un sfert.
¿Qué hora es? Son las tres menos cuarto. - Cat este ora? E 3 fara un sfert.