复习：
如何创建一个实例：
第一步：new Vue();
第二步：设置数据data;
第三步：挂载元素el;
第四步：数据渲染;
<div id="app">
姓名：{{name}}
年龄：{{age}}
</div>
<script>
let vm = new Vue({
el:'#app',
data:{
name:"张三"，
age:21
}
})
</script>一、Vue实例中常用的四个参数选项
1.filters过滤器
例如：
<div id="app"></div>
<script>
let vm = new Vue({
el:'#app',
data:{
num1: 4.2，
num2: 21.32，
num3：11.4
}
})
</script>此时数据都是小数，那么要将小数改为整数后再显示，则需要过滤器：
<script>
let vm = new Vue({
el:'#app',
data:{
num1: 4.2，
num2: 21.32，
num3：11.4
},
filters:{
toInt:function(value){
return parseInt(value);
}
}
})
</script>此时多了一个filters属性，这个就是过滤器，filters里面定义了一个toInt()的方法，这个方法就是将value值改为整数后return出去。
那么过滤器怎么使用：
<div id="app">
数字1：{{num1 | toInt}}
数字2：{{num2 | toInt}}
数字3：{{num3 | toInt}}
</div>如上代码：通过管道符 | 把函数toInt放在变量的后面，num1 num2 num3会分别作为参数传入toInt函数中进行计算并返回结果。
2.computed 计算属性
在开发中，有些数据是要通过计算后才展示出来，这时，就适合用计算属性computed。
<script>
let vm = new Vue({
el:'#app',
data:{
num1: 4，
num2: 21，
num3：11
},
computed:{
sum(){
return this.num1+this.num2+this.num3;
}
}
})</script>computed和filters类似，但用法不同：
<div id="app">
求和：{{sum}}
</div>3.methods 方法
在实际开发中，我们定义的方法要放在methods中，定义的方法供组件使用。
<script>
let vm = new Vue({
el:'#app',
data:{
num: 4
},
methods:{
click(){
return this.num+1;
}
}
})</script>例如，用户想每点击一次num值加1，可以使用methods。
<div id="app">
数值：{{num}}
<button v-on:click="click">加1</button>
</div>(Vue中绑定事件用v-on),当点击加1后，methods中的click函数会被调用，并更新视图中的数据
4.watch 观察
watch选项是Vue提供的检测指定数据发生改变的api。
例如：观察3中的num的变化
<script>
let vm = new Vue({
el:'#app',
data:{
num: 4
},
methods:{
click(){
return this.num+1;
}
},
watch:{
a(){
console.log("数据变了，改变后的值为:");
console.log(this.a);
}
}
})
</script>
