Vue 2.0 Hello World

HTML

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

<div id="app">
  <p>{{ message }}</p>
  
  <button @click="loadItems()">
    Click to load items
  </button>
  
  <button @click="clearItems()">
    Click to clear items
  </button>
  
  <ul>
    <li v-for="item in listOfItems">
      <div>
        {{ item.name }} - {{ item.value }}
      </div>
    </li>
  </ul>
</div>

JavaScript

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!',
    listOfItems: [],
  },
  methods: {
  	
    // You can have methods that manipulate the client side
    // data for your app.
    loadItems: async function() {
    	// Pretend some AJAX request here
      let data = await this.getItemsFromServer();
    	this.listOfItems = data;
    },
    
    // Here we're just emulating data returned from an AJAX call
    getItemsFromServer: function() {
    	return [
      	{name: "Item 1", value: "$19.99"},
        {name: "Item 2", value: "$14.99"},
        {name: "Item 3", value: "$5.99"},
        {name: "Item 4", value: "$3.99"},
        {name: "Item 5", value: "39.99"},
      ];
    },
    
    // To reset our data
    clearItems: function() {
    	this.listOfItems = [];
    }
  }
})