vue中为何方法要写在methods的里面
作者：山竹回家了 时间：2024-05-10 14:19:24
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>
来源：https://blog.csdn.net/weixin_47886687/article/details/109082902
标签：vue,方法,methods
0
投稿猜你喜欢
随Linux开机自动启动mysql
2009-12-29 10:14:00
Python importlib模块重载使用方法详解
2021-02-28 18:12:21
将Dataframe数据转化为ndarry数据的方法
2021-03-23 20:44:33
Python开发常用五种循环方式的场景性能比较
2021-11-19 13:24:00
javascript实现页面的实时时钟显示示例
2024-04-10 10:49:07
opencv 图像加法与图像融合的实现代码
2021-07-20 14:57:30
YUI 学习笔记：Event
2009-02-21 11:15:00
基于JS脚本语言的基础语法详解
2024-06-05 10:01:53
编写Python脚本来实现最简单的FTP下载的教程
2022-11-12 01:25:45
Python 基于xml.etree.ElementTree实现XML对比示例详解
2022-02-24 12:25:53
asp查询xml的代码实现无刷新 模糊查询
2008-04-30 15:39:00
python3实现ftp服务功能（客户端）
2023-05-28 00:36:31
Typora 1.4.8激活 2022最新Typora破解激活使用教程
2022-02-13 18:14:59
解决vue热替换失效的根本原因
2024-04-30 10:25:57
asp精妙的SQL语句例子
2008-03-04 17:42:00
SQL Server 2008 数据库镜像部署实例之一 数据库准备
2024-01-23 14:21:48
python3.4中清屏的处理方法
2023-11-14 04:09:21
JavaScript+canvas实现七色板效果实例
2023-08-09 09:48:10
python连接数据库后通过占位符添加数据
2024-01-15 06:29:34
Python内置的HTTP协议服务器SimpleHTTPServer使用指南
2021-11-22 08:11:12