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>
<table><tr> <th>Title 1</th> <th>Title 2</th> </tr></table>
.some_class {
line-height: 150%;
}document.getElementById("id_button").onclick = function(){
window.open("http://coursesweb.net/");
}$ar_dir = scandir("dir_name");
var_export($ar_dir);He will sleep there. - El va dormi acolo.
Él dormirá allí. - El va dormi acolo.