v-bind: koppel bijvoorbeeld een link aan een href.
<div id="app">
<a v-bind:href="link">Google</a>
</div>
new Vue ({
el: '#app',
data: {
link: 'http://www.google.nl'
}
});
v-once: wordt maar ik keer gerenderd, kan niet geupdate worden in de toekomst.
<div id="app">
<p v-once>{{ title }}</p>
<p>{{ changeTitle() }}</p>
</div>
new Vue ({
el: '#app',
data: {
title: 'koen'
},
methods: {
changeTitle: function() {
this.title = 'henk';
return this.title;
}
}
});
v-html: zorgt ervoor dat als je html meegeeft dit ook als html wordt geschreven, niet als plain text. Pas wel op voor cross side scripting attacks. zorg ervoor dat de html code gecontroleerd is
<div id="app">
<p v-html="link"></p>
</div>
new Vue ({
el: '#app',
data: {
link: '<a href="http://www.google.nl">Google</a>'
}
});
v-on: luistert naar een event, bijv een button met een click. Bijv: click me</button, je kan elke dom event gebruiken dus ook mouseenter, mouseleave enz. bij dit voorbeeld voer je de function oncrease uit ben een click op de button. de function staat in de methods block in je javascript.
<div id="app">
<button v-on:click="increase">Click me</button>
<p>{{ counter }}</p>
</div>
new Vue ({
el: '#app',
data: {
counter: 0
},
methods: {
increase: function() {
this.counter++;
}
}
});
Event modifiers, hiermeer kun je een event modifie, er zijn er meerdere, v-on:mousemove.stop="", v-on:mousemove.prevent="", ook kun je deze chainen met elkaar(koppelen/combineren)
v-on:mousemove.stop="" stop propagation Stop propagation zorgt ervoor dat het event wat op het partent item ligt niet meer uitgevoerd word, bijvoorbeeld in het volgende voorbeeld. Hier zie je dat de x en y coördinaten worden getoond wanneer je met de mouse hovert over het element, in het element zit een span met de stop propagation functie.
<div id="app">
<p v-on:mousemove="updateCor">
Cor: {{ x }} / {{ y }}
<span v-on:mousemove.stop="">stop propagation</span>
</p>
</div>
new Vue ({
el: '#app',
data: {
x: 0,
y: 0
},
methods: {
updateCor: function(event) {
this.x = event.clientX;
this.y = event.clientY;
}
}
});
Key modifiers, hiermee kun je een key stroke modifie, bekijk het voorbeeld.
<div id="app">
<input type="text" v-on:keyup.enter.space="alertMe">
</div>
new Vue ({
el: '#app',
methods: {
alertMe: function (){
alert('Hello1');
}
}
});