3分鐘迅速學(xué)會(huì)Vue中methods方法使用技巧
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沒有被定義)
總結(jié)
到此這篇關(guān)于3分鐘迅速學(xué)會(huì)Vue中methods方法使用技巧的文章就介紹到這了,更多相關(guān)Vue methods方法使用技巧內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
詳解vue 在移動(dòng)端體驗(yàn)上的優(yōu)化解決方案
這篇文章主要介紹了vue 在移動(dòng)端體驗(yàn)上的優(yōu)化解決方案,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05Vue開發(fā)之watch監(jiān)聽數(shù)組、對(duì)象、變量操作分析
這篇文章主要介紹了Vue開發(fā)之watch監(jiān)聽數(shù)組、對(duì)象、變量操作,結(jié)合實(shí)例形式分析了vue.js使用Watch針對(duì)數(shù)組、對(duì)象、變量監(jiān)聽相關(guān)操作技巧,需要的朋友可以參考下2019-04-04Vue中v-show添加表達(dá)式的問題(判斷是否顯示)
這篇文章主要介紹了關(guān)于Vue中v-show中添加表達(dá)式用于判斷是否顯示的問題,很多朋友經(jīng)常會(huì)遇到這樣的需求,有數(shù)據(jù)來源和標(biāo)簽類型兩行選項(xiàng),需要實(shí)現(xiàn)點(diǎn)擊上面的某個(gè)數(shù)據(jù)來源時(shí),標(biāo)簽類型自動(dòng)切換功能,感興趣的朋友一起看看吧2018-03-03vue element 多圖片組合預(yù)覽的實(shí)現(xiàn)
本文主要介紹了vue element多圖片預(yù)覽實(shí)現(xiàn)的相關(guān)資料,最近的項(xiàng)目中有圖片預(yù)覽的場(chǎng)景,本文就來介紹一下如何使用,感興趣的可以了解一下2023-08-08vue-cli打包后本地運(yùn)行dist文件中的index.html操作
這篇文章主要介紹了vue-cli打包后本地運(yùn)行dist文件中的index.html操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08