【进阶篇】Vue Devtools——vue开发调试神器

原创

mb5fdb09f39fed1 2021-02-25 21:20:48 ©著作权

文章标签 java 文章分类 Java 后端开发

©著作权归作者所有：来自51CTO博客作者mb5fdb09f39fed1的原创作品，请联系作者获取转载授权，否则将追究法律责任

【进阶篇】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面板。