Vue.js Quick Example

by Dogbert

HTML

<div id="demo" v-cloak>
  <button @click="increment">
    ++
  </button>
  <button @click="decrement">
    --
  </button>
  <button @click="reset">
    Reset
  </button>
  <counter v-ref:counters v-for="_ in 10000"></counter>
</div>

CSS

body {
  font-family: Helvetica Neue, Arial, sans-serif;
}

li.done {
  text-decoration: line-through;
}

[v-cloak] {
  display: none;
}

JavaScript

var demo = new Vue({
  el: '#demo',
  components: {
    counter: {
      data: function() {
        return {
          value: 0
        };
      },
      template: '<p>{{value}} <button @click="increment">+</button><button @click="decrement">-</button></p>',
      methods: {
        increment: function() {
          this.value++;
        },
        decrement: function() {
          this.value--;
        }
      }
    }
  },
  methods: {
    increment: function() {
      this.modify(function(x) {
        return x + 1;
      });
    },
    decrement: function() {
      this.modify(function(x) {
        return x - 1;
      });
    },
    reset: function() {
      this.modify(function() {
        return 0;
      });
    },
    modify: function(f) {
      this.$refs.counters.forEach(function(counter) {
        counter.value = f(counter.value);
      });
    }
  }
});