VueJS Events

by Plínio Naves

HTML

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

<div id="app">
  <button @click="doSome($event)">Click-me</button>
  <button @click.once="clickOnce">Click only once</button>
  <button @click.ctrl.shift="log('Ctrl + Shift + Click')">Ctrl + Shift + Click</button>
  <!-- dispara somente se não houverem teclas de sistema pressionadas -->
<button @click.exact="log('Exact')">Exact</button>
<button @click.left="log('Mouse left')">Mouse left</button>
<button @click.middle="log('Mouse middle')">Mouse middle</button>
<button @click.right="log('Mouse right')">Mouse right</button>
</div>

JavaScript

new Vue({
	el: '#app',
  methods: {
  	log: console.log,
  	clickOnce: function() {
    	console.log('clicked!');
    },
  	doSome: function(event) {
    	console.log(event);
      for (var key in event) {
      	if (key.indexOf('capture') > -1) {
        	console.log(key);
        }
      }
    }
  }
});