<template>
  <h1>v-on Example</h1>
  <p>The '.passive' modifier sets the event handler as passive, and this can enhance performance.</p>
  <div v-on:scroll.passive="this.scrollTimes++" id="parent">
    <p>Scroll here.</p>
    <p>Bladi-bladi-bladi</p>
    <p>potato potato</p>
    <p>Scroll-scroll-scroll</p>
    <p>Scroll more...</p>
  </div>
  <p>Scroll happended {{ scrollTimes }} times.</p>
</template>

<script>
export default {
  data() {
    return {
      scrollTimes: 0
    };
  }
}
</script>

<style scoped>
div {
  margin: 10px;
  padding: 10px;
  border: dashed black 1px;
  width: 200px;
  height: 50px;
  overflow: scroll;
  background-color: lightcoral;
}
</style>                  

import { createApp } from 'vue'

import App from './App.vue'

const app = createApp(App)
app.mount('#app')