ajax调用其他方法 methods_7、方法 和 事件

目标：

搞清楚调用 methods 中的方法时，什么时候传的是 "原生事件对象"。

---

demo：页面有一个数字和两个按钮 "加1" 和 "加10"，点哪个就让数字加上相应的数值。

<div id="app">
    点击次数：{{ count }}
    <button @click="add">加1</button>    // 1、两个按钮，分别为 加1 和 加10
    <button @click="add(10)">加10</button>
</div>

var app = new Vue({
  el: '#app',
  data: {
    count: 0
  },
  methods: {
    add(value) {    // 2、value 表示传进来的值
      var val = value ? value : 1  // 3、value 存在吗？如果存在，value 就是 value，如果不存在，value 就默认是 1
      this.count += val
    }
  }
})

上面代码中，"加10" 按钮是正常的，但是 "加1" 按钮却不正常。如下图：

先点 "加10" 按钮，数字加了 10；再点 "加1" 按钮，就出现上图中的效果。

那这是为什么呢？是因为 "加1" 按钮那里的 add 没传参数吗？如图：

可是不是说如果有 value 就用 value，没有 value 就默认是 1 吗？那我没传参数，就应该是加 1 啊？

再来看一遍页面渲染的那个图：

请注意图中的 [object MouseEvent] ，这表示当点击 "加1" 按钮时，传进来的其实是一个原生事件对象，而并不是没有传值。

那为什么会传一个事件对象进去呢？

那是因为 "加1" 的 add 没有加括号，注意 add 方法是写在 methods 中，而不是 computed 中。所以当调用 add 方法时，应该加上 ()，表示调用该方法。如：

上图中，"加1" 按钮的 add 方法加了圆括号。

此时，如果不给 add 方法传参数，那么默认才会使用 1 。如图：

上图中，先点 "加10" 按钮，正常；再点 "加1" 按钮，正常。

上面讨论的是，methods 中的函数定义了参数，但是调用的时候却没有传参数的情况。

那么猜想一下，如果 methods 中的函数不要求你传参数，调用的时候，是不是就可以不传参数呢？

恭喜你，猜对了。确实是可以不传参数，所以同学们见到没传参数的情况，要淡定~~

总结：

1. methods 中的方法，如果要求传入参数，那么调用的时候，最好传入相应的参数，否则可能会造成意想不到的后果；
2. methods 中的方法，如果不要求传入参数，那么调用的时候，可以不传参数，直接写函数名即可。

完~~