第四节: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语法中调用函数

<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响应系统, 进而触发函数重新执行.