【Vue】初识Vue，Vue简介及Vue Devtools配置

野性酷女 2024-04-03 12:17 18阅读 0赞

#### 目录 ####

*   *   *  1. Vue是什么
         *  2. Vue的特点
         *  3. Vue的引入方式
         *  4. 安装Vue Devtools
         *  5. 第一个Vue案例

#### 1. Vue是什么 ####

关于这个问题官方给了我们答案：

**一套用于`构建用户界面`的`渐进式`JavaScript框架**

![在这里插入图片描述][33a31e479fd64ce98ffdb92c66f577f7.png]

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

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

#### 2. Vue的特点 ####

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

#### 3. Vue的引入方式 ####

1.  直接使用

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

1.  在页面中通过CDN的方式来引入；
    
        <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10"></script>

#### 4. 安装Vue Devtools ####

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

![在这里插入图片描述][9a053b76c35f4ccaaaf683baea04f1e9.png]

点击管理扩展

![在这里插入图片描述][53fdfa0d654f45feb33ac9ee485dad9f.png]

在搜索框中搜索vue

![在这里插入图片描述][36ac5f36866849e891aebea2566e5956.png]

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

![在这里插入图片描述][ceb667ac53794b79a15794e4e39094d9.png]

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

![在这里插入图片描述][545a4366922c40029fda4637a14d4ce8.png]

将这两个权限开放

#### 5. 第一个Vue案例 ####

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

![在这里插入图片描述][450c95dbd9a74f959371cb35da663f43.png]

<!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>
        <div id="root">
            <h1>hello,{
       {name}}</h1>
        </div>
        <script type="text/javascript" >
            Vue.config.productionTip = false;
            const x =new Vue({
          
                el:'#root',//指定el供哪个容器使用
                data:{
          
                    name:"world"//data中存储数据，供容器使用
                }
            })
        </script>
        
    </body>
    </html>

在浏览器打开我们编写的页面

![在这里插入图片描述][71b2f2c9e43545518b43027e4a0d4c85.png]

熟悉的`hello，world`映入眼帘，我们的Vue就可以正常使用啦。

[33a31e479fd64ce98ffdb92c66f577f7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/ca7c4229e0ba41c69763375979a847aa.png
[Vue]: https://v2.cn.vuejs.org/js/vue.js
[Vue Devtools]: https://v2.cn.vuejs.org/v2/guide/installation.html#Vue-Devtools
[9a053b76c35f4ccaaaf683baea04f1e9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/0472237598704f27832b581bcc7d5bc6.png
[53fdfa0d654f45feb33ac9ee485dad9f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/6443afa393b143ac8d6fe06ff1f3dd78.png
[36ac5f36866849e891aebea2566e5956.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/e3821923c3a54c1384018dca1f27197e.png
[ceb667ac53794b79a15794e4e39094d9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/f45d1369961548268d75ab9f47e576a5.png
[545a4366922c40029fda4637a14d4ce8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/a331e6362cd1448db5e46971d8fbb30c.png
[450c95dbd9a74f959371cb35da663f43.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/3c29ad11220d4eefa8fbd91e8b675def.png
[71b2f2c9e43545518b43027e4a0d4c85.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/8c150078162d47148b478512ad7f5493.png