Vue

by pbastowski

HTML

<div id="app">
  <h2 @[ev]="alert('Normal click on an HTML element')">H2 Element - click it</h2>
  <widget @[ev].native="alert('.native click on a Vue component')"></widget>
  <hr>
  Event type:
  <label><input type="checkbox" v-model="typ" true-value="1"> click</label>
  <label><input type="checkbox" v-model="typ" true-value="2"> null</label>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

Vue.prototype.log = console.log.bind(console)
Vue.prototype.alert = window.alert.bind(window)

const Widget = {
	template: `<h1 @[ev]="alert('Normal click on H1 element in the Widget component')">Vue Component Here - click it</h1>`,
  data: ()=> ({ ev: 'click' })
}

new Vue({
  el: "#app",
  data: {
    typ: '1'
  },
  components: { Widget },
  computed: {
  	ev() {
    	return this.typ === '1' ? 'click' : null //'dblclick'
    }
  }
})