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是當前的單文件的組件實例，并可以拿到組件定義的成員，可以進行相關業(yè)務操作。
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，是空值，代表無法取值，無法進行任何業(yè)務處理
總結：
1.不同調(diào)用模式this指向不一樣
2.methods、data等就類似家里的柜子，不用的柜子盛放不同的物品，就代表每個柜子的功能不一樣，但地位相同
data：變量methods：自定義變量computed：計算屬性watch：監(jiān)聽器directives:指令filters:過濾器
3.只有methods里面才可以拿到組件,才可以進行業(yè)務處理
Vue選項 Vue中methods選項
構造器里的methods選項在不同情況下有不一樣的調(diào)用方式，有下面三種情況：
1.在Vue構造器內(nèi)部調(diào)用方法—methods選項
點擊按鈕，實現(xiàn)數(shù)值相加的功能
<!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-在內(nèi)部構造器中調(diào)用方法</h1>
<div id="app">
<p>數(shù)字相加結果：{{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傳遞參數(shù)：
- 1.在methods聲明方法
- 2.調(diào)用方法時直接傳遞值
2.在自定義標簽的情況下，Vue構造器內(nèi)部調(diào)用方法—methods選項
自定義一個標簽，并在構造器內(nèi)部對其進行掛載，使用自定義標簽時，需要調(diào)用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-在內(nèi)部構造器中調(diào)用方法</h1>
<div id="app">
<p>數(shù)字相加結果：{{number}}</p>
<button @click="addNumber(2)">Add</button>
<p><btnn @click.native="addNumber(3)"></btnn></p>
</div>
<!--<button onclick="demo.addNumber(3)">在構造器外部調(diào)用方法</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修飾器來調(diào)用構造器里的addNumber方法
<p><btnn @click.native="addNumber(3)"></btnn></p>
3.在Vue構造器外部調(diào)用方法—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-在內(nèi)部構造器中調(diào)用方法</h1>
<div id="app">
<p>數(shù)字相加結果：{{number}}</p>
<button @click="addNumber(2)">Add</button>
<p><btnn @click.native="addNumber(3)"></btnn></p>
</div>
<button onclick="demo.addNumber(3)">在構造器外部調(diào)用方法</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>
附加：
在作用域外調(diào)用構造器里面的方法時，可以用對象.方法進行調(diào)用
<button onclick="demo.addNumber(3)">在構造器外部調(diào)用方法</button>
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家詳細介紹了vue組件實現(xiàn)移動端九宮格轉盤抽獎，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
@click指令用于監(jiān)聽元素的點擊事件,并在觸發(fā)時執(zhí)行相應的處理函數(shù),在Vue3中,事件處理就可以通過@click指令來實現(xiàn),下面我們就來看看如何在Vue3中處理點擊事件吧2023-08-08
這篇文章主要介紹了vue中使用WX-JSSDK的兩種方法,每種方法通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2020-01-01
vue動態(tài)綁定多個class以及帶上三元運算或其他條件
這篇文章主要介紹了vue動態(tài)綁定多個class以及帶上三元運算或其他條件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要為大家詳細介紹了vue實現(xiàn)單一篩選、刪除篩選條件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
vue-tree-chart樹形組件的實現(xiàn)(含鼠標右擊事件)
Vue-Tree-Chart,一個Vue.js2組件，本文就詳細的介紹一下vue-tree-chart樹形組件的實現(xiàn)(含鼠標右擊事件)，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
這篇文章主要介紹了vue 全局引用公共的組件以及公共的JS文件問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了Vue動畫之第三方類庫實現(xiàn)動畫方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
vue實現(xiàn)用戶長時間不操作自動退出登錄功能的實現(xiàn)代碼
這篇文章主要介紹了vue實現(xiàn)用戶長時間不操作自動退出登錄功能的實現(xiàn)代碼,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-07-07
這篇文章主要介紹了vue路由劃分模塊并自動引入方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10