vue调试工具如何使用_教你使用Vue.js的DevTools来调试vue项目
Vue DevTools项目的官方主页位于GitHub上：https：//http://github.com/vuejs/vue-devtools。你可以找到安装说明，帮助解决一些问题等等。目前该扩展在Chrome和Firefox中得到支持，同样Safari也得到了支持。如果你想从安装扩展开始，请不要忘了重新加载你的网页。
入门
让我从一个超级简单的Vue应用程序开始带大家去熟悉Vue的DevTools。
正如你所看到的，我有一个输入字段绑定到一个叫做name的模型，然后是一个列表，它遍历一个cat数组。首先你可能会注意到你的开发工具是“宣布”自己的扩展类型 - 以防你忘了注意右边的标签。
点击Vue选项卡将显示特定于Vue的选项。首先是组件。在我的应用程序中，我只有一个Root应用程序，当您单击它时，它会右侧显示可用的数据。
这是“live”，所以如果我输入字段，它会立即反映在dev tools视图中。更好的是，您可以直接在devtools中进行编辑。将鼠标悬停在项目上将使您可以编辑控件：
DevTools扩展到数组-有完全移除或添加items的选项。要添加item，您需要输入有效的JSON，扩展名将在您输入时提供实时反馈。
DevTools扩展也可以处理computed属性：
我在代码上在computed属性添加oldcats函数，将cats的数据遍历输出一个age>10的结果，DevTools扩展会将这个结果显示出来。
你不能编辑这些值（因为这是computed的！），但是如果你在数据数组中编辑一个比10更大的值，它将立即显示在下面的computed列表中。
Nice！可能在computed中查看相关函数的数据还没令你感到兴奋的话，那么远程数据源呢？
我使用Star Wars API 作为我的数据源。项目一旦运行，我可以看到devtools扩展中的远程数据，甚至可以编辑它。
自定义组件（Components）
那么自定义组件呢？这里是我定义了一个cat组件的脚本。坦白地说，Vue并没有在默认情况下使用它，这是一个严重的错误。
现在看看devtools如何认识新的组件：
注意它是如何拾取发送给它的属性的。现在我要跳过Vuex选项卡，直接进入Events。GitHub仓库中的自述文件不会告诉您一点是“Events”选项卡仅适用于组件所定制的自定义事件。所以当我使用了一个简单的@ click =“doSomethingYo”测试，它并没有呈现，一开始我认为它在渲染的时候被破坏了其实并不是的。在上面的代码示例中，您可以看到我有一个click事件，但是点击它没有发生任何事情。我不得不修改代码来触发出新的事件。
有了这个，你现在可以看到记录的events。有趣的是，devtools扩展会让你知道那一个事件被解雇了：
点击标签，然后event让你检查是什么触发了它和其他额外的信息。
使用Vuex
现在让我们看看Vuex。去年12月，Raymond Camden的博客上发布了一个示例应用程序，它利用Vuex构建了一个简单的股票游戏。这就是Vue DevTools的真正意义所在。您可以深入了解存储中的数据以及运行的突变列表。
左边的是“live”，在股票应用中非常酷，因为它有一个“心跳”，每隔几秒就会发生一次突变。点击它们可以提供有关特定突变的详细信息。
更酷的是你可以通过一个特定的突变来拒绝或回滚你的存储状态。
您还可以使用导出/导入命令来保存/恢复您的Vuex状态。这对于调试问题是非常有用的。
相关文章：
Python开发【第十篇】：CSS （二）
Python开发【前端】：CSS Kylin Zhang 发表于 2016-11-10 13:13:57css样式选择器 标签上设置style属性： <body><div style"height: 48px;">第一层</div><div style"height: 48px;">第二层</div><di…
java设计一个bank类实现银行_SAP银企直连之平安银行（ECC版）
关于讲解SAP中国本地化银企直连系统功能，它通过ECC和S4 HANA 1909两个不同版本的演示来讲解银企直连付款相关功能实施和应用，有兴趣的可以联系微信号：timijia进行付费获取。以下资料仅供大家参考：说明：因为平安银行较S…
spark ml中一个比较通用的transformer
spark ml中有许多好用的transformer，很方便用来做特征的处理，比如Tokenizer, StopWordsRemover等,具体可参看文档:http://spark.apache.org/docs/2.1.0/ml-features.html . 但是呢，这些都是一些特定的操作，组内的同事提了一个需求…
mysql 常用函数循环_近30个MySQL常用函数，看到就是学到，纯干货收藏！
概念：相当于java中的方法，将一组逻辑语句封装在方法体中，对外暴露方法名隐藏了实现细节提高代码的可重用性使用：select 函数名(实参列表)【from 表】 【】中内容可省略正文：字符函数：length：…
连接Oracle错误:800a0e7a未找到提供程序的解决
一、现象： C#程序中需要以ProviderOraOLEDB.Oracle.1方式访问ORACLE数据库。但程序执行时报异常：未在本地计算机注册“OraOLEDB.Oracle.1”提供程序 二、解决方案： 1、在Oracle安装目录找到Oracle的主程序目录，点击鼠标右键->属…
定义一个属性_Python property属性
1. 什么是property属性一种用起来像是使用的实例属性一样的特殊属性，可以对应于某个方法# ############### 定义 ###############class Foo: def func(self): pass # 定义property属性 property def prop(self): pass# ############### 调用 ###############foo_obj…
MySQL 字段类型知识
tinyint(m) 值的范围：-128 ~ 127；unsigned 时，0 ~ 255。存储占用1字节 m 默认为4，和存储空间、数字位数没有关系，表示左侧补空格（默认，声明 zerofill 则补0，如0001）到…
mysql 单实例部署_Mysql 数据库单机多实例部署手记
最近的研发机器需要部署多个环境，包括数据库。为了管理方便考虑将mysql数据库进行隔离，即采用单机多实例部署的方式。找了会资料发现用的人也不是太多，一般的生产环境为了充分发挥机器性能都是单机单实例运行，再进行一系列的配置调…
用python做一个图片验证码
看一下做出来的验证码长啥样 验证码分析 1. 有很多点 2. 有很多线条 3. 有字母，有数字 需要用到的模块： 1. random 2. Pillow (python3中使用pillow) 安装pillow : pip install pillow pillow的用法： 创建一张图片： from PIL im…
地图测量面积工具app_全站仪的使用面积测量
测量与地图制作见习全站仪使用11 / 20#2020 #全站仪是全站型电子速测仪的简称，是电子经纬仪、光学测距仪及微处理器相结合的光电仪器。其可直接测量距离、角度、坐标，根据三角函数原理，已知两点坐标信息推算出无数个第三点的坐标信息。下面让…
Palette使用
1.定义: Palette：可以在一张图片里面分析出一些色彩特性：主色调、鲜艳的颜色、柔和颜色等等…… 2.使用: 1). 2).效果图 3.获取颜色样品: 1). 2).颜色组装算法: 3).效果图:转载于:https://www.cnblogs.com/jeffery336699/p/9294681.html
PYTHON 写函数，检查传入列表的长度，如果大于2，那么仅保留前两个长度的内容，并将新内容返回给调用者...
def a2(arg):if len(arg) > 2:del arg[2:]li [12,13,14,15] a2(li) print(li) 转载于:https://www.cnblogs.com/zgyc/p/6229722.html
文件流能转换格式吗_amr转换mp3格式文件
MP3是非常标准的音频数字编码格式。区别于其他格式的优势在于，它可以在不降低音质的前提下，大幅的降低文件的大小。因此MP3格式应用范围极广，我们日常生活中用到的歌曲格式也多为MP3。今天要给大家说的是如何把amr格式的音频文件转换成mp3格式…
1196: 数星星(二)(结构体专题)_福利：最新导数6大专题！高分段提分有困扰？听北大状元漫谈提分...
这是一篇适合数学120分以上的高中生深度研读的随感。文末有福利！振宇老师从教的十几年中，遇到高分段学生最大的困扰便是：130分以上每提一分便需要付出极大的努力。究其原因，便是思维不够严谨全面，无法拿全分࿰…
RTMP协议中的Chunk Stream ID （CID）的作用
一、协议分层 RTMP包是以Message的结构封装的，结构如下所示： 1）Message Type ID在1-7的消息用于协议控制，这些消息一般是RTMP协议自身管理要使用的消息，用户一般情况下无需操作其中的数据。 Message Type ID为8&#x…
fceux源码解析_fceux源码解析_从源代码制作deb包的两种方法以及修改已有deb包（转载）...
1. 原理1) deb包通常包含两部分：控制信息(DEBIAN目录)、安装内容(模拟"/"目录)2) 通过解开已有的deb包看其中内容i. 释放安装内容到dirname目录中$ dpkg-X xxx.deb dirnameii. 释放控制信息到当前目录下的DEBIAN子目录中$ dpkg-e xxx.deb2. 准备1) 安装相…
Centos 7 意外断电如何处理
拔U盘的时候，不小心碰到了主机上的开机键…… 还好默认的响应动作是睡眠…… 还不知道 CentOS 怎么样应对意外断电呢？！ 转载于:https://www.cnblogs.com/liaozt/p/6232189.html
静茹docker容器的几种方法_Docker介绍及使用
什么是容器？容器就是在隔离的环境运行的一个进程，如果进程停止，容器就会销毁。隔离的环境拥有自己的系统文件，ip地址，主机名等，kvm虚拟机，linux，系统文件程序：代码&#…
Elasticsearch 6.3.1、Head插件 安装及配置
安装Elasticsearch Elasticsearch下载地址：https://www.elastic.co/cn/downloads/elasticsearch 也可以直接使用wget下载到某目录下, 本文所有下载的包都放在 /home/tools 中， 解压后移到 /home/apps目录下 wget https://artifacts.elastic.co/downloa…
Android中的eventBus传值
第一步：在build.gradle中添加依赖dependencies { compile org.greenrobot:eventbus:3.0.0} 第二步：创建一个 Event类： 注意：enum 不是classpublic enum Event {//消息名，可以根据这个名字判断是哪个消息 IMAGE_LOA…
mysql 优化器算法_SQL 查询优化器底层原理解析【MySQL 篇】
前言SQL 执行流程中有一个模块叫做查询优化器，这个模块的功能主要是对 SQL 语法树进行逻辑优化和物理优化，最终生成执行计划交给执行引擎执行 SQL。查询优化器主要分为两部分：一部分是逻辑优化，一部分是物理优化。逻辑优化会将 SQ…
gprs发送信号对方如何接收_和接收缓冲区比较：Netty发送缓冲区是如何设计的，why？...
点击上方蓝字关注我吧！本篇文章大概3300字，阅读时间大约10分钟前面文章，透彻分析了Netty的接收缓冲区优化的套路和实现细节，以及写数据和刷新数据的宏观流程和细节：从源码出发：在宏观上把握Netty写数据到应…
原 史上最简单的SpringCloud教程 | 第八篇: 消息总线(Spring Cloud Bus)(Finchley版本)
转载请标明出处： 原文首发于：https://www.fangzhipeng.com/springcloud/2018/08/30/sc-f8-bus/ 本文出自方志朋的博客 转载请标明出处： Spring Cloud Bus 将分布式的节点用轻量的消息代理连接起来。它可以用于广播配置文件的更改或者服务之间…
python读取数据校验数据_Python通过Schema实现数据验证方式
Schema是什么？不管我们做什么应用，只要和用户输入打交道，就有一个原则--永远不要相信用户的输入数据。意味着我们要对用户输入进行严格的验证，web开发时一般输入数据都以JSON形式发送到后端API，API要对输入数据做验证。…
String，StringBuffer
String类代表不可变的字符序列。 String s1 "hello"; String s2 "hello"; s1 s2 > true "hello"是字符串常量，存在data seg中，编译器对data seg有优化，对于已经有的数据，不是重新分配空间&a…
蒙特卡洛粒子滤波定位算法_粒子滤波——来自哈佛的详细的粒子滤波器教程【1】...
本文原版链接：https://www.seas.harvard.edu/courses/cs281/papers/doucet-johansen.pdf本文是哈佛大学相关研究人员于2008年发表的一篇关于粒子滤波的详细教程，至今已被引用1687次。目录：介绍Introduction1.1 序言Preliminary remarks1.2 教…
人脸识别的一些资源
人脸识别的全部源代码(在Visual C6.0下可以运行识别)http://www.61ic.com/Download/DaVinci/Code/201304/121592.html 智能分析接口（支持车牌识别，人脸识别等智能类型）提供DEMO和源码，供参考！http://www.61ic.com/Down…
mysql where关键字_MySQL WHERE 子句
我们知道从 MySQL 表中使用 SQL SELECT 语句来读取数据。如需有条件地从表中选取数据，可将 WHERE 子句添加到 SELECT 语句中。语法以下是 SQL SELECT 语句使用 WHERE 子句从数据表中读取数据的通用语法：SELECT field1, field2,...fieldN FROM table_name…
mac远程连接windows工具_Windows远程MAC系统
第一步、在 Mac 上设置好屏幕共享1. 1先请在苹果 Mac 电脑上的“系统偏好设置”窗口中打开“共享”功能，如图所示接着在共享窗口中的左侧点击启用“屏幕共享”选项，如图所示当屏幕共享功能打开以后，请点击“电脑设置”按钮，如图所…
Tomcat虚拟目录设置
ssh $host "rm -fr /var/www/$tomcat_name/webapps/*" 远程分发war包部署tomcat项目时，需要先清除项目目录。 --------------------------------------------------------------------------------------- <context path"" docBase"&qu…