依旧在App.vue中书写。

method

我们在HTML中用v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。然后在menthod中定义方法。
v-on：‘事件’ 可缩写为 @‘事件’

<template>
  <div id="app1" style="text-align: center">
    <p>{{message}}</p>
    <!-- `reverseMessage` 是在下面定义的方法名 -->
    <!-- `：click` 是监听的事件 -->
    <button v-on:click="reverseMessage">反转</button>
  </div>
</template>

<script>
export default {
  name: 'app1',
  data () {
    return {
      message: 'hello'
    }
  },
//在methods中定义方法，这里的方法会在v-on监听到时间时触发，当然也可以直接使用
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
}
</script>

有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法：

<button v-on:click="warn('Form cannot be submitted yet.', $event)">
  Submit
</button>
// ...
methods: {
  warn: function (message, event) {
    // 现在我们可以访问原生事件对象
    if (event) event.preventDefault()
    alert(message)
  }
}

computed

计算属性（computed）中绑定的也是方法。

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
// ...
computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }

那么这个时候我们就发现了，computed好像和methods没什么区别，因为methods也可以实现同样的效果。

<p>Reversed message: "{{ reversedMessage() }}"</p>
// ...
methods: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

那么两者间到底有什么区别呢？

1. computed的方法是自执行的，而methods的方法需要调用才执行；
2. computed是基于它们的依赖进行缓存的，只有在它的相关依赖发生改变时才会重新求值；
3. methods每次调用都要重新执行一次。

计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：

// ...
computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}
// ...

watch

watch里面定义的也是方法，当它监测的值发生变化就会执行，然后相应的改变其他的值。

    <input type="text" v-model="firstName"><!--被监测的值firstName-->
    <input type="text" v-model="lastName"><br>
    <input type="text" v-model="fullName">
//...
data () {
    return {
      message: 'hello',
      firstName: 'Bob',
      lastName: 'Justin',
      fullName: 'Bob Justin'
    }
  },
watch: {
    firstName (val, old) {
      this.fullName = val + ' ' + this.lastName
      console.log(old)
    },
    lastName: function (val, old) {
      this.fullName = this.firstName + ' ' + val
      console.log(old)
    }
  }

可以对watch中的方法传参，第一个表示当前值，第二个表示修改前的值。
那么computed和watch都是监测数据发生改变后执行，那么两者有什么区别呢?
computed书写更简单，watch更易懂。

computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }

三者区别：
1.watch只有setter属性，可以接受参数，但没有return；
2.computed默认只有getter属性，不接收参数，必须有return；
3.methods默认setter和getter都有。