3分鐘迅速學(xué)會(huì)Vue中methods方法使用技巧

更新時(shí)間：2023年02月08日 14:14:14 作者：吳皮皮今天吃飽了嗎

最近在學(xué)習(xí)Vue,感覺methods還是有必有總結(jié)一下的,下面這篇文章主要給大家介紹了關(guān)于3分鐘迅速學(xué)會(huì)Vue中methods方法使用技巧的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

1.methods方法應(yīng)用場(chǎng)景：

在Vue中，我們需要調(diào)用某個(gè)方法時(shí),我們需要先將這些方法定義在methods屬性中,然后才能在vue 表達(dá)式中調(diào)用該方法。

2.methods方法的使用方法

語法定義如下:

<script>
    //創(chuàng)建vue對(duì)象
    new Vue({
       el: "#app",//將id=app的div的管理權(quán)交給Vue
       
       methods:{//在此處聲明所有的方法
           方法名1(){//點(diǎn)擊對(duì)應(yīng)按鈕后執(zhí)行
              
           },
 
           方法名2() {
              
           }
       }
    });
</script>

下面我們舉一個(gè)小例子.

我們?cè)谡{(diào)用doAdd方法時(shí)需要先在methods中定義該方法.

然后我們可以在按鈕中使用@click="doAdd"來調(diào)用方法

  <div class="row">
     <div class="col-md-4 col-md-offset-4" style="margin-top: 20px;text-align: center;">
      //該處調(diào)用了doAdd方法
     <button class="btn btn-primary" style="margin-right: 8px;"@click="doAdd">添加</button>
     <button class="btn btn-default">重置</button>
     </div>
</div>

 methods : {
         //這里面定義了一個(gè)doAdd的方法.
         doAdd(){
               var url = "user_adduser_name="+this.userName+"&nick_name="+this.nickName+"&sex="+this.sex
                    +"&phone="+this.phone+"&birth="+this.birth;
               console.log(url);
               //通過axios發(fā)送請(qǐng)求
                axios.get(url).then(response =>{
                    console.log(response.data);
                    if (response.data == 'true'||response.data == true) {
                        window.location.href = 'user_list.html';
                    }else {
                        alert("添加用戶失敗!");
                    }
                });
            }
        }

3.要點(diǎn)注意：

在方法中,this默認(rèn)指向該方法所屬的實(shí)例,可以使用this訪問data中的屬性或者其他方法

但是!!!!!

千萬注意, 方法不能使用箭頭函數(shù),因?yàn)榧^函數(shù)的this不是Vue實(shí)例, (例如 do: () =>this.a)

理由:箭頭函數(shù)綁定了父級(jí)作用域的上下文，這種情況下this 將不會(huì)默認(rèn)指向 Vue 實(shí)例，this.a 運(yùn)行時(shí)將會(huì)報(bào)錯(cuò),報(bào)錯(cuò)理由為a undefined(a沒有被定義)