84669 人學習
152542 人學習
20005 人學習
5487 人學習
7821 人學習
359900 人學習
3350 人學習
180660 人學習
48569 人學習
18603 人學習
40936 人學習
1549 人學習
1183 人學習
32909 人學習
大家都知道，在以前jq時代，可以透過在標籤裡加onclick之類的屬性來加入事件處理函數。這樣的話瀏覽器中直接右鍵查看元素就可以知道綁了哪個方法，甚至可以看到這個方法在程式碼裡哪一行。 然而，在Vue出現後，想知道一個按鈕做了什麼就變成了一個頭疼的問題，在源碼裡寫的@click='method'會被vue處理並隱藏，這樣就不能直接看到按鈕的動作了，還要再去源碼裡找，十分低效。那麼問題來了，如何才能直接在瀏覽器中看到按鈕綁定了哪一個Vue方法以及在哪一行呢？
看來沒人知道呀，也沒人想過這個問題。算了，我還是自己寫個插件吧
你可以用 vue-devtools
右鍵網頁原始碼查看，直接在相關元素上找到綁定處理方法，然後在source面板的相關js中search，就可以定位到具體某一行。
查看 DOM 元素的事件：
直接點選第一個，開啟 Vue 文件，然後設定斷點，斷到斷點之後，就可以看 fn 綁定的是哪個方法了：
在 console 裡輸入 fn，敲回車，然後點選輸出的方法名稱：
自動跳到 Sources 中的方法：
https://chrome.google.com/web...
看來沒人知道呀，也沒人想過這個問題。算了，我還是自己寫個插件吧
你可以用 vue-devtools
右鍵網頁原始碼查看，直接在相關元素上找到綁定處理方法，然後在source面板的相關js中search，就可以定位到具體某一行。
查看 DOM 元素的事件：
直接點選第一個，開啟 Vue 文件，然後設定斷點，斷到斷點之後，就可以看 fn 綁定的是哪個方法了：
在 console 裡輸入 fn，敲回車，然後點選輸出的方法名稱：
自動跳到 Sources 中的方法：
https://chrome.google.com/web...