Vue选项: Methods方法

在开发中,我们经常需要用到函数, 通过将一些需要复用的逻辑封装在函数里,多次调用这个函数来达到逻辑代码复用的目的.

在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语法中调用函数

    {{ statusDoing(status) }}

方法除了可以在Mastache 表达式中使用外,还可以在任何可以使用Javascript表达式中都可以使用,我们慢慢了解

3. 方法中的this指向

在方法中,this指向该方法所属的实例,可以使用this访问data中的属性或者其他方法

    {{ statusDoing() }}

注意, 方法不能使用箭头函数,因为箭头函数的this不是Vue实例, 未来我们在方法中可能会大量使用到Vue实例对象中的属性. 比如获取数据,或者调用其他方法, 如果我们使用了箭头函数就会丢失this,只能通过Vue实例对象来获取

详细的部分我们会在事件中提及;

4. 关于方法响应式

使用方法对数据进行过滤

        
原数组
    {{numbers}}    
使用方法过滤后的数组
    {{ filterNum() }}

这个时候改变numbers数据,

vm.numbers = [22,11,13,19,18,10,17]

就会发现, 方法过滤后的数据也发生了变化

所以我们前面讲data属性时提到的数据响应式变化,在方法里同样有效果, 数据变化触发了Vue响应系统, 进而触发函数重新执行.