vue directives

by simati

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.1/vue.js"></script>
<div id="app">
  <div v-ons="eventHash">
    Kitty [{{ msg }}]
  </div>
</div>

JavaScript

Vue.directive('ons', function (el, binding) {
	const events = binding.value
	Object.keys(events).forEach((key) => {
  	el.addEventListener(key, events[key])
  })
})

new Vue({
	data: {
  	msg: '...',
  },
	methods: {
  	purr () { this.msg = 'purrrr' },
    hiss () { this.msg = 'HISSSS' },
  },
  computed: {
  	eventHash () {
    	return {
        'click': this.purr,
        'dblclick': this.hiss,
      }
    },
  },
}).$mount('#app')