Vue实例的参数有el（指定挂载的DOM元素），data（实例的数据），还可以定义其他参数；
vue实例会用到的4个常用参数选项：
一、filters 过滤器
eg:假设我们有一组数字，都是小数;
let vm=new Vue({
//挂载元素
el:"#app",
//实例vm的数据
data:{
num1:33.245,
num2:56.256,
num3:98.236
}
});
num1，num2，num3都是Vue实例vm的小数，展示在视图上：
<div id="app">
数字1：{{num1}}<br>
数字2：{{num2}}<br>
数字3：{{num3}}
</div>
双大括号{{ }}渲染出来:
渲染成功
需求改了，不能把小数展示出来，需要把小数转换成整数再显示。需要用到Vue的filters过滤器；
new Vue({
//挂载元素
el:"#app",
//实例vm的数据
data:{
num1:33.245,
num2:56.256,
num3:98.236
},
//过滤器
filters:{
//toInt(value){
//return parseInt(value);
//}
toInt:function(value){
return parseInt(value);
}
}
})
释：参数对象除了el和data属性之外，还多了一个filters属性，它的值也是一个对象，里面定义了一个叫toInt( )的方法，传入了一个value的参数，函数的作用就是把传入的参数value，简单地转成一个整出并return回去。
定义完filters属性后,如何用？
释：通过管道符 | 把函数toInt 放在变量后面即可，num1，num2，num3会分别作为参数value传入toInt( value )方法进行运算，并返回一个整数。
<div id="app">
数字1：{{num1 | toInt}}<br>
数字2：{{num2 | toInt}}<br>
数字3：{{num3 | toInt}}<br>
</div>
此时，渲染出来的页面：
把小数换成整数渲染成功
二、computed 计算属性
拿到一些数据，需要经过处理计算后得到的结果，才是要展示的内容。
eg:有三个数，但是需要展示的是三个数字之和。这种情况，就适合用我们的计算属性computed。
new Vue({
//挂载元素
el:"#app",
//实例vm的数据
data:{
num1:1,
num2:3,
num3:10
},
//计算属性
computed:{
sum:function(){
return this.num1+this.num2+this.num3
}
}
})
计算属性computed的定义语法和过滤器filters类似，但是用法不一，如下：
<div id="app">
综合：{{sum}}
</div>
三、methods 方法
在methods中，我们可以定义一些方法，供组件使用；
eg:定义一个数据a，当用户点击加1按钮的时候，a的值加1。这种情况，我们可以利用methods来实现;
new Vue({
//挂载元素
el:"#app",
//实例vm的数据
data:{
a:0
},
//方法
methods:{
plus:function(){
return this.a++;
},
minues:function(){
return this.a-=2;
},
}
})
定义一个plus( )、minues()的方法在methods中，然后把plus( )、minues() 绑定在按钮的点击事件上：
div id="app">
<button v-on:click="minues">减2</button>
{{a}}
<button v-on:click="plus">加1</button>
</div>
点击加1按钮成功渲染
四、watch 观察
watch选项是Vue提供的用于检测指定的数据发生改变的api。
释：点击按钮a的值加1的例子，数据也发生了变化；用watch选项来监听数字a是否发生了变化，如果了监听到了变化，在控制台输入以下a的最新值。
new Vue({
//挂在元素
el:"#app",
//实例vm的数据
data:{
a:0
},
//方法
methods:{
plus:function(){
return this.a++;
}
},
//观察
watch:{
a:function(){
console.log('有变化了，最新值：');
console.log(this.a);
}
}
})
释：最后一部分watch就是新加的代码，a( ) 表示要观察监听的就是数据a，看运行结果：
监听过程
网友评论