3分鐘迅速學會Vue中methods方法使用技巧

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

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

1.methods方法應用場景：

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

2.methods方法的使用方法

語法定義如下:

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

下面我們舉一個小例子.

我們在調(diào)用doAdd方法時需要先在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 : {
         //這里面定義了一個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ā)送請求
                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.要點注意：

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

但是!!!!!

千萬注意, 方法不能使用箭頭函數(shù),因為箭頭函數(shù)的this不是Vue實例, (例如 do: () =>this.a)

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