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>
</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 Vue component')">Vue Component Here - click it</h1>`,
  data: ()=> ({ ev: 'click' })
}

new Vue({
  el: "#app",
  data: {
    ev: 'click'
  },
  components: { Widget }
})