Simple Vue Example

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/accounting.js/0.4.1/accounting.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <ul>
    <li v-for="data in jsonData">{{data}}</li>
  </ul>
  <button v-on:click="greet">Greet</button>
  <div>{{log}}</div>
</div>

JavaScript

new Vue({
  el: '#app',
  data: {
    jsonData: [],
    log: ""
  },
  mounted() {
    this.loadJsonData();
  },
  methods: {
    loadJsonData() {
      setTimeout(() => {
        this.jsonData = ["first", "Second", "Third", "And So On"]
      }, 300)
    }
    say: function(message) {
        console.log("Say " + message)
      },
      greet: function(event) {
      	log = this.name
        // `this` inside methods points to the Vue instance
        alert('Hello ' + this.name + '!')
          // `event` is the native DOM event
        if (event) {
          alert(event.target.tagName)
        }
      }
  }
})