【vue系列-01】vue初级入门以及demo实现详解

梦里梦外; 2024-03-30 09:46 90阅读 0赞

#### vue的初级入门 ####

*  1，vue是什么
 *  2，vue的特点
 *   *  2.1，采用组件化模式
     *  2.2，声明式编码
     *  2.3，虚拟DOM + Diff算法
 *  3，vue的环境的基本配置和使用
 *   *  3.1，在浏览器安装开发工具
     *  3.2，开发环境
     *  3.3，demo实现

## 1，vue是什么 ##

其官网如下：[https://cn.vuejs.org/][https_cn.vuejs.org]  
![在这里插入图片描述][e6b6b4cdbe754f898720e9d803a7464b.png]

Vue (读音 /vjuː/，类似于 **view**) 是一套用于构建用户界面的**渐进式框架**。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与[现代化的工具链][Link 1]以及各种[支持类库][Link 2]结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

vue是一套用于构建用户界面的渐进式的javaScript的一个框架，就是可以将从后台获取到的数据，变成用户可以看到的界面。

**渐进式**： 可以自底向上逐层应用，就是说如果只需要简单的进行一个开发，那么只需要引入一个轻量小巧的核心库，如果是要进行一个复杂应用的开发，那么就可以引入各式各样的Vue的插件库。渐：逐渐；进：递进。总而言之就是一句话：简单开发可以只提供简单配置，其配置难度可以随着开发复杂度的递进而递增。

## 2，vue的特点 ##

### 2.1，采用组件化模式 ###

提高代码复用率，且让代码更好维护。如下面的这种图片，就是可以将整个大的模块拆分成多个小模块，然后每个小模块之间分开管理，这样就可以实现模块的复用率，同时也可以实现模块与模块之间的高内聚，低耦合；在单独的修改一个小组件的布局的时候，也不会影响其他组件的布局，这样可以让代码更好的进行一个维护，如果哪里出了问题，只需要定位到这一个小模块即可。  
![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-e58ro8XY-1671182972129)(img/1671157682444.png)\]][img-e58ro8XY-1671182972129_img_1671157682444.png]

### 2.2，声明式编码 ###

让编码人员不需要直接操作DOM，较少命令式编码，提高开发效率。就是将原先要手动的一些操作，直接使用内部的一些命令即可。原先获取后端返回给前端的数组，需要定义一个字符串，然后手动遍历，然后在获取值，但是在使用这个Vue之后，直接使用 v-for 就可以实现遍历了，就类似于将对原先的手动要写的东西做一个内部封装，然后开发人员直接去使用即可。

### 2.3，虚拟DOM + Diff算法 ###

通过使用虚拟的DOM和优秀的Diff算法，可以尽量的实现DOM结点之间的复用。 在原先的写法中，可能需要通过遍历加字符串的写法获取数据，并且在获取数据之后，直接将真实的DOM展示在页面上。如果这个数组的值发生了部分改变，如以下追加一条数据，那么这个list需要获取一个新的值，就类似于直接将原先的三个数的数据先删除，然后再新增四个数据。

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OsMDpSig-1671182972134)(img/1671159086309.png)\]][img-OsMDpSig-1671182972134_img_1671159086309.png]

但是如果使用vue就不一样了，在获取数据和页面中间会加一层，就叫虚拟的DOM，相当于做一个标志，提前存一些展示在真实DOM页面上的数据，最后将这个虚拟的DOM的数据存到真实的DOM所在的页面上。这样的好处就是，vue不像原生的js一样，直接进行替换，即需要先全部删除，后再将数据全部添加，而是直接对原先的数据做一个虚拟存储，如果发现要新增的数据在这个虚拟内存中存在，那么就省去这个删除的操作，而是直接将那些不在虚拟DOM中的数据加入到这个虚拟DOM中，这样就实现了追加数据的功能，从而提高这个数据展示的效率。

而在这个虚拟DOM中，主要是采用这个 \*\* \*\* 来实现数据的对比的，判断新的DOM和旧的的DOM的值是否一样，如果一样，那么就可以直接实现复用。

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5HCySVn0-1671182972136)(img/1671159017415.png)\]][img-5HCySVn0-1671182972136_img_1671159017415.png]

## 3，vue的环境的基本配置和使用 ##

### 3.1，在浏览器安装开发工具 ###

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

根据这个[https://devtools.vuejs.org/guide/installation.html][https_devtools.vuejs.org_guide_installation.html]，下载对应的浏览器的插件，这边建议使用谷歌浏览器，因此下载谷歌浏览器的插件即可。

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XGlAAiCH-1671182972137)(img/1671171622181.png)\]][img-XGlAAiCH-1671182972137_img_1671171622181.png]

要是不想下载，可以直接可以在百度网盘下载：https://pan.baidu.com/s/12UYrxhxHPaJJiriIv-H94Q ，提取码为：1234 。将下载好的这个插件安装在浏览器上即可。也可以将这个插件固定在浏览器旁边，方便打开和使用

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

安装成功之后，需要在这个扩展应用程序中，打开访问文件网址的这个按钮，这样这个vue插件就可以正常的使用了。

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

### 3.2，开发环境 ###

在开发之前需要提前安装一下 **nodejs** 环境，然后安装一下vue那些，可以参考一下别人的博客。我这边已经提前安装好了。

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

开发工具可以选择HBuilder，VScode等，我这边选择VScode。然后下载安装官网上面的开发版本  
![在这里插入图片描述][5ecaa8b53fcf41929fa7b54699f26c21.png]

下载完成之后，将下载的js文件拖到这个VScode中，这里专门新建一个js的文件夹，用于存放js文件。  
![在这里插入图片描述][ea0357a2b46740d99c5fa216316ea873.png]

然后简单的编写一段代码，

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>初始vue</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        
    </body>
    </html>

随后在VScode中安装一个 **open in browser** 的插件，安装完成之后在对应的html中右键找到这个Open In Default Browser，最好将这个谷歌浏览器设置为默认的浏览器，点击之后就可以跳转到对应的页面了。

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

有一说一，写习惯了java，突然用这个前端开发工具还真不习惯，一直以为是那个地方出了问题，在控制台没有显示vue的信息，后来发现前端写完得 **ctrl + s** 保存。然后点右键击 **Open In Default Browser**，就可以跳转到浏览器了。其主要信息如下  
![在这里插入图片描述][7b1a39e51d2144afb497b8161f9f0105.png]

然后在控制台输入**Vue.config** ，就出现了一下的画面，那么这个Vue的基本开发环境就有了

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

### 3.3，demo实现 ###

将上面的代码进行一个优化，新增一个小需求，将vue和具体的容器绑定，然后在vue实例中将具体的值传给对应的容器中。并且在编码的时候，需要注意的是容器和实例是一对一的，如果出现多个实例对一个容器或者一个实例对应多个容器的时候，那么会出现报错或者数据获取失败的情况。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>初始vue</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        
        <div id="root">
            
            <h1 id="c">hello {
       {name}}</h1>
            <h1 id="c">age {
       {age}}</h1>
        </div>
        
        <script type="text/javascript" >
            Vue.config.productionTip = false    //阻止vue启动时提示生产提示
            new Vue({
          
                //指定当前实例为哪个容器服务，id对应#，class对应.
                el:'#root',
                //data用于存储数据，只有el对应的容器可以使用
                data:{
          
                    name:'zhenghuisheng',
                    age:'18'
                }
            })
        </script>
        
    </body>
    </html>

其结果如下，那么这个简单的demo就实现了。

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

然后这里的值是写死的，如果想要动态的操作这个data里面的值，就可以利用刚刚安装的这个 **devtools** 工具了，依旧是在这个控制台旁边，点击到vue这个结点时，就会出现如下画面，然后点击这个根路由就会出现右边的data数据了。

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

然后可以直接在这个data这里进行一个值的修改  
![在这里插入图片描述][56a8a475b0dd4fecb43f8dbc7dfd2e4e.png]

修改完点击保存之后，右边的值也随着修改了。  
![在这里插入图片描述][eec91c2fa7a14c77bd1e3e4f265d9ca1.png]

这样vue的入门级别的demo初步完成。

[https_cn.vuejs.org]: https://cn.vuejs.org/
[e6b6b4cdbe754f898720e9d803a7464b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/17ccae98f82149a68b72e8d90182c476.png
[Link 1]: https://vuejs.bootcss.com/guide/single-file-components.html
[Link 2]: https://github.com/vuejs/awesome-vue#libraries--plugins
[img-e58ro8XY-1671182972129_img_1671157682444.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/9dda5f92c38b402b80f3f3e767dd32b1.png
[img-OsMDpSig-1671182972134_img_1671159086309.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/5572f02f6eba44859151a0d1afcba5bc.png
[img-5HCySVn0-1671182972136_img_1671159017415.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/0c6642a49a6b4c6b8b0519a162399f19.png
[bd2dea74f3744f4fa8761fc1afcc2d72.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/4101061f7f7b4bf181aa27f0ffad9e64.png
[https_devtools.vuejs.org_guide_installation.html]: https://devtools.vuejs.org/guide/installation.html
[img-XGlAAiCH-1671182972137_img_1671171622181.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/32d8aba1f1044393ab373ff7845fa806.png
[4e52b1b37f0f4e57bda38495ff736b9b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/5613d1ddc32642299ce8f7f617af69c8.png
[0e916d97e4ed466aa5d30822ccb91137.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/8385a074eb53426787e925a43abd4fc7.png
[e2a4806714214e79a85d2479514b5658.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/199f748b20344183b939c45bbba21e1b.png
[5ecaa8b53fcf41929fa7b54699f26c21.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/cbb20e93300045cf8a23dea8d8c8650e.png
[ea0357a2b46740d99c5fa216316ea873.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/03c4d640d1fe4aea8ac6502b4f1bfcec.png
[356baa567ec148b9a7791fe3d6b5b28f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/2589ce8461884ca7a613ffc49b3cd349.png
[7b1a39e51d2144afb497b8161f9f0105.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/1e43ff5d81dd4904aa13969b32200ba8.png
[82e4d93ea462493e99b076596626417a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/77b0120c52df40ca820131bf5a0ebb1b.png
[6cda1c1cfa364040b0072ad691e7efa2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/c73cdb90302649ef83fdfcb09fdddab7.png
[49e541823af44044a2f250cb18d362d2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/20236ab584484fbf9c546f1f17f127dd.png
[56a8a475b0dd4fecb43f8dbc7dfd2e4e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/e5c01f5294754dd09dfc324d168ff5af.png
[eec91c2fa7a14c77bd1e3e4f265d9ca1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/4b08a949caa2424eb83d63c0e5808677.png