vue中为何方法要写在methods的里面
作者:山竹回家了 发布时间:2024-05-10 14:19:24
标签: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>
来源:https://blog.csdn.net/weixin_47886687/article/details/109082902


猜你喜欢
- 本项目利用python以及opencv实现信用卡的数字识别前期准备导入工具包定义功能函数模板图像处理读取模板图像 cv2.imread(im
- Apache2 httpd.conf 中文版 # # 基于 NCSA 服务的配
- python字符串连接的方法,一般有以下三种:方法1:直接通过加号(+)操作符连接website = 'python' +
- pytorch中index_select()的用法index_select(input, dim, index)功能:在指定的维度dim上选
- 前言vim是个伟大的编辑器,不仅在于她特立独行的编辑方式,还在于她强大的扩展能力。然而,vim自身用于写插件的语言vimL功能有很大的局限性
- 写在前面贪吃蛇,吃豆人,迷宫,井字游戏......这些小游戏我相信大家小的时候肯定玩过,或许在某个时段还沉迷过.随着年龄的增长,这些小游戏离
- 本文实例讲述了Python操作json的方法。分享给大家供大家参考,具体如下:python中对json操作方法有两种,解码loads()和编
- 前言JavaScript 中的 Infinity 是一个可以应用于任何变量的数值,表示无穷大。下面就来看看 Infinity 是如何工作的,
- 首先来看一个例子,正常情况下我们定义并且实例一个类如下class Foo(object):def __init__(self):
- 首先我们解压$ unzip p8202632_10205_LINUX.zip解压后我们会发现多出了个文件夹,他是:Disk1,进入Disk1
- sae中安装有python环境,想让sae导入自己下载的django或者其他模块,可以在svn中新建一个文件目录,比如site-packag
- 这是一个系列文章,主要分享python的使用建议和技巧,每次分享3点,希望你能有所收获。1 如何去掉list中重复元素my_list = [
- Agent 服务启动后又停止本地计算机上的SQL Server Agent 服务启动后又停止了,一些服务自动停止,如果它们没有什么可做的例如
- 本文实例讲述了python避免死锁方法。分享给大家供大家参考。具体分析如下:当两个或者更多的线程在等待资源的时候就会产生死锁,两个线程相互等
- Python安装为什么默认安装到c盘?所有的软件如果你不对安装过程的路径进行设置的话都是默认安装到c盘的,不仅仅是Python。那安装到c盘
- Python用input输入列表的方法使用input输入数据时,使用逗号隔开列表的每一项,再使用ast.literal_eval()方法转成
- 首先先安装好我们的Python 这里就不多介绍了1.打开python.exe:点击File 下的小扳手图标 Settings…2.打开设置界
- 在SQL Server Management Studio 用WINDOWS连接的情况下改实列的“属性&rdqu
- 最近打算开始研究一下机器学习,今天在windows上装tensorflow花了点功夫,其实前面的步骤不难,只要依次装好python3.5,n
- 基于Vue的页面切换左右滑动效果,具体内容如下HTML文本页面:<template> <div id="app&