Vue 2.0 Hello World

by KevinGabbert

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <p>{{ message }}</p>
</div>

JavaScript

const Hooks = ['created', 'beforeMount', 'mounted'
	'beforeUpdate', 'updated',
  'beforeDestroy', 'destroyed'
]
Vue.mixin({
  beforeCreate() {
    const auth = this.$options.auth
    if (auth) {
      let hook
    	Hooks.forEach((Hook) => {
        if (hook = this.$options[Hook]) {
          this.$options[Hook] = authWrapper(auth, hook)
        }
      })
    }
  }
})

function authWrapper (auth, hook) {
  if (auth()) {
    hook()
  }
}
Vue.component('edit-button', {
  template: `<button>Edit</button>`,
  methods: {
    click() {console.log('clicked Edit!') },
  },
  mounted() { console.log('mounted!', this) },
  auth() {
    return true
  }
})

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})