Write By Monkeyfly
以下内容均为原创,如需转载请注明出处。
关于Vue调试工具的最新说明【更新于2022年5月17日】:
由于时间久远,本文章中提到的
谷歌访问助手网站已无法访问,强烈给大家推荐一个下载 vue-devtools 的插件商店,直接下载拖拽到扩展程序就可以了。简单方便:传送门 后续大家有新的方法可以在评论区留言,因为随着时间推移,链接很有可能会存在失效的问题。
vue.js
了,不为别的,只是因为我女朋友毕设项目的前端是使用vue
开发的,而我作为一个前端开发却无能为力,你说可不可笑。vue
的前端帮她做界面,而我虽然身为一个前端开发,但是并不会vue
,所以作为男朋友的我本身就很自责。jQuery
,其他新的框架也用不上,所以也一直没机会去接触和学习。毕竟,自己也知道自己几斤几两,JavaScript
学的就不怎么样,目前还停留在基础进阶的阶段,肯定就谈不上学其他框架了。jQuery
这个轻量级的js
框架会用,其他js
框架可以说是都不沾边。我真的是很无奈,可以说是一点忙也帮不上,只能眼睁睁看着困难摆在她的面前却束手无策,这种感觉很难受。所以说,不管出于什么理由,始终都不能停下学习的脚步,不会就去学嘛,对不对,我就不信还没有学不会的东西。而且,学了肯定没有坏处,就算现在用不上,说不定日后也会用上的。
话不多说了,那就开始吧!
vue
教程开始学起建议有一定的基础再来学(如下图所示)
何为vue?【官方介绍 — Vue.js —— 点击查看】
vue
我要说的是,我听到最多的发音是V [vi:] U [ju:] E [i:]
,即根据vue
的字母组成,然后按照字母本身的发音来读,即vue
。Vue (读音 /vjuː/,类似于 view)
。构建用户界面
和渐进式框架
。(目前来说,我也不懂,先继续往下看吧)Vue
被设计为可以自底向上
逐层应用
。(可能这就是所谓的渐进式吧,还是不懂)Vue
的核心库只关注视图层
,不仅易于上手,还便于与第三方库或既有项目整合。我的理解:
vue
是响应式的,即JavaScript
代码中变量值的改变会反映到HTML
元素中,也就是说,实现了数据和视图(HTML
元素)的绑定。DOM
元素中的内容,我们通常都是使用JavaScript
提供的DOM API
,先获取到相应的DOM
元素,然后进行动态的操作。因为首先要定位到你要修改的DOM
元素,然后才能修改数据。如果要改动多个元素的话,我们就需要频繁的进行手动DOM
操作。DOM
的更新了,只需要改变数据就可以了。因为数据和视图是绑定的,数据的改变会影响到视图,所以vue
帮我们自动更新了视图。尝试vue
尝试 Vue.js
最简单的方法就是,自己创建一个.html
文件,然后引入vue.js
文件,跟着官方的教程自己写一个Hello World
的案例。这样做,可以加深自己对vue
的理解。
引入方式(推荐新手使用)
<!-- 开发环境版本,包含了用帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本,优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
以下是官方的说辞:
请注意我们不推荐新手直接使用 vue-cli
,尤其是在你还不熟悉基于Node.js
的构建工具时。
所以,作为新手来说,不要着急学太多的东西,先来体验一下vue
的魔力,然后再去学习其他的安装方法。
复制粘贴下面的代码就能直接运行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一个Vue应用</title>
<!-- 开发环境版本,包含了用帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- 声明式渲染 -->
<!-- Vue.js的核心是一个系统,允许采用简洁的模板语法来声明式地将数据渲染进DOM的系统。 -->
<div id="app">
{
{message}}
</div>
<script>
var app = new Vue({
el:'#app',
data:{
message:'Hello Vue!'
}
});
</script>
</body>
</html>
至此,我们已经成功创建了第一个Vue
应用!
效果图(不足为奇,已经见怪不怪了)
分析(其实好奇的是代码中的语法)
(1)首先,声明一下你要渲染的区域。也就是说,先创建一个HTML
元素,声明一下哪个HTML
元素需要使用vue
的语法。其实就是声明vue
语法的作用域,不声明是没办法使用vue
的语法的。
(2)给HTML
元素设置一个class
或者id
,用于让vue
语法找到该元素(指定的渲染区域)。
(3)在script
标签内使用了vue
简洁的模板语法,即
//创建了一个vue的实例
var app = new Vue({
el:'id或class',
data:{
键名:值
}
});
显而易见,其中做了两件事情:
vue
语法要应用的范围,或者说要渲染的区域。HTML
元素。(4)将数据绑定到视图当中。div
中双花括号的语法{
{}}
,其实这个整体就是动态绑定的数据。{
{}}
中放的是变量名
或者表达式
。变量
或者表达式
的值可以在模板语法中的data
进行改变。
(5)如果要更新视图,那么只需要改变数据就可以了。数据的改变的同时,视图也会自动进行更新。
结论:
其实,Vue
在背后做了大量工作。现在数据和 DOM
已经被建立了关联,所有东西都是响应式的。
问:我们要怎么确认呢?
答:打开你的浏览器的 JavaScript
控制台 ,并修改 app.message
的值,你将看到视图相应地更新。
上面的动态图演示的是,谷歌浏览器已经安装完 vue-devtools
插件的情形。
(注:此情形特指控制台中的黑绿色标识,并非指代码的操作)
Vue
调试神器 vue-devtools
的安装极速安装Vue调试神器 vue.js devtools(5分钟搞定)—— 点击查看最近安装方法
最新提示:(写于2018/04/17 凌晨01:27)
下面的这种方式耗时耗力,后来又发现一种全新的极速安装的方法,直接点击上方文字查看最新方法。
如果想要坚持使用旧方法的请忽略上面这句话,继续往下走就行了。
问题:为什么要安装该插件:
答案 :因为vue
是进行数据驱动的,仅仅从chrome
浏览器的控制台进行element
查看,是看不到数据的动向的。
未安装的情形:
浏览器的控制台会提示你:
vue DevTools
扩展以获得更好的开发体验;(插件的GitHub
地址:https://github.com/vuejs/vue-devtools)Vue
。当为生产部署时,一定要打开生产模式。
更多提示见 https://vuejs.org/Guide/ployment.html。安装前的准备
Node.js
环境。所以,第一件事就是安装Node.js
。github
的下载地址将该插件下载下来:https://github.com/vuejs/vue-devtools安装步骤
Windows+R
这个快捷键打开“运行”
对话框,输入cmd
,进入命令行。vue-devtools-master
目录下。npm install
命令;(执行过程比较长,请耐心等待...)
npm run build
命令;C:\Software\vue-devtools-master\shells\chrome
目录下,修改mainifest.json
文件中的persistent
属性的值为true
。(根据自己安装的目录去找mainifest.json
文件)纵向排列的三个点
选项 —— 更多工具 —— 右上角勾选开发者模式(有的已默认勾选了)—— 加载已解压的扩展程序 —— 找到本地磁盘中vue-devtools-master
目录下的chrome
文件夹 —— 选择该文件夹并点击确定按钮。后来才发现,其实安装过程存在进度条的,进度条其实就是图中的#
号。(如下图所示)
1.执行npm install
命令
2.执行npm run build
命令
3.修改mainifest.json
文件
4.打开谷歌浏览器,设置开发者模式,添加扩展程序文件
至此,恭喜vue devtools
插件已经安装成功!!
注:Vue.js devtools
插件在chrome
浏览器安装成功后,在浏览器的右上角会存在一个插件图标。
5.启动vue devtools
插件
6.打开vue
项目,在控制台选择vue
:
7.点击vue
,查看数据
可能会遇到的问题
1.在命令行执行npm install
时,会长时间停留在fetchMetadata
2.npm install
获取 fetchMetadata
的阶段非常慢,有什么方法可以加速呢?
3.Vue.js devtool插件安装后无法使用,出现提示“vue.js not detected”的解决办法
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/185317.html原文链接:https://javaforall.cn