Vue.js2.0基础：Vue Devtools——vue开发调试神器

版权声明： https://blog.csdn.net/weixin_42442713/article/details/90029810

安装

用chrome浏览器访问以下地址，就可以在chrome商店找到我们的Vue Devtools插件。

地址：

https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

点击右上角“添加至CHROME”,开始安装。

浏览器会对我们进行询问提示，我们选择：“添加扩展程序”。

安装成功后，浏览器会提示我们

Demo案例

同样我们用WebStorm创建一个html页面，并引入vue2.0+开发版的CND资源，我们使用官网推荐的unpkg，它会保持和 npm 发布的最新的版本一致。

CDN地址：

https://unpkg.com/[email protected]/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>

我们访问这个页面，并打开开发者工具（F12）,浏览器会检测到我们的页面使用了Vue框架，就会出现Vue的pannel面板。

Components选项卡

打开Vue 面板，点击Components选项卡，我们会看到这个页面的组件和它们的所有状态，一览无余。