運行結果
結果如圖4-12所示。這是原來的頁麵，我們給“登錄”按鈕外麵的td設置了一個單擊事件，同時也給按鈕添加了一個單擊事件，這一次就用簡寫形式實現吧。
可以看到，外層的td有一個單擊事件modelclick，td裡麵的input提交按鈕也有一個單擊事件btnclick，接下來編寫這兩個單擊事件，為了簡單起見，單純地用console.log輸出一句話即可。
保存代碼，刷新頁麵，按f12鍵打開調試窗口。當單擊“登錄”按鈕時，就可以看到如下效果。
效果如圖4-13所示。這就是事件冒泡。顯然，我們的本意隻是觸發“登錄”按鈕的單擊事件罷了，根本不想觸發外麵的td的單擊事件。事件冒泡的結果是我們不希望看到的，因此，我們要去消除事件冒泡。這個時候，就需要用到事件修飾符中的.stop了。
圖4-13 運行效果
.stop是一種vue事件修飾符，它的作用是阻止事件冒泡。在上麵的例子中，隻需要給按鈕的@click後麵加上.stop，代表停止冒泡，就不會再觸發父元素的@click了。讓我們試驗一下。
效果是隻會打印btnclick，不會打印modelclick。
事件修飾符.prevent的作用是阻止提交。我們知道，form表單組件和a鏈接組件都會導致頁麵刷新和跳轉。如果不希望頁麵刷新，則可以加上.prevent以阻止這種默認的刷新操作。注意：.prevent隻對form和a標簽有效。
事件修飾符.capture的作用是優先觸發，比如在上麵的例子中，如果不阻止冒泡，而在外層td元素上添加這個修飾符，則會優先觸發modelclick，然後觸發按鈕自已的單擊事件，這就是一個優先級的調整，代碼如下。
事件修飾符.self的作用是：當僅單擊元素本身時，隻允許元素自已觸發，子元素無法觸發。還是剛才的例子，在外層td元素上添加這個修飾符，當單擊外層td的部分（不單擊按鈕部分）時，就會隻觸發modelclick，不會觸發按鈕自已的單擊事件，代碼如下。
簡單了解這個修飾符即可，因為這種行為本來就是默認的。“登錄”按鈕被嵌套在td中，單擊td中非按鈕的部分隻會觸發td自已的單擊事件。
事件修飾符.once表示隻觸發一次，還是剛才的例子，如果給td的單擊事件加上.once修飾符，那麼modelclick就隻會觸發一次。
ᴏᴏᴘ.ᴛᴡ 呈現最新的小說章節
多次單擊“登錄”按鈕的效果如圖4-14所示。
圖4-14 運行效果
4.6 vue第三式——條件語句
任何業務場景基本都離不開條件語句。vue提供的條件語句中用得最多的就是以下幾個。
v- if
v- else
v- else- if
繼續以之前的登錄頁麵為例，當單擊“登錄”按鈕的時候，如果後台返回數據的速度比較慢，那麼就顯示“登錄中…”，這樣可以有效防止用戶多次單擊“登錄”按鈕。如果用戶這麼做，就會給程序後台服務增加不少的壓力。因此，如果在用戶第一次單擊“登錄”按鈕的時候就立刻把按鈕換掉，便能有效地遏製這種情況的發生了。
具體來說，我們希望達到的效果就是，當第一次單擊“登錄”按鈕的時候，“登錄”按鈕上麵的“登錄”二字變成“登錄中…”的字樣。當後台成功返回數據或者超時後，就在頁麵上顯示相應的信息，同時讓“登錄”按鈕再變回原樣。
。fi-v個一加鈕按”錄登“給們我讓，先首
"=kcilc@ '錄登' =eulav timbus =epyt "gninigoLsi！"=fi -v tupni<
>"kcilcntb
。啦示顯地順言正名以可就鈕按”錄登“來一樣這，eurt是就值的gninigoLsi！，eslaf是就值的gninigoLsi，中”錄登“是不態狀前當為認，候時的鈕按”錄登“擊單未還戶用，解理好很這。eslaf值認默個一出給們我，麵裡atad在寫要需gninigoLsi。鈕按”錄登“示顯才，候時的假為值的量變據數個這gninigoLsi當有隻，是就思意
。下如碼代，”中錄登“為態狀的麵頁前當表代，eurt為變值的gninigoLsi將麵裡法方個這在要需，法方kcilcntb發觸會就，時鈕按”錄登“擊單當，後然
。下如碼代，可即反相全完鈕按”錄登“與件條的現出，鈕按個一加添新重再妨不，麼那。”…中錄登“成變鈕按”錄登“讓後之擊單在是的望希們我，果效的到看望希們我是不個這。了見不失消鈕按”錄登“現發以可，鈕按”錄登“擊單在現
。試一試鈕按”錄登“下一擊單，麵頁下一新刷以可，在現。反相好正輯邏的麵上與示表就esle-v以所，fi-v有碼代行一上為因。綴後要需不，esle-v為性屬，麵下鈕按”錄登“在跟緊鈕按”中錄登“
果結行運 51-4圖
。下如碼代，可即下一擬模數函時延用麵下。功成錄登否是麵頁端前訴告，應響個一回返會就，兒會一過台後。了求請錄登起發台後向術技等xaja用采會就端前，候時個這般一，作工項一下成完要，來下接。鈕按”中錄登“個一了現出，示所51-4圖如果結
。果效下一看，麵頁新刷
就根壓tuoemittes是還，題問了出數函調回是底到。態狀個這在留保直一麵頁，現發果結，示所61-4圖如果結
