vue中為何方法要寫(xiě)在methods的里面
更新時(shí)間：2022年10月18日 10:11:21 作者：山竹回家了
這篇文章主要介紹了vue中為何方法要寫(xiě)在methods的里面，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
vue中為何方法要寫(xiě)在methods里面
1.methods是什么？
首先先來(lái)段代碼，我們?cè)趖emplate中設(shè)定一個(gè)按鈕,在點(diǎn)擊按鈕的時(shí)候打印
.<template>
<div>
<button @click="buttry">測(cè)試</button>
</div>
</template>
<script>
export default {
methods: {
buttry() {
console.log(this);
},
},
};
</script>
<style>
</style>
打印出來(lái)的結(jié)果表明：這個(gè)this是當(dāng)前的單文件的組件實(shí)例，并可以拿到組件定義的成員，可以進(jìn)行相關(guān)業(yè)務(wù)操作。
2.如果把方法寫(xiě)在data中會(huì)怎么樣？
.<template>
<div>
<button @click="buttry">測(cè)試</button>
</div>
</template>
<script>
export default {
data() {
return {
buttry() {
console.log(this);
},
};
},
// methods: {
// buttry() {
// console.log(this);
// },
// },
};
</script>
<style>
</style>
得到的結(jié)果是null，是空值，代表無(wú)法取值，無(wú)法進(jìn)行任何業(yè)務(wù)處理
總結(jié)：
1.不同調(diào)用模式this指向不一樣
2.methods、data等就類似家里的柜子，不用的柜子盛放不同的物品，就代表每個(gè)柜子的功能不一樣，但地位相同
data：變量methods：自定義變量computed：計(jì)算屬性watch：監(jiān)聽(tīng)器directives:指令filters:過(guò)濾器
3.只有methods里面才可以拿到組件,才可以進(jìn)行業(yè)務(wù)處理
Vue選項(xiàng) Vue中methods選項(xiàng)
構(gòu)造器里的methods選項(xiàng)在不同情況下有不一樣的調(diào)用方式，有下面三種情況：
1.在Vue構(gòu)造器內(nèi)部調(diào)用方法—methods選項(xiàng)
點(diǎn)擊按鈕，實(shí)現(xiàn)數(shù)值相加的功能
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue中的methods選項(xiàng)</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>Vue-在內(nèi)部構(gòu)造器中調(diào)用方法</h1>
<div id="app">
<p>數(shù)字相加結(jié)果：{{number}}</p>
<button @click="addNumber(2)">Add</button>
</div>
<script type="text/javascript">
var butn={
template:`<button>{{messages}}</button>`,
data:function(){
return{
messages:'自定義標(biāo)簽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>
運(yùn)行結(jié)果：
附加：
methods傳遞參數(shù)：
- 1.在methods聲明方法
- 2.調(diào)用方法時(shí)直接傳遞值
2.在自定義標(biāo)簽的情況下，Vue構(gòu)造器內(nèi)部調(diào)用方法—methods選項(xiàng)
自定義一個(gè)標(biāo)簽，并在構(gòu)造器內(nèi)部對(duì)其進(jìn)行掛載，使用自定義標(biāo)簽時(shí)，需要調(diào)用native修飾器，它的作用是綁定構(gòu)造器的原生事件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue中的methods選項(xiàng)</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>Vue-在內(nèi)部構(gòu)造器中調(diào)用方法</h1>
<div id="app">
<p>數(shù)字相加結(jié)果：{{number}}</p>
<button @click="addNumber(2)">Add</button>
<p><btnn @click.native="addNumber(3)"></btnn></p>
</div>
<!--<button onclick="demo.addNumber(3)">在構(gòu)造器外部調(diào)用方法</button>-->
<script type="text/javascript">
var butn={
template:`<button>{{messages}}</button>`,
data:function(){
return{
messages:'自定義標(biāo)簽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>
運(yùn)行結(jié)果：
聲明對(duì)象：
var butn={
template:`<button>{{messages}}</button>`,
data:function(){
return{
messages:'自定義標(biāo)簽ADD'
}
}
}
在構(gòu)造器里面聲明：
components:{"btnn":butn },用.native修飾器來(lái)調(diào)用構(gòu)造器里的addNumber方法
<p><btnn @click.native="addNumber(3)"></btnn></p>
3.在Vue構(gòu)造器外部調(diào)用方法—methods選項(xiàng)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue中的methods選項(xiàng)</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>Vue-在內(nèi)部構(gòu)造器中調(diào)用方法</h1>
<div id="app">
<p>數(shù)字相加結(jié)果：{{number}}</p>
<button @click="addNumber(2)">Add</button>
<p><btnn @click.native="addNumber(3)"></btnn></p>
</div>
<button onclick="demo.addNumber(3)">在構(gòu)造器外部調(diào)用方法</button>
<script type="text/javascript">
var butn={
template:`<button>{{messages}}</button>`,
data:function(){
return{
messages:'自定義標(biāo)簽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>
附加：
在作用域外調(diào)用構(gòu)造器里面的方法時(shí)，可以用對(duì)象.方法進(jìn)行調(diào)用
<button onclick="demo.addNumber(3)">在構(gòu)造器外部調(diào)用方法</button>
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue2 element 彈出框拖拽會(huì)出現(xiàn)一層陰影問(wèn)題解決方法
這篇文章主要介紹了vue2 element 彈出框拖拽會(huì)出現(xiàn)一層陰影問(wèn)題解決方法,因增加 draggable 屬性導(dǎo)致我彈窗表單清空文本框時(shí),從右向左選中字體會(huì)出現(xiàn)拖拽陰影效果,本文給大家介紹vue2 element 彈出框拖拽會(huì)出現(xiàn)一層陰影問(wèn)題解決方法,感興趣的朋友一起看看吧2024-01-01
深入探討Vue計(jì)算屬性與監(jiān)聽(tīng)器的區(qū)別和用途
在Vue的開(kāi)發(fā)中,計(jì)算屬性（Computed Properties）和監(jiān)聽(tīng)器（Watchers）是兩種非常重要的概念,它們都用于響應(yīng)式地處理數(shù)據(jù)變化,本文將帶你深入了解計(jì)算屬性和監(jiān)聽(tīng)器的區(qū)別,以及在何時(shí)使用它們,感興趣的朋友可以參考下2023-09-09
vue?動(dòng)態(tài)style?拼接寬度問(wèn)題
這篇文章主要介紹了vue?動(dòng)態(tài)style?拼接寬度問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
使用vscode格式化文檔無(wú)效的解決辦法(vue代碼格式化文檔無(wú)效)
這篇文章主要給大家介紹了關(guān)于使用vscode格式化文檔無(wú)效的解決辦法,也就是vue代碼格式化文檔無(wú)效,這是最近突然遇到的一個(gè)問(wèn)題,這里給大家介紹一下解決的辦法,需要的朋友可以參考下2023-08-08
vue3編譯報(bào)錯(cuò)ESLint:defineProps is not defined&nbs
這篇文章主要介紹了vue3編譯報(bào)錯(cuò)ESLint:defineProps is not defined no-undef的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了Nuxt的路由動(dòng)畫(huà)效果案例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
vue3實(shí)現(xiàn)多個(gè)表格同時(shí)滾動(dòng)并固定表頭
這篇文章主要給大家介紹了vue3中多個(gè)表格怎么同時(shí)滾動(dòng)并且固定表頭,文中通過(guò)代碼示例給大家講解的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-02-02
本文主要介紹了vue-json-editor json編輯器的使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
在vue中使用SockJS實(shí)現(xiàn)webSocket通信的過(guò)程
最近接到一個(gè)業(yè)務(wù)需求,需要做一個(gè)聊天信息的實(shí)時(shí)展示的界面,下面小編把實(shí)現(xiàn)過(guò)程記錄下來(lái)，對(duì)vue中使用SockJS實(shí)現(xiàn)webSocket通信的相關(guān)知識(shí)感興趣的朋友一起看看吧2018-08-08
vue?async?await?promise等待異步接口執(zhí)行完畢再進(jìn)行下步操作教程
在Vue中可以使用異步函數(shù)和await關(guān)鍵字來(lái)控制上一步執(zhí)行完再執(zhí)行下一步,這篇文章主要給大家介紹了關(guān)于vue?async?await?promise等待異步接口執(zhí)行完畢再進(jìn)行下步操作的相關(guān)資料,需要的朋友可以參考下2023-12-12