【Vue】初识Vue,Vue简介及Vue Devtools配置 野性酷女 2024-04-03 12:17 23阅读 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` 会被注册为一个全局变量,这里的路径要根据自己的实际情况进行设置 <script type="text/javascript" src="../js/vue.js"></script> 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
还没有评论,来说两句吧...