LU06b - v-on

1. Be able to explain the objectives of event handling and give examples.
2. Be able to name actions that can follow events.
3. Be able to use simple Vue events.

• W3School-Events - v-on

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,
• …

<div id="app">
  <button v-on:click="count++">Clicked {{ count }} times</button>
</div>
<script>
  new Vue({
    el: '#app',
    data: {
      count: 0
    }
  })
</script>

<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>

Volkan Demir