Vue 2.0 Hello World

by Luis Martin

HTML

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

<div id="app">
  <span v-bind:title="message">
		Hover your mouse over me for a few seconds
		to see my dynamically bound title!
		</span>
  <br>
  <span v-if="seen">Now you see me</span>
  <br>
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
  <br>
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">Reverse Message</button>

  <br>
  <span v-once>This will never change: {{msg}}</span>
</div>

JavaScript

var app = new Vue({
  el: '#app',
  data: {
    message: 'You loaded this page on ' + new Date().toLocaleString(),
    seen: true,
    todos: [{
        text: 'Learn JavaScript'
      },
      {
        text: 'Learn Vue'
      },
      {
        text: 'Build something awesome'
      }
    ],
    msg: "una vez"
  },
  methods: {
    reverseMessage: function() {
      this.message = this.message.split('').reverse().join('')
    }
  }
})