【Vue】初识Vue，Vue简介及Vue Devtools配置_vue(2)

2401_84412953

于 2024-05-01 01:14:32 发布

阅读量194

点赞数 6

分类专栏：程序员文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/2401_84412953/article/details/138360984

版权

程序员专栏收录该内容

204 篇文章 0 订阅

订阅专栏

渐进式框架是指我们可以在项目中一点点来引入和使用Vue，而不一定需要全部使用Vue来开发整个项目；

2020年9月18日Vue3.0.0正式发布别名One Piece（没错就是海贼王）。

2. Vue的特点

采取组件化模式，提高代码复用率，且让代码更好维护。
声明式编码，让开发人员无需直接操作Dom，提高开发效率。
它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型。
帮助你高效地开发用户界面，无论任务是简单还是复杂。

3. Vue的引入方式

直接使用

直接下载Vue的源码并用 <script> 标签引入，Vue 会被注册为一个全局变量,这里的路径要根据自己的实际情况进行设置

 <script type="text/javascript" src="../js/vue.js"></script>

在页面中通过CDN的方式来引入；

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10"></script>

4. 安装Vue Devtools

首先要安装Vue Devtools这里直接使用edge浏览器来演示

在这里插入图片描述

点击管理扩展

在这里插入图片描述

在搜索框中搜索vue

在这里插入图片描述

选择这个扩展，点击获取，这里我已经安装过了，所以是删除。

在这里插入图片描述

在扩展设置里让Vue可以显示在栏上，同时点击vue扩展右侧的三个点，进入管理扩展

在这里插入图片描述

将这两个权限开放

5. 第一个Vue案例

编写我们的第一个小案例，不要忘记引入Vue的资源

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>


### 文末

如果30岁以前，可以还不知道自己想去做什么的话，那30岁之后，真的觉得时间非常的宝贵，不能再浪费时间在一些碎片化的事情上，比如说看综艺，电视剧。一个人的黄金时间也就二，三十年，不能过得浑浑噩噩。所以花了基本上休息的时间，去不断的完善自己的知识体系，希望可以成为一个领域内的TOP。



同样是干到30岁，普通人写业务代码划水，榜样们深度学习拓宽视野晋升管理。

这也是为什么大家都说30岁是程序员的门槛，很多人迈不过去，其实各行各业都是这样都会有个坎，公司永远都缺的高级人才，只用这样才能在大风大浪过后，依然闪耀不被公司淘汰不被社会淘汰。



**269页《前端大厂面试宝典》**

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

![](https://img-blog.csdnimg.cn/img_convert/b98713ee557d94286de8afe404cb51d1.png)



**前端面试题汇总**

![](https://img-blog.csdnimg.cn/img_convert/1d691ca297c9016828aff783a701e065.png)



**JavaScript**

![](https://img-blog.csdnimg.cn/img_convert/a489904576da281d07092f043566f6dd.png)