Vue 2.0 Hello World

by Eugene Fedorov

HTML

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

<div id="app">
  <p>{{ message }}</p>
  <button @click="addNewComponent">Load Dynamic Component</button>
</div>

JavaScript

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!',
    message2: 'This was added later',
  },
  methods: {
  	addNewComponent: function() {
    	setTimeout(function() {
      	$( "body" ).append( '<h1>{{message2}}</h1>' );
        // this one should print This was added later but not  {{message2}}
      }, 1000)
    }
  }
})