极简Vue基础指令与方法

逃离我推掉我的手 2022-10-08 05:48 260阅读 0赞

## 前言： ##

最近感觉南方挺热的，走在路上能听见能听到很大声的蝉鸣。不过我喜欢蝉鸣。也喜欢夏天。最喜欢在夏天旅行。夏天，你好。ヽ(｡◕‿◕｡)ﾉﾟ  
 最近挺久没更新了，不如，就写篇vue基础的文章把。这是一篇极简Vue基础指令与方法的文章，快速回忆vue基础指令。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center]

### 看看目录： ###

*   *  前言：
     *   *  一.vue脚手架安装：
         *  二.页面基渲染 \{ \{x\}\}：
         *  三.属性渲染 v-bind：
         *  四.快速渲染 v-for：
         *  五.条件渲染 v-if，v-else，v-show：
         *  六.监听DOM事件 v-on：
         *  七.双向数据绑定 v-model：
         *  八.变量识别标签v-html：
         *  九.八大生命周期钩子函数：
         *  十.watch监听器：
         *  十一.watch深度监听：
         *  十二.持续更新，建议收藏
     *  总结：

### 一.vue脚手架安装： ###

**vue-cli让人们迅速搭建一个vue项目。**

1.先打开cmd终端，在终端回车执行如下命令，先全局安装@vue/cli脚⼿架⼯具。

npm install -g @vue/cli

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center 1]

安装完成之后，使⽤如下命令查看版本号：

vue --version

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center 2]  
2.进入一个位置创建项目，如我在D盘新建一个空文件夹ceshiItem，我要在里面建一个项目：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center 3]  
打开该目录下的终端，输入以下命令：

> vue create 项目名字

如，我建一个叫auroras的项目：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center 4]  
3.选一个项目，箭头代表选中的选项，上下键可以移动箭头，选好之后回车。选最后一个，回车，表示自己手动选择配置。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center 5]  
4.上下键移动，空格进行选中和不选中，选择如下4个，选完直接回车，Router是路由，vuex是状态机，Babel是编译，TypeScript是TypeScript支持，CSS Pre-processors是CSS预编译器（包括：SCSS/Sass、Less、Stylus）等等：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center 6]  
5.选择2.x回车，目前还是2.x版本的用得多，回车后输入y，再回车：

![在这里插入图片描述][20210622192408995.png_pic_center]  
6. 选择Babel等配置文件存放位置，第一个回车，然后出现是否记录以便下次使用该配置，输入y回车，然后为该配置起个名字，好下次直接选择该配置，我就起个auroras：

![在这里插入图片描述][2021062219291485.png_pic_center]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center 7]  
7. 等待项目初始化，初始化完成，/ceshiItem目录下有了auroras这个项目：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center 8]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center 9]  
8. 右键通过vscode方式打开auroras这个文件夹，在终端输入如下命令运行项目：

> npm run serve

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center 10]  
9.等待片刻，出现网址，浏览器输入第一个网址就是项目了：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center 11]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center 12]

1.  vue文件的初始模板如下，可将App.vue文件内容删除换成下面的开始学习：

<template>
     <div></div>
    </template>
    
    <script>
    export default { 
     data() { 
     return { 
     };
     },
     computed: { },
     methods: { },
     created() { },
     mounted() { }
    };
    </script>
    <style scoped>
    </style>

**其它：**  
**  到这就创建项目好了，其实还有个方法就是用vue可视化面板创建项目，我认为这个简单直观得多，打开本地cmd终端，输入命令 vue ui**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center 13]  
可视化面板：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center 14]  
使用可视化面板创建项目可以参考我另一篇文章，里面的第三点详细写有：https://auroras.blog.csdn.net/article/details/117536679

### 二.页面基渲染 \{ \{x\}\}： ###

在data中定义⼀个变量，通过 Mustache 语法 (双大括号：\{ \{xxx\}\} ) 可以将其内容快速渲染至页面：

核心语法：

> \{ \{ msg \}\}

定义一个msg变量：

data() { 
        return { 
          msg:'hello world'
        };
     },

渲染到页面上：

效果：

![在这里插入图片描述][20210620162411435.png_pic_center]  
在双大括号内部，还可以绑定 JavaScript 表达式，如下 :

看效果：

![在这里插入图片描述][20210620162824971.png_pic_center]

### 三.属性渲染 v-bind： ###

双大括号语法不能作用在 HTML attribute 上，遇到这种情况应该使⽤v-bind指令，简单点来说，就是比如有个div盒子，它有一个title属性，但这个值是什么，不确定，想用变量表示，行，在该属性前用v-bind指令绑定其再指定一个变量做为值:

核心语法：

> \{ \{ v-bind \}\}

如下：

定义title这个变量值为 你好呀：

data() { 
        return { 
          msg:'hello world',
          title: '你好呀'
        };
     },

效果：  
![在这里插入图片描述][20210620164157150.png_pic_center]

> 当然，v-bind这个单词是可以省略的，直接这样写 :title=“title”

### 四.快速渲染 v-for： ###

比如，我有一个数组，如 arr = \[1,2,3,4\]，我还有一个div盒子，我想在这个div里放4个子div，每个子div里放一个数字，一 一对应数组里的数据，那怎么写，下面这样吗？：

这样可以，但是万一有一千一万个数也这样？这样是不行的，所以可以用v-for指令根据数组内容动态渲染，先在data定义数组变量：

data() { 
        return { 
          arr: [1,2,3,4]
        };
     },

给要重复生成的子div盒子动态渲染：

> item指数组里的每个元素，名字自定义。in表示在哪个数组里，固定写法。in后面表示遍历哪个数组，我们这是arr。:key=“item” 表示索引值，就让当前item为索引值。

效果：

![在这里插入图片描述][20210620165723126.png_pic_center]

### 五.条件渲染 v-if，v-else，v-show： ###

v-if 指令用于条件性地渲染⼀个内容。这个内容只会在指令的表达式返回 true值的时候被渲染。 也可以与 v-else⼀起使用。如我有个div盒子，我想根据变量的值判断显不显示它：

<div>
        <div v-if="pan">我北极光之夜出来了</div>
     </div>

pan变量为假：

data() { 
        return { 
          pan: 0
        };
     },

看页面什么都无：  
![在这里插入图片描述][20210620170232399.png_pic_center]  
改变量为真：

data() { 
        return { 
          pan: 1
        };
     },

看，出来了：

![在这里插入图片描述][20210620170345348.png_pic_center]  
 配合v-else一起用，注意，v-if 与 v-else 同时使用时，v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后⾯，否则它将不会被识别：

data() { 
        return { 
          pan: 1
        };
     },

<div>
        <div v-if="pan">我北极光之夜出来了</div>
        <div v-else>北极光出来不了那我南极光出来了</div>
     </div>

看效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center 15]  
**v-show：**  
 另⼀个⽤于根据条件展示元素的选项是 v-show 指令。用法大致⼀样与 v-if ⼀样:

<div>
        <div v-show="pan">我北极光之夜出来了</div>
     </div>

data() { 
        return { 
          pan: 1
        };
     },

一样的效果：

![在这里插入图片描述][20210620171010574.png_pic_center]

>  既然如此，为啥既生v-if还生我v-show，是因为，v-if原理为元素生成和销毁达到效果，而v-show是通过控制样式的显示和隐藏达到效果。所以，某元素未来要频繁渲染用v-show，不频繁用v-if。

### 六.监听DOM事件 v-on： ###

以前在写原生 js 的时候，假如要给一个按钮绑定鼠标或键盘等事件，那么要先获取元素然后再绑定，而在vue里简单了操作，直接在标签里完成绑定，如给给一个按钮绑定点击事件：

直接在该DOM元素上写 v-on，后面跟着绑定什么事件，如我是click鼠标点击事件，双引号里要写执行的函数名字，如hand这个函数，且要在vue的 methods ：\{ \} 这个对象里写执行的函数，如：

methods: { 
       hand(){ 
         console.log('点我了');
       }
     },

效果：  
![在这里插入图片描述][20210620172149145.png_pic_center]

> v-on：这个可用@代替，如直接这样写 @click=“hand”  
> 同时，也可以传递参数，如 @click=“hand(e)”

### 七.双向数据绑定 v-model： ###

可以用 v-model 指令在表单 < input>、< textarea> 及 < select> 元素上创建双向数据绑定。就是如输入框的value值和vue实例里的一个变量能实时保持相同，不论谁改变同步更新。  
如,为该标签绑定msg这个变量，同时页面渲染出来看看：

> v-model=“变量名字”

定义这个变量：

data() { 
        return { 
          msg:""
        };
     },

看效果，输入后同步更新：  
![在这里插入图片描述][20210620172838661.gif_pic_center]

### 八.变量识别标签v-html： ###

如给div写上v-html等于一个变量msg：

定义msg值里放一个h1标签：

data() { 
     return { 
       msg:'<i>北极光之夜</i>'
     };

相当于直接给div生成了一个子标签 < i>北极光之夜< /i>：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center 16]

### 九.八大生命周期钩子函数： ###

我们把一个vue实例对象从生成（new）到被销毁（destory）的过程，称为生命周期。而生命周期函数，就是在某个时刻会自动执行的函数。

<table> 
 <thead> 
  <tr> 
   <th>函数</th> 
   <th>调用时间</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>beforeCreate</td> 
   <td>vue实例初始化之前调用</td> 
  </tr> 
  <tr> 
   <td>created</td> 
   <td>vue实例初始化之后调用</td> 
  </tr> 
  <tr> 
   <td>beforeMount</td> 
   <td>挂载到DOM树之前调用</td> 
  </tr> 
  <tr> 
   <td>mounted</td> 
   <td>挂载到DOM树之后调用</td> 
  </tr> 
  <tr> 
   <td>beforeUpdate</td> 
   <td>数据更新之前调用</td> 
  </tr> 
  <tr> 
   <td>updated</td> 
   <td>数据更新之后调用</td> 
  </tr> 
  <tr> 
   <td>beforeDestroy</td> 
   <td>vue实例销毁之前调用</td> 
  </tr> 
  <tr> 
   <td>destroyed</td> 
   <td>vue实例销毁之后调用</td> 
  </tr> 
  <tr> 
   <td>北极光之夜。</td> 
   <td>北极光之夜。</td> 
  </tr> 
 </tbody> 
</table>

生命周期详细文章[地址][Link 1]：https://auroras.blog.csdn.net/article/details/117658191

### 十.watch监听器： ###

Vue 通过 watch 选项提供了⼀个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。例子如下：

比如我有一个input输入框，v-model双向绑定一个一个变量monitor：

声明该变量，空字符串就好：

data() { 
     return { 
       monitor:""
     };

关键来了，假如我想monitor这个变量的值一改变，就能自动识别到它的改变并执行某些操作要咋办，这就用到监听器了 watch：\{…\}了。他跟data（）\{…\}和methods：\{…\}这些是同一级别的。

如监听monitor，它的值一改变就触发在控制台输出“666666”这个操作：  
![在这里插入图片描述][20210622202930434.gif_pic_center]

data() { 
     return { 
       monitor:""
     };
     },
     watch:{ 
       monitor:function(){ 
          console.log(6666);
       }
     },
     ......略

在watch为monitor声明一个函数，当monitor值一改变，将会自动执行函数里的内容。  
 看效果：  
![在这里插入图片描述][20210622202951688.gif_pic_center]

### 十一.watch深度监听： ###

当改变⼀个对象的某个属性，需要触发监听事件时，使用第十点的基本监听可能无法触发事件，此时可以使用深度监听。

如有一个对象 people：\{name：‘Aurora’，age：18\}，有一个按钮，当点击该按钮时，触发事件改变 people.age 的值，监听器监听到people改变时，输出‘6666666’：

先写一个按钮和点击事件：

<template>
     <div>
       <button @click="change">BTN</button>
     </div>
    </template>
    
    <script>
    export default { 
     data() { 
     return { 
       //对象
       people:{ name:'auroras',age:18}
     };
     },
     methods: { 
       //点击事件
       change(){ 
         this.people.age = 20;
       }
     },
     。。。略

深度监听写法如下，handler:function（）\{…\} 和 depp:true 都是固定写法，如下：

watch:{ 
        监听的对象的名字:{ 
          handler:function(){ 
             。。。这里面写要执行的操作。。。
          },
          deep:true
        }
     },

监听people对象里的age值改变，输出6666：

watch:{ 
        peopel:{ 
          handler:function(){ 
             console.log(6666);
          },
          deep:true
        }
     },

看效果：

![在这里插入图片描述][20210622205006211.gif_pic_center]

### 十二.持续更新，建议收藏 ###

## 总结： ##

下次见啦~

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center 17]

其它文章：  
**~关注我看更多简单创意特效：**  
[文字烟雾效果 html+css+js][html_css_js]  
[环绕倒影加载特效 html+css][html_css]  
[气泡浮动背景特效 html+css][html_css 1]  
[简约时钟特效 html+css+js][html_css_js 1]  
[赛博朋克风格按钮 html+css][html_css 2]  
[仿网易云官网轮播图 html+css+js][html_css_js 2]  
[水波加载动画 html+css][html_css 3]  
[导航栏滚动渐变效果 html+css+js][html_css_js 3]  
[书本翻页 html+css][html_css 4]  
[3D立体相册 html+css][3D_ html_css]  
[霓虹灯绘画板效果 html+css+js][html_css_js 4]  
[记一些css属性总结（一）][css]  
[Sass总结笔记 ][Sass_]  
…等等  
[进我主页看更多~][Link 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center]: /images/20221005/f30d25fe3ebc452db7d0674a3ce2982c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221005/35727bb0169c4d8d8ad4948ea3f649fb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221005/1382c9e0c1a348e6800d837c3da68bd3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221005/f001ef3fba124bfe8511fb8dea03a16a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221005/b9b476591a8044219913fc087497c037.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221005/fd5b63b90d4841c1bcfe20cfd7a10966.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221005/1f8280d1baaf4c44a4a7f134f8aa5d32.png
[20210622192408995.png_pic_center]: /images/20221005/0b15d98fb6b94642aa4ab1d7eb9866b1.png
[2021062219291485.png_pic_center]: /images/20221005/8ae1ca09de914457991cddbc3ffd66bd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20221005/00b3408c9a604635942d246daed4e888.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center 8]: /images/20221005/adea816824de4158b47254bb8f427211.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center 9]: /images/20221005/2ac18a2496404875adf8d90d344a612e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center 10]: /images/20221005/5da2ad2b3e4f4ddeac5ff9c5ca29d416.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center 11]: /images/20221005/73a4025dc28348be9a9e6724a9534659.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center 12]: /images/20221005/8218bd8ddbd440f09255e3b61e2d0455.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center 13]: /images/20221005/2ae329733b534441aca99c265a2a02d7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center 14]: /images/20221005/fe16682ce81b4100a0e9d1122429b148.png
[20210620162411435.png_pic_center]: /images/20221005/f8772db0d19b4a728bbec4b35c7651a5.png
[20210620162824971.png_pic_center]: /images/20221005/1b0a25cddcc340c9a24705aa0d3d1d9c.png
[20210620164157150.png_pic_center]: /images/20221005/83ef87ef37cf42c791576105cbffd659.png
[20210620165723126.png_pic_center]: /images/20221005/360242550b924897ae3bd505830fad95.png
[20210620170232399.png_pic_center]: /images/20221005/61806ccfc2e1412784ab59e65210f7ed.png
[20210620170345348.png_pic_center]: /images/20221005/29b8e9705cf14a70a4e19c82bb52d7ee.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center 15]: /images/20221005/8bbad6882ccd45b49034dd38ebeb28d1.png
[20210620171010574.png_pic_center]: /images/20221005/d4fe8804a8a945e2a1bc9bb807236dba.png
[20210620172149145.png_pic_center]: /images/20221005/6569062b8ffa4ff08ca32f4faaca7268.png
[20210620172838661.gif_pic_center]: /images/20221005/0d813a86ea2f4764957ba6b9ed08f0a7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center 16]: /images/20221005/d3734bc126124ed98aaefb81c519eb8b.png
[Link 1]: https://auroras.blog.csdn.net/article/details/117658191
[20210622202930434.gif_pic_center]: /images/20221005/3cbc84ed6180413ba8bda4d755d07086.png
[20210622202951688.gif_pic_center]: /images/20221005/40db654c735147368a34a6e0053e298f.png
[20210622205006211.gif_pic_center]: /images/20221005/93f912c39e254f44bfaccad61e8a0b7e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center 17]: /images/20221005/f8d38e918b534fd78ae01eb81c001833.png
[html_css_js]: https://blog.csdn.net/luo1831251387/article/details/116452424
[html_css]: https://blog.csdn.net/luo1831251387/article/details/115534417
[html_css 1]: https://blog.csdn.net/luo1831251387/article/details/113657124
[html_css_js 1]: https://blog.csdn.net/luo1831251387/article/details/113436552
[html_css 2]: https://blog.csdn.net/luo1831251387/article/details/113360844
[html_css_js 2]: https://blog.csdn.net/luo1831251387/article/details/114393724
[html_css 3]: https://blog.csdn.net/luo1831251387/article/details/111714413
[html_css_js 3]: https://blog.csdn.net/luo1831251387/article/details/111601962
[html_css 4]: https://blog.csdn.net/luo1831251387/article/details/111398881?spm=1001.2014.3001.5502
[3D_ html_css]: https://blog.csdn.net/luo1831251387/article/details/111032274?spm=1001.2014.3001.5502
[html_css_js 4]: https://blog.csdn.net/luo1831251387/article/details/114338506
[css]: https://blog.csdn.net/luo1831251387/article/details/111320280
[Sass_]: https://blog.csdn.net/luo1831251387/article/details/113179630
[Link 2]: https://blog.csdn.net/luo1831251387?spm=1000.2115.3001.5343