Difference between click and v-on click Vuejs

Question

the questions should be enough clear      But I can see that someone use    lt button  click  function    gt press lt  button gt   Someone use    lt button v-on click  function    gt press lt  button gt   But really what is the difference between the two  if exists

User · Answer

v-bind and v-on are two frequently used directives in vuejs html template  So they provided a shorthand notation for the both of them as follows   You can replace v-on  with    v-on click  someFunction    as    click  someFunction    Another example   v-on keyup  someKeyUpFunction    as    keyup  someKeyUpFunction    Similarly  v-bind with    v-bind href  var1    Can be written as    href  var1    Hope it helps

User · Answer

They may look a bit different from normal HTML  but   and   are valid chars for attribute names and all Vue js supported browsers can parse it correctly  In addition  they do not appear in the final rendered markup  The shorthand syntax is totally optional  but you will likely appreciate it when you learn more about its usage later   Source  official documentation

User · Answer

There is no difference between the two  one is just a shorthand for the second      The v- prefix serves as a visual cue for identifying Vue-specific   attributes in your templates  This is useful when you are using Vue js   to apply dynamic behavior to some existing markup  but can feel   verbose for some frequently used directives  At the same time  the   need for the v- prefix becomes less important when you are building an   SPA where Vue js manages every template     lt  -- full syntax -- gt   lt a v-on click  doSomething  gt  lt  a gt   lt  -- shorthand -- gt   lt a  click  doSomething  gt  lt  a gt    Source  official documentation

[vue.js] Difference between @click and v-on:click Vuejs

Examples related to vue.js

Examples related to vue-directives