Vue学习—Vue的安装与使用

爱被打了一巴掌 2024-04-01 13:37 65阅读 0赞

#### 文章目录 ####

*  一.vue简介
 *   *  1.1 vue概念
     *  1.2 vue的特点
 *  二.搭建vue环境
 *   *  2.1 安装vue
     *  2.2 安装谷歌vue扩展程序
     *  2.3 修改Vue的全局配置文件
 *  三.Hello入门案例
 *   *  3.1 需求
     *  3.2 代码
     *  3.3 实验结果
 *  四.案例原理分析

## 一.vue简介 ##

### 1.1 vue概念 ###

> vue是一套用于构建用户界面的渐进式（自底向上逐层的应用）Javascript框架

### 1.2 vue的特点 ###

1.  采用组件化（一个.vue文件就是一个组件）的模式，提高代码复用率、且让代码更好维护
2.  声明式编码，让编码人员无需直接操作DOM，提高开发效率
3.  使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点  
    ![在这里插入图片描述][c6675bdfbae14e05aa7c4e42ae17361a.jpeg]官网页面![在这里插入图片描述][3aeb24ddd8af43d6aa6c28cb59ef391f.png]

## 二.搭建vue环境 ##

### 2.1 安装vue ###

1.  在HTML中

<!doctype html>d
    <html>
    <head>
    <script type="text/javascript" src="vue.js"></script>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    </head>
    
    <body>
    </body>
    </html>

1.  使用CDN安装

### 2.2 安装谷歌vue扩展程序 ###

> 无法访问谷歌商店的可以网上下载以后直接拖到谷歌浏览器中

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

### 2.3 修改Vue的全局配置文件 ###

> vue的全局配置文件为vue.config

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

> 修改配置文件内容

## 三.Hello入门案例 ##

### 3.1 需求 ###

> 生成一个div容器，容器内容为hello ()，使用vue自动生成括号里面的内容

### 3.2 代码 ###

### 3.3 实验结果 ###

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

## 四.案例原理分析 ##

> 创建一个vue对象，通过指定el来与相关的html容器管理（这里的容器的获取用的是css的对象选择器），然后指定的容器对象就可以使用vue对象提供的数据，Vue对象和容器只能是一一对应的关系

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

[c6675bdfbae14e05aa7c4e42ae17361a.jpeg]: https://img-blog.csdnimg.cn/c6675bdfbae14e05aa7c4e42ae17361a.jpeg
[3aeb24ddd8af43d6aa6c28cb59ef391f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/8abf2d983c4c4e5abb1e05f2014b786e.png
[7d174ec563914fdd836490bc956ecd40.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/d41df6c6327947e7a74cce4c4aa210ad.png
[b2fdba6c7e714faa97d388ee7156a6a7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/d1d578ac6d8a4d21a1c93137c714ad92.png
[016b43b4912445309dab3dfb7d76d5fd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/bf56fa807c7a4a0f9464d0a3ce4e09b2.png
[ddbcc3b775604b5890e96047228e4b3d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/f6d330e7fc014e5fb712f3bc7e977f5d.png