Vue快速入门以及基础标签使用

梦里梦外; 2023-10-11 22:37 45阅读 0赞

#### 目录 ####

*   *  开始示例
     *   *  el挂载点
         *  data数据对象
     *  vue基本标签
     *   *  v-text
         *  v-html
         *  v-on
         *  计数器示例实现
         *  v-show
         *  v-if
         *  v-bind
         *  图片切换示例
         *  v-for
         *  v-on补充
         *  v-model
     *  axios网络请求
     *   *  axios基本使用
         *  vue中使用axios

### 开始示例 ###

1.首先在html页面中引入vue的生产环境，在body标签中粘上下面代码

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

--------------------

2.来搞一个入门实例，具体如下。

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

--------------------

#### el挂载点 ####

大括号包含的部分会被data中同名的数据给替换  
![在这里插入图片描述][e4d61b6aac73442d9d3ab7f9a50e7e92.png]

也可以使用class选择器，不过建议使用id选择器，因为id在实际开发中是唯一的  
![在这里插入图片描述][aa5ab94288664bb8827776590d92a60d.png]

Vue会管理el选项命中的元素及其内部的后代元素

其实不用div标签可以匹配外，用p标签也可以使用的。前提是 id 和 el 匹配的上。但是只能支持双标签，比如p, h1, head等（不支持html和body标签）。

--------------------

#### data数据对象 ####

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

data中写对象如下：  
![在这里插入图片描述][923ca56a8ae24480b3db9f2de9ae80c6.png]  
![在这里插入图片描述][1fc3536c55a2453ca704f07bc9d860fb.png]  
展示对象类型的数据，可以直接用定义的对象名.属性的方式。  
比如  
`{ { student.name }} { { student.age }}`  
这样就可以直接调用对象的属性并展示了。

对于data中声明的数组，使用方式如下所示：

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

使用方式：  
`{ { 数组名[0] }}` 这是直接展示数组中的第一个元素。

--------------------

### vue基本标签 ###

#### v-text ####

设置标签的文本值(textContent)

<h2 v-text="message">hello, world!</h2>

它会把好h2中的内容给替成text的message的内容  
示例如下：  
![在这里插入图片描述][33c110b1982a4bb78080c29d6296f7ac.png]

也可以使用插值表达式的方式，来实现拼接字符串。

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

结果如下

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

--------------------

也可以使用下面这种方式来进行插值表达式

<body>
        <div id="app">
            <h2 v-text="'hello ' + message"></h2>
            <h2>{
        {
        "hello " + message}}</h2>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            var app = new Vue({
        
                el:"#app",
                data:{
        
                    message:"Chain"
                }
            })
        </script>

![在这里插入图片描述][1775b00054b749cd9376d88786ec250f.png]  
结果如下所示  
![在这里插入图片描述][f711b96bd8d545b88ebddb5dfd3c4d72.png]

--------------------

*  v-text指令的作用是:设置标签的内容(textContent)
 *  默认写法会替换全部内容,使用差值表达式\{份\}可以替换指定内容

--------------------

#### v-html ####

主要作用是把标签中的html代码给渲染出来，而不是纯文本

<body>
        <div id="app">
            <p v-html="content"></p>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            var app = new Vue({
        
                el:"#app",
                data:{
              
                    content:"<a href='https://www.baidu.com/'>屌毛是你</a>"
                }
            })
        </script>
    </body>

结果如下：渲染成链接，可以点击跳转了

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

**v-html指令的作用是:设置元素的innerHTML内容中有html结构会被解析为标签  
v-text指令无论内容是什么,只会解析为文本**

--------------------

#### v-on ####

为元素绑定事件  
![在这里插入图片描述][b9a1174aa8ea4f07a5b769ec0384f35d.png]

示例代码如下所示：

<body>
        <div id="app">
            <input type="button" value="单击事件" v-on:click="doIt">
            <input type="button" value="单击事件" @click="doIt">
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            var app = new Vue({
        
                el:"#app",
                methods:{
        
                    doIt:function(){
        
                        alert("are you 叼毛");
                    }
                }
            })
        </script>
    </body>

演示结果如下：  
![在这里插入图片描述][321bcfb23534432d8c3ebb43cc9d42aa.png]  
但是一般使用不会这么简单，而是配合各种函数和各种关键字，如下

<body>
        <div id="app">
    
            <input type="button" value="单击事件" v-on:click="doIt">
            <input type="button" value="单击事件" @click="doIt">
            <input type="button" value="双击事件" @dblclick="doIt">
    
            <h2 @click="changeFood">{
        {
         food }}</h2>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            var app = new Vue({
        
                el:"#app",
                data:{
        
                    message:"Chain",
                    content:"<a href='https://www.baidu.com/'>屌毛是你</a>",
                    food:"石头拌稀饭"
                },
                methods:{
        
                    doIt:function(){
        
                        alert("are you 叼毛");
                    },
                    changeFood:function(){
        
                        this.food += "炒鸡好吃！"
                    }
                }
            })
        </script>
    </body>

![在这里插入图片描述][df210084278541e1b75163cfbd615436.png]  
![在这里插入图片描述][2b3a543ee4b24e09bc3423dcf6288497.png]

--------------------

*  v-on指令的作用是:为元素绑定事件
 *  事件名不需要写on
 *  指令可以简写为@
 *  绑定的方法定义在methods属性中

--------------------

#### 计数器示例实现 ####

大概实现一个这种效果

![在这里插入图片描述][cb8f21067f0044b288e68cd2a11f9ae1.png]  
实现步骤逻辑：

1.data中定义数据:比如num  
2.methods中添加两个方法:比如add(递增),sub(递减)  
3.使用v-text将num设置给span标签  
4.使用v-on将add,sub分别绑定给+,-按钮  
5.累加的逻辑:小于10累加,否则提示  
6.递减的逻辑:大于0递减,否则提示

<body>
        <div id="app">
            <button @click="sub">-</button>
            <span>{
        {
         num }}</span>
            <button @click="add">+</button>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            var app = new Vue({
        
                el:"#app",
                data:{
        
                    num:1
                },
                methods:{
        
                    add:function(){
        
                        if(this.num < 10){
        
                            this.num++;
                        }else{
        
                            alert("最大为10，叼毛别点了");
                        }                    
                    },
                    sub:function(){
        
                        if(this.num > 0){
        
                            this.num--;
                        }else{
        
                            alert("不能为负");
                        }
                    }
                }
            })
        </script>
    </body>

结果如下：

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

--------------------

> **注意事项如下所示**

*  创建Vue示例时:el(挂载点),data(数据),methods(方法)
 *  v-on指令的作用是绑定事件,简写为@
 *  方法中通过this,关键字获取data中的数据
 *  v-text指令的作用是:设置元素的文本值,简写为\{ \{\}\}

--------------------

#### v-show ####

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

实现代码如下：（懂得都懂啊，可以根据年龄来显示或隐藏某些东西）

<body>
        <div id="app">
            <input type="button" value="切换限制级别" @click="man">
            <input type="button" value="切换青少年级别" @click="boy">
            <img v-show="age >= 18" src="https://img1.mydrivers.com/img/20230305/e103b86e-b368-45bb-93aa-8e4d51964fe2.png">
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            var app = new Vue({
        
                el:"#app",
                data:{
        
                    age:16
                },
                methods:{
        
                    man:function(){
        
                        this.age = 18;
                    },
                    boy:function(){
        
                        this.age = 16;
                    }
                }
            })
        </script>
    </body>

效果如下图

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

回归正题，它这个v-show标签本质上还是切换了style的display属性，给切换成none了

--------------------

> **注意事项**

*  v-show指令的作用是:根据真假切换元素的显示状态
 *  原理是修改元素的display,实现显示隐藏
 *  指令后面的内容,最终都会解析为布尔值
 *  值为true元素显示,值为false元素隐藏
 *  数据改变之后,对应元素的显示状态会同步更新

--------------------

#### v-if ####

v-if和v-show其实差不多，都是来控制元素显示或隐藏的。语法如下所示

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

演示代码

<body>
        <div id="app">
            <p v-if="isShow">叼毛</p>
            <input type="button" value="切换显示" @click="change">
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            var app = new Vue({
        
                el:"#app",
                data:{
        
                    isShow:false
                },
                methods:{
        
                    change:function(){
        
                        this.isShow = !this.isShow;
                    }
                }
            })
        </script>
    </body>

演示结果  
![在这里插入图片描述][8a75ef146b0f4b639854fc67a2c4294f.png]

v-show和v-if二者的区别在于，切换时，v-if在修饰不显示时，会直接将标签移除，而v-show只是改变了style标签的状态。  
下图可以清楚的看出切换时两种标签修饰的变化  
![在这里插入图片描述][be6dbeddbac143e38d180219f698ae48.png]

--------------------

> **频繁切换的元素用v-show，因为v-if会修改dom树，而v-show只是操作样式，所以v-show性能更好，但是v-show的隐藏元素还是会展示，会有不安全的问题。**

*  v-if指令的作用是:根据表达式的真假切换元素的显示状态
 *  本质是通过操纵dom元素来切换显示状态
 *  表达式的值为true,元素存在于dom树中,为false,从dom树中移除
 *  频繁的切换v-show,反之使用v-if,前者的切换消耗小

--------------------

#### v-bind ####

> **语法：v-bind:属性名=表达式**

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

这个v-bind也是可以省略的。如下所示，两种方式都是可以的

<body>
        <div id="app">
            <img v-bind:src="imgSrc" alt="">
            <img :src="imgSrc" alt="" :title="imgtitle+'!!!'">      
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            var app = new Vue({
        
                el:"#app",
                data:{
        
                    imgSrc:"https://img0.baidu.com/it/u=340747937,2651100772&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889",
                    imgtitle:"可可奈奈"
                }
            })
        </script>
    </body>

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

这个title标签是鼠标悬停是显示文本的，设置后第二张图悬停会显示title文本，第一张没显示。由上面那段代码也可以看出来，这个title也是可以字符串拼接的。  
`:title="imgtitle+'!!!'"`

--------------------

`<img :src="imgSrc" alt="" :title="imgtitle+'!!!'" :class="{active:isActive}" @click="toggleActive">`  
这个标签的class，也就是active是否生效取决于isActive是true还是false

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

--------------------

#### 图片切换示例 ####

这个示例把前面学的都综合了起来，是一个不错的demo，实现效果，点击左边箭头，切换到前一张图；点击右边箭头，切换到后一张图，在第一张图上隐藏左箭头，在最后一张图上隐藏右箭头。  
![在这里插入图片描述][d66b7dfeaf844bed9e87f482d909029e.png]

它的实现步骤如下

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

解释：写JavaScript：void（任意数字）可以让超链接不跳转

<body>
      <div id="mask">
        <div class="center">
          <h2 class="title">
            <img src="./images/logo.png" alt="">
          </h2>
          
          <img :src="imgArr[index]" alt="" />
          
          <a href="javascript:void(0)" v-show="index!=0" @click="prev" class="left">
            <img src="./images/prev.png" alt="" />
          </a>
          
          <a href="javascript:void(0)" v-show="index<imgArr.length-1" @click="next" class="right">
            <img src="./images/next.png" alt="" />
          </a>
        </div>
      </div>
    
      <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    
      <script>
        var app = new Vue({
        
          el: "#mask",
          data: {
        
            imgArr: [
              /* 添加图片路径 */
              "./images/00.jpg",
              "./images/01.jpg",
              "./images/02.jpg",
              "./images/03.jpg",
              "./images/04.jpg",
              "./images/05.jpg",
              "./images/06.jpg",
              "./images/07.jpg",
              "./images/08.jpg",
              "./images/09.jpg",
              "./images/10.jpg",
            ],
            /* 数组索引 */
            index: 0
          },
          methods: {
        
            prev:function(){
        
              this.index--;
            },
            next:function(){
        
              this.index++;
            }
          },
        })
      </script>
    </body>

--------------------

#### v-for ####

用于遍历数组的，来自动生成列表结构，可以理解为复制粘贴，自动遍历数组，并把元素数据依次绑定展示

如下图分析

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

> 注：上面的 `:title`是使用的v-bind，给它设置一个tiele属性，只不过可以省略成:title；然后\{ \{index\}\}就是取数组下标的意思

实际使用示例：  
先上代码

<body>
        <div id="app">
            <ul>
                <li v-for="item in arr">
                    人称：{
        {
        item}}
                </li>
                
            </ul>
            <h2 v-for="i in food">
                {
        {
        i.name}}
            </h2>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    
        <script>
            var app = new Vue({
        
                el:"#app",
                data:{
        
                    arr:["你","我","他"],
                    food:[
                        {
        name:"石头拌稀饭"},
                        {
        name:"黄沙炒米饭"}
                    ]
                }
            })
        </script>
    </body>

演示结果如下图：  
![在这里插入图片描述][8cf993aedfa14d32a4194ac3f7954177.png]

> 其实通过上面那个示例，应该会明白，v-for的使用了，也就是遍历数据元素，以同一种格式呈现出来

我们在对其加上两个点击方法，使用v-on指令来绑定  
![在这里插入图片描述][87612ad974584700b7e176982762df32.png]  
效果如下图：  
![在这里插入图片描述][50c9dc0126a646c48b098de06c3a242d.png]

原理很简单：加菜方法就是向数组中新增加元素，然后由于v-for标签，都给遍历出来了  
而减餐方法同理，使用shift方法，每次移除数组最左侧元素，就无法遍历到该元素，自然就不显示了

v-for可以十分方便的帮助我们生成一个列表。

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

--------------------

#### v-on补充 ####

传递自定义参数，事件修饰符  
![169eb4644810465c9deb77b39d4466fa.png][]

> 使用示例：

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

验证结果如下：

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

--------------------

另一个示例，根据键盘的回车键来触发弹窗  
![在这里插入图片描述][9bca71fd5fbd4d8885765eca7560d7ac.png]

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

--------------------

#### v-model ####

获取和设置表单元素的值（双向数据绑定）

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

> 演示示例

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

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

--------------------

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

--------------------

### axios网络请求 ###

#### axios基本使用 ####

使用axios时需要联网并且引入官网提供的 axios 在线地址  
请求库的基本语法，它其实是对Ajax的一个封装

分为两个，响应成功执行的回调函数和响应失败执行的回调函数，具体如下图

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

`post请求中，第一个参数是url的地址，第二个参数是post的数据`

下面以这两个接口文档来做示范  
![在这里插入图片描述][4c20dbc9349b4421935f15d3f2eba2c5.png]

示例代码（没用vue,用的原生的js）

<body>
        <input type="button" value="get请求" class="get">
        <input type="button" value="post请求" class="post">
        
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
        <script>
            /*
                接口1:随机笑话
                请求地址:https://autumnfish.cn/api/joke/list
                请求方法:get
                请求参数:num(笑话条数,数字)
                响应内容:随机笑话
            */
            document.querySelector(".get").onclick = function () {
        
                axios.get("https://autumnfish.cn/api/joke/list?num=6")
                // axios.get("https://autumnfish.cn/api/joke/list1234?num=6")
                .then(function (response) {
        
                    console.log(response);
                  },function(err){
        
                      console.log(err);
                  })
            }
            /*
                 接口2:用户注册
                 请求地址:https://autumnfish.cn/api/user/reg
                 请求方法:post
                 请求参数:username(用户名,字符串)
                 响应内容:注册成功或失败
             */
            document.querySelector(".post").onclick = function () {
        
                axios.post("https://autumnfish.cn/api/user/reg",{
        username:"盐焗西兰花"})
                .then(function(response){
        
                    console.log(response);
                    console.log(this.skill);
                },function (err) {
        
                    console.log(err);
                  })
              }
    
        </script>
    </body>

--------------------

#### vue中使用axios ####

网络数据的核心就是data中一部分数据是通过网络获取到的，所以是在方法中发送网络请求，在响应成功后，把服务器返回的数据绑定给对应的data值就行了

> 踩坑，ajax是异步的，this在ajax函数内指向并不是vue实例了，不能通过this拿到vue中的实例，所以不会在在axios函数中使用this

this是会变的，所以解决方法就是把它先存起来，定义一个that，var that = this;

<body>
        <div id="app">
            <input type="button" value="获取笑话" @>
        </div>
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            var app = new Vue({
        
                el:"#app",
                data:{
        
                    joke:"很好笑的笑话"
                },
                
                methods:{
        
                    getJoke:function(){
        
                        var that = this;
                        axios.get("https://autumnfish.cn/api/joke").then
                        (function(response){
        
                            console.log(response.data);
                            that.joke = response.data;
                        },function(err){
         })
                    }
                }
            })
        </script>
    </body>

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

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

--------------------

[f09e36bd6dde4b7e8d97f8fbe1fe3925.png]: https://img-blog.csdnimg.cn/f09e36bd6dde4b7e8d97f8fbe1fe3925.png
[6e7e0a5410e34b97b23cc6d5c188bed8.png]: https://img-blog.csdnimg.cn/6e7e0a5410e34b97b23cc6d5c188bed8.png
[e4d61b6aac73442d9d3ab7f9a50e7e92.png]: https://img-blog.csdnimg.cn/e4d61b6aac73442d9d3ab7f9a50e7e92.png
[aa5ab94288664bb8827776590d92a60d.png]: https://img-blog.csdnimg.cn/aa5ab94288664bb8827776590d92a60d.png
[63b92cf63c2a484c919604ae77e89911.png]: https://img-blog.csdnimg.cn/63b92cf63c2a484c919604ae77e89911.png
[923ca56a8ae24480b3db9f2de9ae80c6.png]: https://img-blog.csdnimg.cn/923ca56a8ae24480b3db9f2de9ae80c6.png
[1fc3536c55a2453ca704f07bc9d860fb.png]: https://img-blog.csdnimg.cn/1fc3536c55a2453ca704f07bc9d860fb.png
[43e1aa5bdde9465caeb48b3d481f05ec.png]: https://img-blog.csdnimg.cn/43e1aa5bdde9465caeb48b3d481f05ec.png
[33c110b1982a4bb78080c29d6296f7ac.png]: https://img-blog.csdnimg.cn/33c110b1982a4bb78080c29d6296f7ac.png
[66b2eab94edc4e9c875fb925b20aeb11.png]: https://img-blog.csdnimg.cn/66b2eab94edc4e9c875fb925b20aeb11.png
[d7cd612ed389442397533b9c0347347c.png]: https://img-blog.csdnimg.cn/d7cd612ed389442397533b9c0347347c.png
[1775b00054b749cd9376d88786ec250f.png]: https://img-blog.csdnimg.cn/1775b00054b749cd9376d88786ec250f.png
[f711b96bd8d545b88ebddb5dfd3c4d72.png]: https://img-blog.csdnimg.cn/f711b96bd8d545b88ebddb5dfd3c4d72.png
[30eba735e8304259b2158a3e522f9867.png]: https://img-blog.csdnimg.cn/30eba735e8304259b2158a3e522f9867.png
[b9a1174aa8ea4f07a5b769ec0384f35d.png]: https://img-blog.csdnimg.cn/b9a1174aa8ea4f07a5b769ec0384f35d.png
[321bcfb23534432d8c3ebb43cc9d42aa.png]: https://img-blog.csdnimg.cn/321bcfb23534432d8c3ebb43cc9d42aa.png
[df210084278541e1b75163cfbd615436.png]: https://img-blog.csdnimg.cn/df210084278541e1b75163cfbd615436.png
[2b3a543ee4b24e09bc3423dcf6288497.png]: https://img-blog.csdnimg.cn/2b3a543ee4b24e09bc3423dcf6288497.png
[cb8f21067f0044b288e68cd2a11f9ae1.png]: https://img-blog.csdnimg.cn/cb8f21067f0044b288e68cd2a11f9ae1.png
[bd280089e6074472b59d8ffc59e7b4d8.png]: https://img-blog.csdnimg.cn/bd280089e6074472b59d8ffc59e7b4d8.png
[b4415b0121c44b13b62862bf6b5bb56c.png]: https://img-blog.csdnimg.cn/b4415b0121c44b13b62862bf6b5bb56c.png
[8757b81b5f054150a770bf19af8cbc71.png]: https://img-blog.csdnimg.cn/8757b81b5f054150a770bf19af8cbc71.png
[2308ff603d984d1e97c0c6c545fcd8e3.png]: https://img-blog.csdnimg.cn/2308ff603d984d1e97c0c6c545fcd8e3.png
[8a75ef146b0f4b639854fc67a2c4294f.png]: https://img-blog.csdnimg.cn/8a75ef146b0f4b639854fc67a2c4294f.png
[be6dbeddbac143e38d180219f698ae48.png]: https://img-blog.csdnimg.cn/be6dbeddbac143e38d180219f698ae48.png
[77a6aef94eaa426490c00d6366a7c6a9.png]: https://img-blog.csdnimg.cn/77a6aef94eaa426490c00d6366a7c6a9.png
[5c006ddc908a4c06a5bca046726ebdfa.png]: https://img-blog.csdnimg.cn/5c006ddc908a4c06a5bca046726ebdfa.png
[6e08ea3b486a483ba3c5bb7b9bad8dec.png]: https://img-blog.csdnimg.cn/6e08ea3b486a483ba3c5bb7b9bad8dec.png
[d66b7dfeaf844bed9e87f482d909029e.png]: https://img-blog.csdnimg.cn/d66b7dfeaf844bed9e87f482d909029e.png
[62e34185a5914f9d8c4b1f1db9833073.png]: https://img-blog.csdnimg.cn/62e34185a5914f9d8c4b1f1db9833073.png
[c356023c28cc4b0096f01efd7e66b6b6.png]: https://img-blog.csdnimg.cn/c356023c28cc4b0096f01efd7e66b6b6.png
[8cf993aedfa14d32a4194ac3f7954177.png]: https://img-blog.csdnimg.cn/8cf993aedfa14d32a4194ac3f7954177.png
[87612ad974584700b7e176982762df32.png]: https://img-blog.csdnimg.cn/87612ad974584700b7e176982762df32.png
[50c9dc0126a646c48b098de06c3a242d.png]: https://img-blog.csdnimg.cn/50c9dc0126a646c48b098de06c3a242d.png
[65635a87acac4a92a913ccd524bcd6d8.png]: https://img-blog.csdnimg.cn/65635a87acac4a92a913ccd524bcd6d8.png
[169eb4644810465c9deb77b39d4466fa.png]: https://img-blog.csdnimg.cn/169eb4644810465c9deb77b39d4466fa.png
[453e5144ef1340c3b8ab1f470d996d90.png]: https://img-blog.csdnimg.cn/453e5144ef1340c3b8ab1f470d996d90.png
[4c035c6fb2134b16b2f358d8bc6b35fe.png]: https://img-blog.csdnimg.cn/4c035c6fb2134b16b2f358d8bc6b35fe.png
[9bca71fd5fbd4d8885765eca7560d7ac.png]: https://img-blog.csdnimg.cn/9bca71fd5fbd4d8885765eca7560d7ac.png
[8b64cd33b1334aae88dc484bb8f0326a.png]: https://img-blog.csdnimg.cn/8b64cd33b1334aae88dc484bb8f0326a.png
[3d13db1102fd40308e4e8114bab16dee.png]: https://img-blog.csdnimg.cn/3d13db1102fd40308e4e8114bab16dee.png
[544084a44ee54cdc840461dc4c9b2055.png]: https://img-blog.csdnimg.cn/544084a44ee54cdc840461dc4c9b2055.png
[8f022fc3c60d4a758fd914d88cac7fff.png]: https://img-blog.csdnimg.cn/8f022fc3c60d4a758fd914d88cac7fff.png
[18624aa685384367b08a17ec81b6e9fb.png]: https://img-blog.csdnimg.cn/18624aa685384367b08a17ec81b6e9fb.png
[d47803c032244558b26fc519cab89dbf.png]: https://img-blog.csdnimg.cn/d47803c032244558b26fc519cab89dbf.png
[4c20dbc9349b4421935f15d3f2eba2c5.png]: https://img-blog.csdnimg.cn/4c20dbc9349b4421935f15d3f2eba2c5.png
[4f8f8f0d065443e489c3d4bb7be3b068.png]: https://img-blog.csdnimg.cn/4f8f8f0d065443e489c3d4bb7be3b068.png
[b81d80a5eef84a45883dcf9c6684d06e.png]: https://img-blog.csdnimg.cn/b81d80a5eef84a45883dcf9c6684d06e.png