创建一个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