Vue.js Quick Example

by Hristiyan Dodov

HTML

<script src="http://vuejs.org/js/vue.min.js"></script>
<div id="demo" v-cloak>
    <p>Value: {{ counter }}</p>

    <transition name="fade" @before-enter="exists = true" @after-leave="exists = false">
      <p v-if="visible || exists" v-show="visible">Transition: {{ counter }}</p>
    </transition>

    <button @click="visible = !visible">
      Transition!
    </button>
    <br>
    visible: {{visible}}
    <br>
    exists: {{exists}}
</div>

CSS

.fade-enter, .fade-leave-to {
  opacity: 0;
}

.fade-enter-active, .fade-leave-active {
  transition: 2s ease;
}

[v-cloak] {
  display: none;
}

JavaScript

var demo = new Vue({
    el: '#demo',
    data: {
    		visible: true,
        exists: true,
        counter: 0
    },
    created: function () {
			setInterval(function () {
				this.counter++;
			}.bind(this), 200);
		}
})