The very first Vue.js example

by dgommeren

HTML

<script src="http://vuejs.org/js/vue.min.js"></script>
<script src="https://npmcdn.com/vue/dist/vue.js"></script>

<div id="exercise">
    <!-- 1) Show a "result" of 'not there yet' as long as "value" is not equal to 37 - you can change "value" with the buttons. Print 'done' once you did it -->
    <div>
        <p>Current Value: {{ value }}</p>
        <button @click="value += 5">Add 5</button>
        <button @click="value += 1">Add 1</button>
        <p>{{ result }}</p>
    </div>
    <!-- 2) Watch for changes in the "result" and reset the "value" after 5 seconds (hint: setTimeout(..., 5000) -->
    <div>
        <input type="text">
        <p>{{ value }}</p>
    </div>
</div>

<script>
new Vue({
        el: '#exercise',
        data: {
            value: 0
        },
        computed: {
            result: function() {
                return this.value==37?"done":"not there yet";
            }
        },
        watch: {
            result: function(value) {
                var vm = this;
                setTimeout(function() {
                    vm.value = 0;
                }, 5000);
            }
        }
    });
</script>

JavaScript

var demo = new Vue({
  el: '#demo',
  data: function() {
    return {
      age: ''
    };
  },
  computed: {
    doubleAge: function() {
      return 2 * this.age
    }
  },
  watch: {
    doubleAge: function(val) {
      alert("yes, computed property changed")
    }
  }
})