title: VueJs what is the difference between v-on:event and this.$on(event, handler)?
body: <p>I'm learning about <code>Vuejs event handling</code>.<br />
  I think that the developer could use <a href="https://v2.vuejs.org/v2/guide/components-edge-cases.html#Programmatic-Event-Listeners" rel="nofollow noreferrer"><code>this.$on('event', handler)</code></a> in <code>js</code> file to process the <code>'event'</code>.</p>
  <p>There is an <a href="https://jsfiddle.net/p98uwfz4/8/" rel="nofollow noreferrer">example</a>.</p>
  <pre><code>&lt;div id=&quot;mainapp&quot; v-on:event=&quot;processEventFromView&quot;&gt;
      &lt;button type=&quot;button&quot; v-on:click=&quot;emitEvent&quot;&gt;
         Emit Event
      &lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  <p><strong>js File</strong></p>
  <pre><code>var app = new Vue({
    el:&quot;#mainapp&quot;,
    data:{
      show:false
    },
    created:function(){
       this.$on('event', this.processEvent);
    },
    methods:{
        emitEvent:function(){
            this.$emit('event', {data:'mydata'});
        },
        processEvent(data){
           console.log('js', data);  //this is fired when clicking the button.
        },
        processEventFromView(data){
           console.log('view', data);  //this is not fired whenever.
        }      
  
     }
  })
  </code></pre>
  <p>But in the example, only the handler,<code>processEvent</code>, attached by <code>this.$on()</code> is fired when clicking the button.
  What is the difference between <code>v-on</code> vs <code>this.$on</code>?<br />
  Why is <code> v-on:event=&quot;processEventFromView&quot;</code> not called whenever?<br />
  Could I attach the <code>event handler</code> to the <code>click</code> event of the button with reference, <a href="https://v2.vuejs.org/v2/api/#vm-refs" rel="nofollow noreferrer"><code>ref</code></a>,  instead of <code>v-on:click=&quot;emitEvent&quot;</code>?<br />
  Please help me what I'm wrong.</p>