title: What does v-on="..." syntax mean in VueJS?
body: <p>I came across a Vuetify example for the <a href="https://vuetifyjs.com/en/components/dialogs#usage" rel="nofollow noreferrer">v-dialog component</a> which has the scoped slot called activator defined as follows:</p>
  <pre><code>  &lt;template v-slot:activator=&quot;{ on }&quot;&gt;
      &lt;v-btn
        color=&quot;red lighten-2&quot;
        dark
        v-on=&quot;on&quot;
      &gt;
        Click Me
      &lt;/v-btn&gt;
    &lt;/template&gt;
  </code></pre>
  <p>I understand the purpose of <a href="https://v2.vuejs.org/v2/guide/components-slots.html#Scoped-Slots" rel="nofollow noreferrer">scoped slots from VueJS docs</a> and the concept of <a href="https://v2.vuejs.org/v2/guide/components-slots.html#Destructuring-Slot-Props" rel="nofollow noreferrer">destructuring slot props</a> but I don't understand what the meaning of <code>v-on=&quot;on&quot;</code> is in this example. In particular what it means when the event is not specified with the <code>v-on</code> directive?</p>
  <p>The <a href="https://v2.vuejs.org/v2/guide/events.html" rel="nofollow noreferrer">VueJS docs on <code>v-on</code></a> only show its usage in combination with an event name explicitly specified (eg. <code>v-on:click=&quot;...&quot;</code>) but there is no explanation of just using it as <code>v-on=&quot;...&quot;</code>.</p>
  <p>Can someone explain this syntax and its usage in the Vuetify example?</p>