3分鐘迅速學(xué)會Vue中methods方法使用技巧
1.methods方法應(yīng)用場景:
在Vue中,我們需要調(diào)用某個方法時,我們需要先將這些方法定義在methods屬性中,然后才能在vue 表達式中調(diào)用該方法。
2.methods方法的使用方法
語法定義如下:
<script> //創(chuàng)建vue對象 new Vue({ el: "#app",//將id=app的div的管理權(quán)交給Vue methods:{//在此處聲明所有的方法 方法名1(){//點擊對應(yīng)按鈕后執(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沒有被定義)
總結(jié)
到此這篇關(guān)于3分鐘迅速學(xué)會Vue中methods方法使用技巧的文章就介紹到這了,更多相關(guān)Vue methods方法使用技巧內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue開發(fā)之watch監(jiān)聽數(shù)組、對象、變量操作分析
這篇文章主要介紹了Vue開發(fā)之watch監(jiān)聽數(shù)組、對象、變量操作,結(jié)合實例形式分析了vue.js使用Watch針對數(shù)組、對象、變量監(jiān)聽相關(guān)操作技巧,需要的朋友可以參考下2019-04-04vue element 多圖片組合預(yù)覽的實現(xiàn)
本文主要介紹了vue element多圖片預(yù)覽實現(xiàn)的相關(guān)資料,最近的項目中有圖片預(yù)覽的場景,本文就來介紹一下如何使用,感興趣的可以了解一下2023-08-08vue-cli打包后本地運行dist文件中的index.html操作
這篇文章主要介紹了vue-cli打包后本地運行dist文件中的index.html操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08