[已解决]在Vue中定义app的methods时,用不同方式定义同一种函数得到的效果不同

先从一个实验讲起

我想怎么做

我想试一试Vue表单提交,将表单的数据显示在控制台上

我的做法

创建一个form,里面有一个input type=“text”,与formData.text双向绑定 我输入内容到其中,并提交,预计在控制台看到内容

<div id="app">
  <form @submit.prevent="submitForm">
    <input type="text" v-model="formData.text"><br>
    <input type="submit" value="submit">
  </form>
</div>

脚本 注意submitForm的定义方式

    new Vue({
	el: '#app',
	data:{
	    formData: {
		text: ''
	    }
	},
	
	methods: {
	    submitForm: ()=> {
		console.log(this.formData)
	    }
	}
    })

提交过后在控制台上

2020-04-01 10-55-00 的屏幕截图.png

submitForm换一种定义方式

	  submitForm(){
	      console.log(this.formData)
	  }

提交过后在控制台上


这是怎么回事,请教一下各位

2020年了,还有前端不知道JS箭头函数和普通函数的区别吗(笑)

https://es6.ruanyifeng.com/#docs/function#箭头函数

简单的说,箭头函数的this是lexical的,而function定义的函数(method() 是function定义的简写)的this是dynamic的

这个feature也太蛋疼了吧,都不能好好写个JSON

又试了一下,这样是可以的

	  submitForm: function() {
	      console.log(this.formData)
	  }

这是什么奇葩语言,都歧义了

人家Vue.js 官方教程说了:
官方指南假设你已了解关于 HTML、CSS 和 JavaScript 的中级知识。如果你刚开始学习前端开发,将框架作为你的第一步可能不是最好的主意——掌握好基础知识再来吧!之前有其它框架的使用经验会有帮助,但这不是必需的。
this的指向应该属于JavaScript的中级知识了~ ~

https://duckduckgo.com/?q=vue+methods+arrow+function&ia=web