三、vue实例的4个常用选项

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，看运行结果：

监听过程