【进阶篇】Vue Devtools——vue开发调试神器
工欲善其事，必先利其器，vue2.0進階系列的知識更接近我們的實際開發所需，在開發過程中，有個好的調試工具是事半功倍的，Vue Devtools就是我們選擇的調試工具，它是一款chrome瀏覽器的插件。所以，我們先去chrome商店找到它并安裝。?
安裝
用chrome瀏覽器訪問以下地址，就可以在chrome商店找到我們的Vue Devtools插件。
地址：
https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd
?
訪問后我們會看到：
?
點擊右上角“添加至CHROME”,開始安裝。
瀏覽器會對我們進行詢問提示，我們選擇：“添加擴展程序”。
?
安裝成功后，瀏覽器會提示我們
就這么簡單！接下來我們就來動手寫點東西，簡單體驗一下Vue Devtools工具的方便。
?
Demo案例
同樣我們用WebStorm創建一個html頁面，并引入vue2.0+開發版的CND資源，我們使用官網推薦的unpkg，它會保持和 npm 發布的最新的版本一致。
?
CDN地址：
https://unpkg.com/vue@2.3.3/dist/vue.js
?
我們利用vue簡單的實現一個加法計算器，效果如下：
?
下面附上我們的代碼，Html部分：
?<div id="app">
??? <input ?@keyup="calculate"
????????????type="text"?
????????????v-model="augend">
??? <span>+</span>
??? <input ?@keyup="calculate"?
????????????type="text"?
????????????v-model="addend">
??? <span>=</span>
??? <input ?type="text"?
????????????:value="sum">
??? <br>
??? <br>
??? <button @click="reset">
????清空數據
????</button>
?</div>
?
Javascript部分：
<script>
??? const app = new Vue({
?????el:"#app",
???? data:{
???????? augend:'',
???????? addend:'',
???????? sum:''
???? },
???? methods:{
???????? calculate(){
???????????? this.sum = Number(this.augend)
????????????????????? +
?????????????????????? Number(this.addend);
?????????},
???????? reset(){
??????????? this.sum = this.augend
? ? ? ? ? ? ? ? ? ? = this.addend = '';
???????? }
??????? }
??? });
</script>
具體的代碼我們不展開講解，也十分簡單，只要你學習我們之前的《Vue2.0基礎》教程就能看得懂，我們這里主要演示Vue Devtools調試工具。
?
我們訪問這個頁面，并打開開發者工具（F12）,瀏覽器會檢測到我們的頁面使用了Vue框架，就會出現Vue的pannel面板。
Components選項卡
打開Vue 面板，點擊Components選項卡，我們會看到這個頁面的組件和它們的所有狀態，一覽無余。
當我們的狀態改變的時候，Vue Devtools也會及時更新，相當的方便。
（等等我，我是gif，加載有點慢）
Vuex選項卡
Vuex是Vue的核心插件之一，專門用來管理組件和應用的狀態，在后期我們學習到Vuex的時候就用到這個調試功能，今天在這里先不展開講解。
?
Events選項卡
Events選項卡用來監視我們自定義的事件，（注意：不是原生的事件），它可以清晰地看到你觸發的每一個事件的詳細信息。
假設我們在上面的代碼基礎上，給reset方法加上了一個自定義事件：“reset”。
注：這句代碼對于業務功能上來說沒有任何意義，僅用于演示Events的作用。
reset(){
??this.$emit('reset');
}
?
當我們點擊按鈕“清空數據”的時候，就會觸發自定義的reset事件，這個時候我們再看看Events的選項卡。
?
（等等我，我是gif，加載有點慢）
Events選項卡會及時地展示我們所有觸發的自定義事件的詳情，對于調試十分方便。
?
Vue Devtools的安裝和使用并不難，大家先按照教程的方式先把它安裝并熟練，后面的章節我們會經常使用到這個調試Vue的神器。
?
WebStorm安裝包
在上一篇WebStrom主題包的文章中留言的同學說要一個能支持Vue語法的WebStorm安裝包，只要下載最新版的WebStorm即可支持，無需安裝任何插件。
由于時間關系，我已經為大家從jetbrains官網上下載了正版的安裝包。
Window版本
鏈接: http://pan.baidu.com/s/1eRI47IU
密碼: gbsf
?
Mac版本
鏈接: http://pan.baidu.com/s/1skJ4cWl
密碼: nz8y
?
需要的同學自行拿走吧！
推薦
擴展閱讀
?1.《ECMAScript 6 系列》原創教程
?2.《Vue2.0基礎系列》原創教程
?3.《ECMAScript 6 系列》的 2 套習題
?4.《Vue2.0基礎系列》的 1 套習題
關于職場
?薪資：關于昨天的招聘薪資問題
?鄭州招聘：招聘前端3~5人
?廣州招聘：招聘前端2人
資源推薦
其實學好技術并不難，架構師免費分享全網全套最新web前端、JavaScript、HTML5、PHP、數據庫……等視頻資料！
[總價值超3萬！]年薪35萬以上的大牛幾乎都看了！
加微信:?abc15689892?免費領取，由于領取的朋友比較多，所以加微信時一定要備注：555，否則很難通過。
總結
以上是生活随笔為你收集整理的【进阶篇】Vue Devtools——vue开发调试神器的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 数字图像处理与机器视觉——Visual
- 下一篇： 第九节：掌握vue的另一个核心：组件