LU06b - v-on
Learning ojectives
- Be able to explain the objectives of event handling and give examples.
- Be able to name actions that can follow events.
- Be able to use simple Vue events.
Source
Introduction
After discussing the principle of events in VUE in the last chapter, this chapter goes a little further. In other words, more exciting exercises, e.g.
- Mouseover,
- Mousemove,
- …
Example 1
<div id="app"> <button v-on:click="count++">Clicked {{ count }} times</button> </div> <script> new Vue({ el: '#app', data: { count: 0 } }) </script>
Example 2
<div id="app"> <p v-on:mouseover="message = 'Mouse is over the text!'">{{ message }}</p> </div> <script> new Vue({ el: '#app', data: { message: 'Hover over me!' } }) </script>