VueJS Getting Started

Let's get started with VueJS!

by Asif Sharif Shahid

HTML

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

<div id="app">
  <transition name="fade" mode="out-in">
    <div v-if="show" key="1">111</div>
    <div v-else key="2">222</div>
  </transition>
  <button @click="show = !show">Toggle</button>
</div>

CSS

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s
}
.fade-enter, .fade-leave-to {
  opacity: 0
}

JavaScript

new Vue({
	el: '#app',
  data: {
    show: true
  }
});