創建一個Vue實例僅需4步，如下所示：

創建Vue實例.png

我們知道，定義一個Vue實例的參數有el（指定掛載的DOM元素），data（實例的數據），上一節講過除了這兩個之外，還可以定義其他參數。今天，我們就來學習在開發中，我們要怎么定義一個vue實例才能滿足我們的需要？
下面，我們先用上一節的知識，先創建一個Vue實例：

<div id = "app"></div>
<script>
  let vm = new Vue({
    // 掛載元素
    el: '#app',
    // 實例vm的數據
    data: {}
  })
</script>

很簡單，接下來，就用這個實例來展開講解。
我們就具體講一下定義一個Vue實例會用到的4個常用參數選項。

1、filters 過濾器

let vm = new Vue({
  el: '#app',
  data: {
    num1: 33.141,
    num2: 46.212,
    num3: 78.541
  }
})

num1,num2,num3都是Vue實例vm的小數，我們把它展示在視圖上：

<div id="app">
  數字1：{{ num1 }}<br>
  數字2：{{ num2 }}<br>
  數字3：{{ num3 }}
</div>

利用上節講到的雙大括號{{ }}渲染出來，很簡單。如下圖所示：

效果圖.png

然而當需求突然改變了，我們不能把小數展示出來，需要把小數轉換成整數再顯示。
這個時候，我們需要把三個小數經過過濾處理后再展示，不能直接展示。這種情況就需要用到Vue的filters過濾器了。

let vm = new Vue({
  el: ‘#app',
  data: {
    num1: 33.141,
    num2: 46.212,
    num3: 78.541
  },
  // 過濾器
  filters: {
    toInt(value) {
      return pareseInt(value)
    }
  }
})

參數對象處理el和data屬性之外，還多了一個filters屬性，它的值也是一個對象，里面定義了一個叫toInt()的方法，傳入了一個value的參數，函數的作用就是把傳入的參數value，簡單地轉成一個整數，并return回去。
如果toInt()函數的寫法你看起來覺得陌生的話，這樣寫你會不會覺得熟悉很多：

// 過濾器
filters: {
  toInt: function(value) {
    return parseInt(value)
  }
}

這是ES5的語法，我們后面都會使用ES6的最新寫法，如果還不是很了解，建議先學習一下ES6的相關教程。
回到過濾器filters，定義完filters屬性后，接下來怎么做呢？

<div id="app">
  數字1：{{ num1 | toInt }}<br>
  數字2：{{ num2 | toInt }}<br>
  數字3：{{ num3 | toInt }}
</div>

如上代碼所示，通過管道符 | 把函數toInt放到變量后面即可，num1，num2，num3會分別作為參數value傳入toInt(value)方法進行運算，并返回一個整數。
我們運行后得到的結果：

過濾后的效果.png

2、computed 計算屬性

let vm = new Vue({
  el: '#app',
  data: {
    num1: 1,
    num2: 3,
    num3: 6
  },
  // 計算屬性
  computed: {
    sum() {
      return this.num1 + this.num2 + this.num3
    }
  }
})

計算屬性computed的定義語法和過濾器filters類似，但是用法不一，如下：

<div id="app">
  總和：{{ sum }}
</div>

計算屬性computed用法更簡潔，僅需{{ sum }}就能讀取到它的計算結果：1+3+6結果應該為10。

計算結果.png

需要注意的是，sum的值是依賴data中的數據num1，num2，num3的值，一旦它們發送了變化，sum的值也會自動更新。
我們試一下，通過chrome控制臺把num1的值從1變成2，再看看sum的結果會是多少？

效果圖.png

3、methods 方法

let vm = new Vue({
  el: '#app',
  data: {
    a: 0
  },
  // methods方法
  methods: {
    plus() {
      return this.a++
    }
  }
})

定義一個plus()的方法在methods中，下面我們把plus()綁定在按鈕的點擊事件上：

<div id="app">
  {{ a }}
  <button @click="plus"> +1 </button>
</div>

在Vue中通過@指令來綁定事件，@是v-on:的簡寫形式，以后都用@來綁定事件。當我們點擊按鈕時，methods中的方法plus()就會被調用，實現給a的加1的操作，并更新視圖。

4、watch 觀察

let vm = new Vue({
  el: '#app',
  data: {
    a: 0
  },
  methods: {
    plus() {
      return this.a++
    }
  },
  watch: {
    a() {
      console.log('發生了改變，最新值為：')
      console.log(this.a)
    }
  }
})

最后一部分watch就是我們新加的代碼，a()表示我們要觀察監聽的就是數據a，我們看運行結果：

效果圖.png