依旧在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('')
}
}
那么两者间到底有什么区别呢？
- computed的方法是自执行的，而methods的方法需要调用才执行；
- computed是基于它们的依赖进行缓存的，只有在它的相关依赖发生改变时才会重新求值；
- 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都有。
