Vue2.0开发之——Vue基础用法-调试工具(15)

最新推荐文章于 2023-11-10 13:06:45 发布
最新推荐文章于 2023-11-10 13:06:45 发布
阅读量1.5k 收藏
点赞数
分类专栏： Vue2 文章标签： vue.js vue-devtools
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Calvin_zhou/article/details/127726419
版权

一 概述

  • 安装vue-devtools调试工具
  • 配置Chrome浏览器中的vue-devtools
  • 使用vue-devtools调试vue页面

二 安装vue-devtools调试工具

vue官方提供的vue-devtools调试工具，能够方便开发者对vue项目进行调试与开发

vue-devtools插件下载地址：https://devtools.vuejs.org/guide/installation.html

三 配置Chrome浏览器中的vue-devtools

点击Chrome浏览器右上角的┇按钮，选择更多工具—>扩展程序—>Vue.js devtools，并勾选如下的两个选项

四 使用vue-devtools调试vue页面

1-在调试页面，按F12键或右键—>检查，打开如下所示调试界面

2-点击Components下的Root，页面中的元素高亮显示，同时数据项在右侧显示

3-点击数据项的Edit Value，修改内容，页面内容同步修改

五 参考

PGzxc
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue-devtools 大揭秘：Vue3.X 和 Vue2.X 调试工具安装及使用指南
chinayun_6401的博客
06-12 1634
Vue-devtools 乃是一款构建于 Chrome 浏览器之上的插件，其主要功能是对 Vue 应用进行调试操作，通过它能够极为显著地提升我们在调试过程中的效率。
vue2.0-devtools谷歌浏览器调试工具和vue3.0-devtools谷歌浏览器调试工具
08-19
该资源包括vue2.0-devtools谷歌浏览器调试工具和vue3.0-devtools谷歌浏览器调试工具，具体安装方法参考我的博客https://blog.csdn.net/dxnn520/article/details/121088688，如还不会，可私信我。
VUE2)vue-devtools的安装与使用
weixin_34242331的博客
02-03 149
第一步:在github上下载压缩包，github下载地址： https://github.com/vuejs/vue-devtools 第二步:解压文件到具体文件夹,并进入 root@witts:/# cd witts/fore_end/vue-devtools-master/ 第三步:利用npm安装 npm install root@witts:...
Vue2调试工具--5/6版本
06-17
直接解压后，浏览器引入就可使用 两个版本。
windows下载安装Vue开发者工具(VueDevtools)，同时支持vue2.0和vue3.0两个版本
见证自己学习,成长的记录
10-28 6583
vue开发者工具可以帮助我们提高开发效率，如果不安装控制台老是现在这些东西，对我这种强迫症患者来说痛苦至极,下面我就介绍下我的安装步骤。
【前端开发---Vue2】超详细的Vue2入门教程，让你的开发效率大大提高（自己整理的笔记，超详细！）
热门推荐
m0_67844671的博客
09-27 2万+
【超详细Vue2教程】超详细的Vue2入门教程，让你的开发效率大大提高（自己整理的笔记，超详细！）
生产环境如何开启 devtools vue2/vue3
m0_53679031的博客
03-04 1323
vue生产模式如何调出开发者工具
Vue2与Vue3的devtools
前端
07-29 2231
文章目录前言一、下载插件1.官网下载2.极简插件（好用的插件网站，推荐）3.开源中国下载二、插件安装1.安装教程2.踩过的坑 前言 今天准备在chrome上装vue devtools插件,花了很长时间，采坑无数。给需要的小伙伴提供一些参考意见。 注意：vue2与vue3的插件版本是不同的！！！！！！vue3请下载beta版本！！！！！！ 一、下载插件 1.官网下载 下载地址：https://hub.fastgit.org/vuejs/devtools （镜像地址下载更快） 2.极简插件（好用的插件网站
vue2.0开发实践总结之疑难篇
09-01
Vue 2.0 开发实践中，经常会遇到一些挑战和疑难问题。本文将深入探讨其中的两个关键主题：Vue 组件的使用与Vuex在实际开发中的应用。 首先，让我们来看看Vue组件的说明和使用。Vue组件是构建可复用UI的基础，它们...
vue2.0开发入门笔记之.vue文件的生成和使用
08-29
了解并熟练掌握 `.vue` 文件的生成和使用是 Vue 2.0 开发的基础，这将帮助开发者高效地构建复杂的前端应用。希望上述介绍对初学者有所帮助，并鼓励你继续深入学习 Vue.js 相关知识，提升开发技能。
VUE2.0中Jsonp的使用方法
10-18
使用JSONP主要是目的通过动态创建Script，动态拼接url，进而抓取数据，实现跨域。这篇文章主要介绍了VUE2.0中Jsonp的使用方法（前端）,需要的朋友可以参考下
vue调试工具-vue3.0-6.0.0-beta-15
10-29
Vue DevTools 6.0.0-beta-15 版本是针对Vue 3.x 版本的调试工具，同时也兼容Vue 2.x，这意味着它能适应不同版本的Vue项目。这个版本可能包含了一些新的改进和修复，以更好地与Vue 3的最新特性保持同步。 在Vue 3中...
Vue2【vue 简介、vue 的基本使用、vue 的调试工具】
m0_52896752的博客
11-15 1354
Vue2【vue 简介、vue 的基本使用、vue 的调试工具】
vue-devtools（vue2和vue3） 安装总结（google浏览器上安装的）
xiaomanonyo的博客
12-10 3732
方法一：直接从谷歌应用商店安装（vue官网有给链接，我这边不能翻墙，我没用） https://v3.cn.vuejs.org/guide/installation.html#vue-devtools 方法二：从github上下载安装 1、从github上下载安装包（链接：https://hub.fastgit.org/vuejs/devtools/tree/main） 不知道为啥我直接下载下来的，运行npn run build 会报错，找了半天没找到解决办法 然后我从这里点进去下...
Vue2.x和Vue3.0同时支持的调试工具devtools-6.0.0-beta-10-适用谷歌浏览器
xiexikk的博客
04-13 5172
vue开发利器:vue-devtools， 适合vue3.0版本的。 Vue3.0版本的-devtools-6.0.0-beta-7 适合谷歌浏览器，下载地址：https://download.csdn.net/download/weixin_42211816/16632636?spm=1001.2014.3001.5503
vue-devtools的安装与使用
qq_44552416的博客
07-07 2100
2，安装完成后，进入该文件下的node_modules 文件，找到 vue-devtools 文件，将vender 文件下的 manifest.json ，修改persistent 为 true。components： 显示当前点击组件的可用数据,并可以修改和添加，修改可实时反应在界面中，非常方便调试一些业务流程比较繁琐，可以任意展示其中的一步操作的界面。events： 记录事件，比如点击事件，当你点击之后，这里会显示出来点击事件来源于哪一个组件，以及事件名等信息。只有在本地运行的项目才能查看。
vue devtools 调试工具安装配置
最新发布
qq_41167198的博客
11-10 209
vue devtools 配置工具
如何在浏览器中安装使用Vue开发者工具？Vue开发者工具的安装使用？可直接提取插件安装使用
做笔记\记录遇到的程序bug
01-15 1987
如何在浏览器中安装使用Vue开发者工具？Vue开发者工具的安装使用？可直接提取插件安装使用
【Vue】Vue的安装环境搭建以及vue2.0-devtools和vue3.0-devtools6.0调试插件安装
【敦厚的曹操】的专栏
11-01 1102
一、下载：Vue.js 二、下载：vue-devtools 登陆不上谷歌商店的，建议从百度搜一下，有很多他人分享的，下载vue-devtools.crx。 1、下载后，打开谷歌浏览器，按下图找到扩展程序 把文件拖进来，安装！ .........
vue2.0怎么渲染html,vue采坑之——vue里面渲染html 并添加样式
05-19
在Vue2.0中渲染HTML有两种方式：v-html指令和使用组件。 1. v-html指令 v-html指令可以将一个字符串解析成HTML并渲染到页面上。例如： ``` <template> <div> <p v-html="content"></p> </div> </template> <script> export default { data() { return { content: '<b>Hello World</b>' } } } </script> ``` 这会将`<b>Hello World</b>`以加粗的形式渲染到页面上。 但是需要注意的是，v-html指令会将传入的字符串当做HTML代码直接解析并渲染，因此可能会存在XSS攻击的风险。因此，应该确保渲染的内容是可信的，或者对内容进行过滤和转义。 2. 使用组件 在Vue2.0中，可以通过创建组件的方式来渲染HTML。例如： ``` <template> <div> <my-html :content="content"></my-html> </div> </template> <script> import MyHtml from './MyHtml.vue' export default { components: { MyHtml }, data() { return { content: '<b>Hello World</b>' } } } </script> ``` 这里创建了一个名为`MyHtml`的组件，并将要渲染的HTML代码通过`content`属性传递给组件。组件的实现如下： ``` <template> <div v-html="content"></div> </template> <script> export default { props: ['content'] } </script> ``` 这会将传入的HTML代码解析并渲染到页面上。需要注意的是，组件方式相对于v-html指令更安全，因为可以在组件内部对传入的HTML内容进行过滤和转义。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值