vue中为何方法要写在methods的里面

更新时间：2022年10月18日 10:11:21 作者：山竹回家了

这篇文章主要介绍了vue中为何方法要写在methods的里面，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

vue中为何方法要写在methods里面

1.methods是什么？

首先先来段代码，我们在template中设定一个按钮,在点击按钮的时候打印

.<template>
  <div>
    <button @click="buttry">测试</button>
  </div>
</template>
<script>
export default {
  methods: {
    buttry() {
      console.log(this);
    },
  },
};
</script>
<style>
</style>

打印出来的结果表明：这个this是当前的单文件的组件实例，并可以拿到组件定义的成员，可以进行相关业务操作。

2.如果把方法写在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>

得到的结果是null，是空值，代表无法取值，无法进行任何业务处理

总结：

1.不同调用模式this指向不一样

2.methods、data等就类似家里的柜子，不用的柜子盛放不同的物品，就代表每个柜子的功能不一样，但地位相同

data：变量
methods：自定义变量
computed：计算属性
watch：监听器
directives:指令
filters:过滤器

3.只有methods里面才可以拿到组件,才可以进行业务处理

Vue选项 Vue中methods选项

构造器里的methods选项在不同情况下有不一样的调用方式，有下面三种情况：

1.在Vue构造器内部调用方法—methods选项

点击按钮，实现数值相加的功能

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue中的methods选项</title>
		<script type="text/javascript" src="../assets/js/vue.js"></script>
	</head>
	<body>
		<h1>Vue-在内部构造器中调用方法</h1>
		<div id="app">
			<p>数字相加结果：{{number}}</p>
			<button @click="addNumber(2)">Add</button>
		</div>
		<script type="text/javascript">
			var butn={
				template:`<button>{{messages}}</button>`,
				data:function(){
					return{
						messages:'自定义标签ADD'
					}
				}
			}
			var demo =new Vue({
				el:'#app',
				data:{
					number:0
				},
				components:{
					"btnn":butn
				},
				methods:{
					addNumber:function(num){
						this.number=this.number+num
					}
				}
			})
		</script>
	</body>
</html>

运行结果：

附加：

methods传递参数：

1.在methods声明方法
2.调用方法时直接传递值

2.在自定义标签的情况下，Vue构造器内部调用方法—methods选项

自定义一个标签，并在构造器内部对其进行挂载，使用自定义标签时，需要调用native修饰器，它的作用是绑定构造器的原生事件。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue中的methods选项</title>
		<script type="text/javascript" src="../assets/js/vue.js"></script>
	</head>
	<body>
		<h1>Vue-在内部构造器中调用方法</h1>
		<div id="app">
			<p>数字相加结果：{{number}}</p>
			<button @click="addNumber(2)">Add</button>
			<p><btnn @click.native="addNumber(3)"></btnn></p>
		</div>
		<!--<button onclick="demo.addNumber(3)">在构造器外部调用方法</button>-->
		<script type="text/javascript">
			var butn={
				template:`<button>{{messages}}</button>`,
				data:function(){
					return{
						messages:'自定义标签ADD'
					}
				}
			}
			var demo =new Vue({
				el:'#app',
				data:{
					number:0
				},
				components:{
					"btnn":butn
				},
				methods:{
					addNumber:function(num){
						this.number=this.number+num
					}
				}
			})
		</script>
	</body>
</html>

运行结果：

声明对象：

           var butn={
				template:`<button>{{messages}}</button>`,
				data:function(){
					return{
						messages:'自定义标签ADD'
					}
				}
			}

在构造器里面声明：

components:{"btnn":butn },

用.native修饰器来调用构造器里的addNumber方法

<p><btnn @click.native="addNumber(3)"></btnn></p>

3.在Vue构造器外部调用方法—methods选项

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue中的methods选项</title>
		<script type="text/javascript" src="../assets/js/vue.js"></script>
	</head>
	<body>
		<h1>Vue-在内部构造器中调用方法</h1>
		<div id="app">
			<p>数字相加结果：{{number}}</p>
			<button @click="addNumber(2)">Add</button>
			<p><btnn @click.native="addNumber(3)"></btnn></p>
		</div>
		<button onclick="demo.addNumber(3)">在构造器外部调用方法</button>
		<script type="text/javascript">
			var butn={
				template:`<button>{{messages}}</button>`,
				data:function(){
					return{
						messages:'自定义标签ADD'
					}
				}
			}
			var demo =new Vue({
				el:'#app',
				data:{
					number:0
				},
				components:{
					"btnn":butn
				},
				methods:{
					addNumber:function(num){
						this.number=this.number+num
					}
				}
			})
		</script>
	</body>
</html>

附加：

在作用域外调用构造器里面的方法时，可以用对象.方法进行调用

<button onclick="demo.addNumber(3)">在构造器外部调用方法</button>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue2 element 弹出框拖拽会出现一层阴影问题解决方法
这篇文章主要介绍了vue2 element 弹出框拖拽会出现一层阴影问题解决方法,因增加 draggable 属性导致我弹窗表单清空文本框时,从右向左选中字体会出现拖拽阴影效果,本文给大家介绍vue2 element 弹出框拖拽会出现一层阴影问题解决方法,感兴趣的朋友一起看看吧
2024-01-01
深入探讨Vue计算属性与监听器的区别和用途
在Vue的开发中,计算属性（Computed Properties）和监听器（Watchers）是两种非常重要的概念,它们都用于响应式地处理数据变化,本文将带你深入了解计算属性和监听器的区别,以及在何时使用它们,感兴趣的朋友可以参考下
2023-09-09
vue 动态style 拼接宽度问题
这篇文章主要介绍了vue 动态style 拼接宽度问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
使用vscode格式化文档无效的解决办法(vue代码格式化文档无效)
这篇文章主要给大家介绍了关于使用vscode格式化文档无效的解决办法,也就是vue代码格式化文档无效,这是最近突然遇到的一个问题,这里给大家介绍一下解决的办法,需要的朋友可以参考下
2023-08-08
vue3编译报错ESLint:defineProps is not defined&nbs
这篇文章主要介绍了vue3编译报错ESLint:defineProps is not defined no-undef的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
Nuxt的路由动画效果案例
这篇文章主要介绍了Nuxt的路由动画效果案例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11
vue3实现多个表格同时滚动并固定表头
这篇文章主要给大家介绍了vue3中多个表格怎么同时滚动并且固定表头,文中通过代码示例给大家讲解的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
2024-02-02
vue-json-editor json编辑器的使用
本文主要介绍了vue-json-editor json编辑器的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-07-07
在vue中使用SockJS实现webSocket通信的过程
最近接到一个业务需求,需要做一个聊天信息的实时展示的界面,下面小编把实现过程记录下来，对vue中使用SockJS实现webSocket通信的相关知识感兴趣的朋友一起看看吧
2018-08-08
vue async await promise等待异步接口执行完毕再进行下步操作教程
在Vue中可以使用异步函数和await关键字来控制上一步执行完再执行下一步,这篇文章主要给大家介绍了关于vue async await promise等待异步接口执行完毕再进行下步操作的相关资料,需要的朋友可以参考下
2023-12-12