vue中为什么方法要写在methods里面?

vue中为什么方法要写在methods里面?

山竹回家了

于 2020-10-14 21:01:51 发布

3529
收藏 6
分类专栏： 前端 vue 文章标签： javascript vue
版权

前端
同时被 2 个专栏收录
120 篇文章3 订阅
订阅专栏

vue
74 篇文章1 订阅
订阅专栏
一、methods是什么？
首先先来段代码,我们在template中设定一个按钮,在点击按钮的时候打印

.<template>
<div>
<button @click="buttry">测试</button>
</div>
</template>

<script>
export default {
methods: {
buttry() {
console.log(this);
},
},
};
</script>
<style>
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
打印出来的结果表明:这个this是当前的单文件的组件实例,并可以拿到组件定义的成员,可以进行相关业务操作.

 

二、如果把方法写在data中会怎么样？
.<template>
<div>
<button @click="buttry">测试</button>
</div>
</template>

<script>
export default {
data() {
return {
buttry() {
console.log(this);
},
};
},
// methods: {
// buttry() {
// console.log(this);
// },
// },
};
</script>
<style>
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
得到的结果是null,是空值,代表无法取值,无法进行任何业务处理

 

总结:
1.不同调用模式this指向不一样
2.methods、data等就类似家里的柜子，不用的柜子盛放不同的物品，就代表每个柜子的功能不一样，但地位相同。
data：变量
methods：自定义变量
computed：计算属性
watch：监听器
directives:指令
filters:过滤器
3.只有methods里面才可以拿到组件,才可以进行业务处理
————————————————
版权声明：本文为CSDN博主「山竹回家了」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_47886687/article/details/109082902