上一节，我们讲过如何创建一个Vue实例，仅需4步走：
( 不厌其烦地复习一下 )
我们知道，定义一个Vue实例的参数有el（指定挂载的DOM元素），data（实例的数据），上一节讲过除了这两个之外，还可以定义其他参数。今天，我们就来学习在开发中，我们要怎么定义一个vue实例才能满足我们的需要？
下面，我们先用的知识，先创建一个Vue实例：
<div id="app"></div>
<script>
let vm = new Vue({
//挂载元素
el:'#app',
//实例vm的数据
data:{}
});
</script>
很简单，轻松搞掂，接下来，就用这个实例来展开讲解。
我们就具体讲一下定义一个vue实例会用到的4个常用参数选项，不常用的选项，咱先不管它（后面有需要会补充）。因为学会这4个，就可以满足基本的开发需要了。
第一个要讲的是过滤器filters选项。为什么要有这个东西呢？举个例子，假设我们有一组数字，都是小数，如下：
let vm = new Vue({
//挂载元素
el:'#app',
//实例vm的数据
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>
利用上节讲到的双大括号{{ }}渲染出来，很简单。
（没难度）
突然，需求改了，我们不能把小数展示出来，需要把小数转换成整数再显示。
这个时候，我们需要把三个小数经过过滤处理后再展示，不能直接展示。这种情况就需要用到Vue的filters过滤器了。我们来看看怎么用：
let vm = new Vue({
//挂载元素
el:'#app',
//实例vm的数据
data:{
num1:33.141,
num2:46.212,
num3:78.541
},
//过滤器
filters:{
toInt(value){
return parseInt(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 )方法进行运算，并返回一个整数。
我们运行后得到结果：
（成功过滤成整数）
有时候，我们拿到一些数据，需要经过处理计算后得到的结果，才是我们要展示的内容。
比如：我们有三个数，但是需要展示的是三个数字之和。这种情况，就适合用我们的计算属性computed。
let vm = new Vue({
//挂载元素
el:'#app',
//实例vm的数据
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。
（显示三者之和）
需要注意的是，sum的值是依赖data中的数据num1，num2，num3的，一旦它们发生了变化，sum的值也会自动更新。
我们试一下，通过chrome控制台把num1的值从1变成2，再看看sum的结果会是多少？
（如我们所愿，总和从 10 变成了 11）
顾名思义，在methods中，我们可以定义一些方法，供组件使用。
比如，我们定义一个数据a，当用户点击按钮的时候，a的值加1。这种情况，我们可以利用methods来实现。
let vm = new Vue({
//挂载元素
el:'#app',
//实例vm的数据
data:{
a:0
},
//方法
methods:{
plus(){
return this.a++;
}
}
});
定义一个plus( )的方法在methods中，下面我们把plus( ) 绑定在按钮的点击事件上：
<div id="app">
{{ a }}
<button v-on:click="plus">加1</button>
</div>
在Vue中通过v-on:指令来绑定事件（指令后面章节会介绍），我们点击按钮，methods中的方法plus( )就会被调用,实现给a的值加1，并更新视图。
（点击多次，a的值实时更新）
watch选项是Vue提供的用于检测指定的数据发生改变的api。
上面点击按钮a的值加1的例子，不就是数据发生变化了吗？我们就用watch选项来监听数字a是否发生了变化，如果了监听到了变化，我们就在控制台输入以下a的最新值。
在上个例子的代码基础上，我们加上watch部分的代码：
let vm = new Vue({
//挂载元素
el:'#app',
//实例vm的数据
data:{
a:0
},
//方法
methods:{
plus(){
return this.a++;
}
},
//观察
watch:{
a(){
console.log(`有变化了，最新值：`);
console.log(this.a);
}
}
});
最后一部分watch就是我们新加的代码，a( ) 表示我们要观察监听的就是数据a，我们看运行结果：
（ gif图加载需要点时间 ）
看到了，我们点击按钮的时候，a的值加1发生了变化，而此时watch监听到了它的变化，便在控制台输出了我们指定的内容。
定义一个vue实例常用的4个选项：过滤器filters、计算属性computed、方法methods、观察watch。