Vue配置项之methods

methods

首先说明一下，本人是前端小学生级别的菜鸡，吐槽的话请口下留情，在评论区指出错误或者补充不足，我会很喜欢，互喷不会进步，相互指点才会。。。。谢谢大家啦

目录

• methods
  • 目录
  • 基本原理
  • 传递参数

📌Vue.js 中的 Methods（Objrct）属性是 Vue 实例的一个配置选项。只要数据更新就会调用

📌在Vue.js中，methods 是组件选项之一，它用于定义一组可复用的函数（方法），这些方法可以包含任意JavaScript逻辑，并且可以在模板、计算属性、生命周期钩子和其他方法内部调用，主要用于处理用户的交互操作和事件处理。Vue实例或组件实例中的 methods 属性是一个对象，其属性名是方法名，值是对应回调函数。没有进行数据代理。

📌 methods 将被混入到 Vue 实例中。Vue.js 中的方法内的 this 关键字指向当前Vue实例，因此可以通过 this 访问组件的 data、computed、methods 等属性和方法。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。注意，不应该使用箭头函数来定义 method 函数 (例如 plus: () => this.a++)。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.a 将是 undefined。

// 在Vue实例或组件中定义methods
var vm = new Vue({
   
   
  data: {
   
   
    message: 'Hello'
  },
  methods: {
   
   
    // 定义一个方法
    greet: function(name) {
   
   
      return this.message + ', ' + name;
    },
    // 另一个方法
    changeMessage: function(newMessage) {