What is the difference between v-on:click="..." and using onclick="..." in Vue.js?

I understand that with the v-on:click you need to write the handler inside of the Vue object (like the example in the docs), but what is the advantage? It seems simple enough to just write an onclick="..." to call function (outside of the Vue object).

What is the difference between v-on:click="..." and using onclick="..." in Vue.js?

I understand that with the v-on:click you need to write the handler inside of the Vue object (like the example in the docs), but what is the advantage? It seems simple enough to just write an onclick="..." to call function (outside of the Vue object).

• javascript
• vue.js

• @VicJordan No, it's not the same question. – CoderSteve Commented Jul 19, 2018 at 13:50
• @VicJordan unless I'm mistaken, the OP is asking about the difference between v-on and the native DOM API's onclick. The post you linked is not about that. – zero298 Commented Jul 19, 2018 at 13:50
• @VicJordan I don't think its a duplicate, the referenced question explains the sytactic shorthand – collapsar Commented Jul 19, 2018 at 13:50
• Two reasons e to my mind: 1.) consistency - v-on: notation can be used not just for native DOM events but for application-defined vue events, thus you gain consistency. 2.) v-on: handlers can be defined not just on DOM nodes but on vue ponents. – collapsar Commented Jul 19, 2018 at 13:52
• @collapsar I think I'm starting to get it. You can handle special stuff such as v-on:click.self='...'. And all your functions will have to be defined within the Vue class, thus organization. Although wouldn't your Vue class bee huge? Also, this section helped me understand a bit vuejs/v2/guide/events.html#Why-Listeners-in-HTML – CoderSteve Commented Jul 19, 2018 at 13:58

2 Answers 2

One of the chief differences is scope access. onclick's bound scope is global so the functions that you want it to call have to be accessible from the global scope. v-on's scope is the Vue model.

Another thing is that Vue provides a very easy API to define custom events through vm.$emit(). It's also very easy to listen for those events using v-on:customevent="callback" which can be easily cognitively mapped to a hypothetical onfizz="callback()".

With that in mind, it makes sense to also provide v-on:click for a consistent API as well as the other extensions v-on provides.

/*
 * This pollutes scope.  You would have to start
 * making very verbose function names or namespace your 
 * callbacks so as not collide with other handlers that
 * you need throughout your application.
 */
function onClickGlobal() {
  console.log("global");
}

const fizzbuzz = {
  template: "<button @click='onClick'>FizzBuzz</button>",
  methods: {
    onClick() {
      this.$emit("fizz");
    }
  }
};

const app = new Vue({
  el: "#app",
  ponents: {
    fizzbuzz
  },
  methods: {
    onClickModel() {
      console.log("model");
    },
    onFizz() {
      console.log("heard fizz");
    }
  }
});

<script src="https://cdn.jsdelivr/npm/vue/dist/vue.min.js"></script>

<div id="app">
  <section>
    <h2>Buttons and Clicks</h2>

    <!-- Calling function of the bound scope -->
    <button @click="onClickModel">v-on Model</button>
    <!-- Works as well, but calls the global  -->
    <button @click="onClickGlobal">v-on Global</button>

    <!-- You need to explicitly invoke the function from onclick -->

    <!-- This won't work because onClickModel isn't global -->
    <button onclick="onClickModel()">onclick Model</button>
    <!-- Works because onClickGlobal is global -->
    <button onclick="onClickGlobal()">onclick Global</button>

    <!-- You can technically call onClickModel through the global app -->
    <!-- but you really shouldn't -->

    <!-- Works because app.onClickModel is technically global -->
    <button onclick="app.onClickModel()">onclick Global through app.onClickModel</button>

  </section>
  <section>
    <h2>Custom Events</h2>
    <fizzbuzz @fizz="onFizz"></fizzbuzz>
    <!-- The element below doesn't work -->
    <button onfizz="onClickGlobal">Hypothetical Fizz</button>
  </section>
</div>

Its all about the scope. To answer your Question "but what is the advantage":

No benefit as long as you use it in a small frame for yourself. BUT as soon as you want to use it for example another project which has some JS-Components itself, you'd have to worry about colliding with some existing global functions. While having everything in the ponent itself you dont have to worry about a thing.