定义一个实例的个常用选项

上一节，我们讲过如何创建一个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选项。为什么要有这个东西呢？举个例子，假设我们有一组数字，都是小数，如下：

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

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

 （没难度）

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

 

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

 

 

相信大家都注意到了，参数对象除了el和data属性之外，还多了一个filters属性，它的值也是一个对象，里面定义了一个叫toInt( )的方法，传入了一个value的参数，函数的作用就是把传入的参数value，简单地转成一个整出并return回去。

 

如果toInt( )函数的写法你看起来觉得陌生的话，这样写你会不会觉得熟悉很多：

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

 

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

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

 

我们运行后得到结果：

 （成功过滤成整数）

 

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

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

 

计算属性computed的定义语法和过滤器filters类似，但是用法不一，如下：

<div id="app">
   总和：{{ sum }}
</div>

计算属性computed用法更简洁，仅需{{ sum }}就能读取到它的计算结果：1+3+6结果应该为10。

（显示三者之和）

需要注意的是，sum的值是依赖data中的数据num1，num2，num3的，一旦它们发生了变化，sum的值也会自动更新。

 

我们试一下，通过chrome控制台把num1的值从1变成2，再看看sum的结果会是多少？

methods  方法

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

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

 

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

 

 

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

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

 

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

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

 

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

最后一部分watch就是我们新加的代码，a( ) 表示我们要观察监听的就是数据a，我们看运行结果：

（ gif图加载需要点时间 ）

 

看到了，我们点击按钮的时候，a的值加1发生了变化，而此时watch监听到了它的变化，便在控制台输出了我们指定的内容。

 定义一个vue实例常用的4个选项：过滤器filters、计算属性computed、方法methods、观察watch。