首先先簡單顯示訊息，了解資料傳遞的方式
試用Vue.js的最簡單方法是使用JSFiddle Hello World範例

// html
<script src="https://npmcdn.com/vue/dist/vue.js"></script>

<div id="app">
    {{ message }}
</div>

// js
new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue.js!'
    }
})

接著試試看 input text

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

// 
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})

建立一個list

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

// js
new Vue({
  el: '#app',
  data: {
    todos: [
      { text: 'Learn JavaScript' },
      { text: 'Learn Vue.js' },
      { text: 'Build Something Awesome' }
    ]
  }
})

定義一個方法，翻轉input的內容

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

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