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

最新推荐文章于 2023-03-21 04:15:43 发布

大成子 | 翻身的码农

最新推荐文章于 2023-03-21 04:15:43 发布

阅读量418

点赞数

本文链接：https://blog.csdn.net/qq_24520459/article/details/103014632

版权

工欲善其事，必先利其器，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>