v-on

為了讓使用者和你的應用進行互動，我們可以用 v-on 指令繫結一個監聽事件用於呼叫我們 Vue 例項中定義的方法： html：

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

js:

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

頁面顯示： 點選button按鈕 在reverseMessage方法中，我們在沒有接觸 DOM 的情況下更新了應用的狀態 - 所有的 DOM 操作都由 Vue 來處理，你寫的程式碼只需要關注基本邏輯。

v-model

html：

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

js:

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

頁面顯示為：

用元件構建（應用）

元件系統是 ==Vue.js ==另一個重要概念，因為它提供了一種抽象，讓我們可以用獨立可複用的小元件來構建大型應用。如果我們考慮到這點，幾乎任意型別的應用的介面都可以抽象為一個元件樹：

在 Vue 裡，一個元件實質上是一個擁有預定義選項的一個 Vue 例項：

// Define a new component called todo-item
 

Vue.component('todo-item', {
  template: '<li>This is a todo</li>'
})

現在你可以另一個元件模板中寫入它： html:

<ul>
  <!-- Create an instance of the todo-item component -->
  <todo-item></todo-item>
</ul>

但是這樣會為每個 todo 渲染同樣的文字，這看起來並不是很酷。我們應該將資料從父作用域傳到子元件。讓我們來修改一下元件的定義，使得它能夠接受一個 ==prop ==欄位： js:

Vue.component('todo-item', {
  // The todo-item component now accepts a
  // "prop", which is like a custom attribute.
  // This prop is called todo.
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

現在，我們可以使用 v-bind 指令將 todo 傳到每一個重複的元件中： html:

<div id="app-7">
  <ol>
    <!-- Now we provide each todo-item with the todo object    -->
    <!-- it's representing, so that its content can be dynamic -->
    <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
  </ol>
</div>

js:

Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})
var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [
      { text: 'Vegetables' },
      { text: 'Cheese' },
      { text: 'Whatever else humans are supposed to eat' }
    ]
  }
})

頁面顯示為:

1. Vegetables
2. Cheese
3. Whatever else humans are supposed to eat

這只是一個假設的例子，但是我們已經將應用分割成了兩個更小的單元，子元素通過== props ==介面實現了與父親元素很好的解耦。我們現在可以在不影響到父應用的基礎上，進一步為我們的 todo 元件改進更多複雜的模板和邏輯。

在一個大型應用中，為了使得開發過程可控，有必要將應用整體分割成一個個的元件。在後面的教程中我們將詳述元件，不過這裡有一個（假想）的例子，看看使用了元件的應用模板是什麼樣的：

<div id="app">
  <app-nav></app-nav>
  <app-view>
    <app-sidebar></app-sidebar>
    <app-content></app-content>
  </app-view>
</div>