Vue 2.0 Hello World

by simati

HTML

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

<div id="app">
  {{key}}

  <button @click="key++">Reload</button>

  <transition name="fade">
    <hello :key="key"></hello>
  </transition>
</div>

CSS

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0
}

JavaScript

Vue.component('hello', {
  template: '<div>hello</div>',
  mounted() {
    console.log('Mounted hello!!')
  }
})

new Vue({
  el: '#app',
  data: {
    key: 0,
  }
})