I Vue bruges “directives” til events. Det ligner HTML-attributes, der er specifikke for Vue. Her ses et directive, der er sat til click. Vue har 2 way binding, så når man klikker på knappen bliver book_number ændret i app og på samme tid bliver teksten på siden man laver ændret
<!--html-->
<button v-on:click="title = 'A Clash of Kings'">Change book title</button>
<button v-on:click="book_number++">Change book number</button>
Da man bruger events ofte kan v-on: erstattes med @
<!--html-->
<button @click="title = 'A Clash of Kings'">Change book title</button>
<button @click="book_number++">Change book number</button>
Andre events
- v-on:mouseover (@mouseover)
- v-on:mouseleave (@mouseleave)
- v-on:dblclick (@dblclick)
Vær opmærksom på, at man kan bruge event objektet som ved eventhandlers i vanilla JS. Vil man bruge flere argumenter end bare event objektet gøres det sådan her
<!--html-->
<button @click="myFunction($event, 5)">Click here</button>
- Introduktion til VueJS
- Vue – Events
- Vue – Methods
- Vue – Directives
- Vue – Attribute binding
- Vue – Computed properties
- Vue – refs
Læs mere om Vue