在开发中,我们经常需要用到函数, 通过将一些需要复用的逻辑封装在函数里,多次调用这个函数来达到逻辑代码复用的目的.
在vue中,函数被定义成为方法来使用,这些方法定义在methods属性中,然后就可以在vue 表达式中调用函数
1. 定义方法
vue 选项对象中有一个叫methods的属性.这个属性里面专门来存放一些函数,用来给别人调用
const vm = new Vue({ el: "#app", data: { status: 2 }, methods: { // 这里面是用来存放函数,这里面的函数会自动成为vue实例的方法 statusDoing(id){ var doing = ["睡觉","吃饭","学习Vue"]; return doing[id] } }})
2. 方法的调用
之前有起到过Mastache语法中可以使用JavaScript表达式,所以我们可以在Mastache语法中调用函数
<div id="app"> {
{ statusDoing(status) }}</div>
方法除了可以在Mastache 表达式中使用外,还可以在任何可以使用Javascript表达式中都可以使用,我们慢慢了解
3. 方法中的this指向
在方法中,this指向该方法所属的实例,可以使用this访问data中的属性或者其他方法
<div id="app"> {
{ statusDoing() }}</div><script> const vm = new Vue({ el: "#app", data: { status: 2 }, methods: { statusDoing(){ var doing = ["睡觉","吃饭","学习Vue"] // 通过this 获取到实例对象,来拿到data中的数据 return doing[this.status] } } })</script>
注意, 方法不能使用箭头函数,因为箭头函数的this不是Vue实例, 未来我们在方法中可能会大量使用到Vue实例对象中的属性. 比如获取数据,或者调用其他方法, 如果我们使用了箭头函数就会丢失this,只能通过Vue实例对象来获取
详细的部分我们会在事件中提及;
4. 关于方法响应式
使用方法对数据进行过滤
<div id="app"> <!-- 原数组 --> <h2>原数组</h2> {
{numbers}} <h2>使用方法过滤后的数组</h2> {
{ filterNum() }}</div><script> const vm = new Vue({ el: "#app", data: { numbers: [10,20,-12,15,-10,22] }, methods: { filterNum(){ // 过滤数组函数 return this.numbers.filter((number) => { return number >= 15 }) } } })</script>
这个时候改变numbers数据,
vm.numbers = [22,11,13,19,18,10,17]
就会发现, 方法过滤后的数据也发生了变化
所以我们前面讲data属性时提到的数据响应式变化,在方法里同样有效果, 数据变化触发了Vue响应系统, 进而触发函数重新执行.