Vue 2.0 Hello World

by Thorsten

HTML

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-clickaway/dist/vue-clickaway"></script>
<div id="app">
  <button @click="showMenu = !showMenu">Toggle Menu</button>
  <ul v-clickaway="() => closeMenu(true)" v-if="showMenu">
    <li 
      v-for="item in items"
      @click="removeItem(item); closeMenu()"
    >{{item}}</li>
  </ul>
</div>

Babel + JSX

Vue.directive('clickaway', VueClickaway.directive)

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!',
    items: ['A', 'B', 'C'],
    showMenu: false
  },
  methods: {
  	removeItem(item) {
      console.log('removing item')
    },
    closeMenu(outside) {
	    if (outside) {
        console.log('clicked outside')
      }
      console.log('closing menu')
      this.showMenu = false
    }
  }
  
})