第四节：定义一个vue实例的4个常用选项

By xyp-hf

Update date:

上一节，我们讲过如何创建一个Vue实例，仅需4步走：

我们知道，定义一个Vue实例的参数有el（指定挂载的DOM元素），data（实例的数据），上一节讲过除了这两个之外，还可以定义其他参数。今天，我们就来学习在开发中，我们要怎么定义一个vue实例才能满足我们的需要？

下面，我们先用上一节的知识，先创建一个Vue实例：

1
2
3
4
5
6
7
8
9
10

<div id="app"></div>
<script>
  let vm = new Vue({
      //挂载元素
   el:'#app',
      //实例vm的数据
   data:{}
  });
</script>

很简单，轻松搞掂，接下来，就用这个实例来展开讲解。

我们就具体讲一下定义一个vue实例会用到的4个常用参数选项，不常用的选项，咱先不管它（后面有需要会补充）。因为学会这4个，就可以满足基本的开发需要了。

filters 过滤器

第一个要讲的是过滤器filters选项。为什么要有这个东西呢？举个例子，假设我们有一组数字，都是小数，如下：

1
2
3
4
5
6
7
8
9
10
11
12

let vm = new Vue({
   //挂载元素
 el:'#app',

   //实例vm的数据
 data:{
        num1:33.141,
        num2:46.212,
        num3:78.541
   }
});

num1，num2，num3都是Vue实例vm的小数，我们把它展示在视图上：

1
2
3
4
5
6

<div id="app">
  数字1：{{ num1 }}<br>
  数字2：{{ num2 }}<br>
  数字3：{{ num3 }}
</div>

利用上节讲到的双大括号{{ }}渲染出来，很简单。

突然，需求改了，我们不能把小数展示出来，需要把小数转换成整数再显示。

这个时候，我们需要把三个小数经过过滤处理后再展示，不能直接展示。这种情况就需要用到Vue的filters过滤器了。我们来看看怎么用：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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( )函数的写法你看起来觉得陌生的话，这样写你会不会觉得熟悉很多：

1
2
3
4
5
6
7

//过滤器
filters:{
   toInt:function(value){
       return parseInt(value);
   }
}

这是ES5的语法，我们后面的教程都会用ES6的最新写法，如果你还不了解，建议先学习我们之前推出的《ES6系列原创教程》的知识：传送门。

我们回到过滤器filters，接着讲：定义完filters属性后，我们怎么用呢？

1
2
3
4
5
6

<div id="app">
  数字1：{{ num1 | toInt}}<br>
  数字2：{{ num2 | toInt}}<br>
  数字3：{{ num3 | toInt}}
</div>

也很简单，如上面代码所示，通过管道符 | 把函数toInt 放在变量后面即可，num1，num2，num3会分别作为参数value传入toInt( value )方法进行运算，并返回一个整数。

我们运行后得到结果：

computed 计算属性

有时候，我们拿到一些数据，需要经过处理计算后得到的结果，才是我们要展示的内容。

比如：我们有三个数，但是需要展示的是三个数字之和。这种情况，就适合用我们的计算属性computed。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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类似，但是用法不一，如下：

1
2
3
4

<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 方法

顾名思义，在methods中，我们可以定义一些方法，供组件使用。

比如，我们定义一个数据a，当用户点击按钮的时候，a的值加1。这种情况，我们可以利用methods来实现。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

let vm = new Vue({
    //挂载元素
  el:'#app',
    //实例vm的数据
  data:{
         a:0
    },
    //方法
  methods:{
        plus(){
            return this.a++;
        }
    }
 });

定义一个plus( )的方法在methods中，下面我们把plus( ) 绑定在按钮的点击事件上：

1
2
3
4
5

<div id="app">
  {{ a }}
  <button v-on:click="plus">加1</button>
</div>

在Vue中通过v-on:指令来绑定事件（指令后面章节会介绍），我们点击按钮，methods中的方法plus( )就会被调用,实现给a的值加1，并更新视图。

（点击多次，a的值实时更新）

watch 观察

watch选项是Vue提供的用于检测指定的数据发生改变的api。

上面点击按钮a的值加1的例子，不就是数据发生变化了吗？我们就用watch选项来监听数字a是否发生了变化，如果了监听到了变化，我们就在控制台输入以下a的最新值。

在上个例子的代码基础上，我们加上watch部分的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

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。

Vue.js