methods

使用场景

在开发中,我们经常需要用到函数, 通过将一些需要复用的逻辑封装在函数里,多次调用这个函数来增强逻辑代码复用性，在vue中,函数被定义在methods选项里来使用,定义完后就可以在vue 表达式中调用函数。

函数

通过输入（如果有）返回输出（如果有）的一个过程。

 

Vue定义方法

复制Vue.createApp({  // vue的配置项
  // 初始化数据
  data() {
    return {
      info: 'hello world', // 初始化一个info的数据
    };
  },
  // 方法
  methods: {
      // 下面两种格式都能实现功能
      setInfo(){ // 推荐用缩写
        this.info = '我喜欢到千锋学习';
      },
      setInfo: function(){
        ...
      },
      //setInfo: () => {}, // 千万不要这样用哈，这样他的this就指向了window对象了
  },
});

调用方法

复制<button @click="setInfo"></button>
<button @click="setInfo()"></button>

注意两种调用方法的区别，什么时候用哪种根据实际情况而定
setInfo 默认参数是event
setInfo() 默认参数是传入的参数，如果带括号的时候需要用event，使用setInfo($event)
如果我们的方法有参数的情况，使用setInfo()，如果不关心参数的情况使用setInfo

有返回值的方法

复制<div>{{ getCount2() }}</div>

复制getCount2() {
  return this.count * 2;
},

扩展

name: function() {this.xx} 中的this指向所在的object本身，如果不再object内则指向window
name: ()=>{this.xx} 中的this指向的name所在域(函数)的this指针，如果没有函数则指向window
说人话：

• 普通函数在Object中使用

• 箭头函数在Function中使用

如果将object的函数赋值给其他变量，然后该变量再调用，就丢失了绑定的上下文，this指针就会指向window，但是不影响原来object的函数。将object的函数赋值给其他变量时，其实是创建了一个函数引用，这个引用在执行时，会重新创立不同的执行上下文，这时this指针指向了window。但是如果一个object的对象函数是箭头函数(已经绑定)，赋值给onClick时则不会创建引用，就不会重新创立不同的执行上下文，因此this指针不变。

复制const obj = {
  a: function() {
    console.log('=================a', this); // { a, a1 }
    return {
      c: function() {
        console.log('=================a c', this); // { c， c1 }
      },
      c1: () => {
        console.log('=================a c1', this); // { a, a1 }
      },
    };
  },
  a1: () => {
    console.log('=================a1', this); // window
    return {
      d: function() {
        console.log('=================a1 d', this); // { d， d1 }
      },
      d1: () => {
        console.log('=================a1 d1', this); // window
      },
    };
  },
}
const a = obj.a();
a.c();
a.c1();
const a1 = obj.a1();
a1.d();
a1.d1();
console.log('++++');
const d = obj.a; // 创建了一个函数引用
d(); // 调用时会创立不同的执行上下文，这时this指针指向了window
obj.a(); // 原来object的函数不受影响，还是指向obj { a, a1 }
console.log('++++');
const d = obj.a1; // 因为obj.a1是箭头函数，这里不会再创建了一个函数引用
d(); // 这里的this指针还是指向了window
obj.a(); // 这里的this指针也指向了window

上节课的例子

复制...
created() { //已创建 (常用)
  setTimeout(() => {this.info = '我入门了' }, 2000); // 它的所在域是created函数
  // setTimeout(function (){ this.info = '我入门了' }, 2000); // 千万不能用普通函数，因为它不指向任何一个Object，那么this指针指向Window
},
...

实例

1. 使不使用()的情况
2. 显示一个数的n倍