vue.html

<!DOCTYPE html>
<html>
  <head>
    <title>My first Vue app</title>
    <script src="vue.js"></script>
  </head>
  <body>
    <!-- binding text -->
    <div id="app">
      {{ message }}
    </div>

    <!-- binding attributes -->
    <div id="app-2">
      <span v-bind:title="message">
        Hover your mouse over me for a few seconds
        to see my dynamically bound title!
      </span>
    </div>

    <div id="app-3">
      <span v-if="seen">Now you see me</span>
    </div>

    <div id="app-4">
      <ol>
        <li v-for="todo in todos">
          {{ todo.text }}
        </li>
      </ol>
    </div>

    <div id="app-5">
      <p>{{ message }}</p>
      <button v-on:click="reverseMessage">Reverse Message</button>
    </div>

    <div id="app-6">
      <p>{{ message }}</p>
      <input v-model="message">
    </div>

    <script>
      var app = new Vue({
        el: '#app',
        data: {
          message: "Hello Jack!"
        }
      });

      var app2 = new Vue({
          el: '#app-2',
          data: {
              message: 'You loaded this page on ' + new Date().toLocaleString()
          }
      });

      var app3 = new Vue({
        el: '#app-3',
        data: {
          seen: true
        }
      });

      var app4 = new Vue({
        el: '#app-4',
        data: {
          todos: [
            { text: 'Learn JavaScript' },
            { text: 'Learn Vue' },
            { text: 'Build something awesome' }
          ]
        }
      });

      var app5 = new Vue({
        el: '#app-5',
        data: {
          message: 'Hello Vue.js!'
        },
        methods: {
          reverseMessage: function () {
            this.message = this.message.split('').reverse().join('')
          }
        }
      });

      var app6 = new Vue({
        el: '#app-6',
        data: {
          message: 'Hello Vue!'
        }
      })


    </script>
  </body>
</html>