Vue初识系列【2】

ゞ浴缸里的玫瑰 2024-03-30 14:15 60阅读 0赞

## 一 Vue入门 ##

### 1.1 Vue简介 ###

*  Vue 是一套用于构建用户界面的渐进式框架，发布于 2014 年 2 月。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库（如：vue-router，vue-resource，vuex）或既有项目整合。
 *  MVVM 模式的实现者
    
     *  Model：模型层，在这里表示 JavaScript 对象
     *  View：视图层，在这里表示 DOM（HTML 操作的元素）
     *  ***ViewModel：连接视图和数据的中间件，Vue.js 就是 MVVM 中的 ViewModel 层的实现者***
     *  ***ViewModel 能够观察到数据的变化，并对视图对应的内容进行更新***
     *  ***ViewModel 能够监听到视图的变化，并能够通知数据发生改变***

> 在 MVVM 架构中，是不允许 数据 和 视图 直接通信的，只能通过 ViewModel 来通信，而 ViewModel就是定义了一个 Observer 观察者。

### 1.2 第一个Vue程序 ###

> Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。

*  CDN
    
     *  `<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>`
     *  `<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>`
 *  Vue.js 的核心是实现了 MVVM 模式，她扮演的角色就是 ViewModel 层.
 *  第一个应用程序就是展示***数据绑定功能***

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
    
    
    <div id="app">{
       {message}}</div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js">
    </script>
        <script>
            var vm=new Vue({
          
                /* el:"#app" 绑定元素id*/
                el:"#app",
                
                data:{
          
                    message:"hello,vue!"
                }
            });
        </script>
    </body>
    </html>

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

*  MVVM模式中要求 ViewModel 层就是使用 观察者模式 来实现数据的监听与绑定，以做到数据与视图的快速响应。
 *  在控制台直接输入 vm.message 来修改值。  
    ![在这里插入图片描述][b3acd774aab64fd98d3d271b77215bba.png]

### 1.3 IDEA安装Vue插件后右键新建菜单中没有Vue 组件选项的解决方法 ###

#### 1.3.1 问题 ####

*  一 Vue插件已经安装成功  
    ![在这里插入图片描述][b99d1b5298cc407787c5f858b2ed75d7.png]
 *  但是new右键菜单中没有Vue 组件选项  
    ![在这里插入图片描述][aed1424686b54b73a238e6d6031b3a14.png]

#### 1.3.2 解决方案 ####

1.  打开设置–》编辑器–》文件和代码模板  
    ![在这里插入图片描述][cbce1cf8abef42f7adf984214745a926.png]
2.  文件选项下拉列表中找到Vue single file component选中，然后点击复制，把新文件名字改为Vue component，并删除代码中的KaTeX parse error: Expected group after '\_' at position 10: COMPONENT\_̲，最后点击确定。  
    ![在这里插入图片描述][cc229f732c1249ed860303ae9d346b16.png]  
    ![在这里插入图片描述][1854dccff2764f938a2498c471bd3035.png]  
    ![在这里插入图片描述][ba8ad1e9e82b49d6af932a3c568e1b34.png]
3.  最后，不久后你会发现，正常的Vue 组件选项会自己出现，想删除自定义的也可以删除，只保留一个就可以了！  
    ![在这里插入图片描述][3d1b579d705e4b30975f35cb841f83ae.png]

## 二 基础语法精讲 ##

### 2.1 v-bind ###

*  除了使用插值表达式\{ \{\}\}进行数据渲染，也可以使用 v-bind指令，它的简写的形式就是一个冒号（:）

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <div id="app">
      
      <h1 v-bind:title="message">鼠标悬停查看此处动态绑定的提示信息！</h1>
      
      <span :title="message">鼠标悬停查看此处动态绑定的提示信息！</span>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js">
    </script>
    <script>
      new Vue({
          
        el: '#app',
        data: {
          
          message: '页面加载于 ' + new Date().toLocaleString()
        }
      })
    </script>
    </body>
    </html>

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

### 2.2 v-if 系列 ###

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
        </head>
        <body>
            
            <div id="app">
                <h1 v-if="ok==true">true</h1>
                <h1 v-else>false</h1>
                
                <h1 v-if="dataType==='A'">A</h1>
                <h1 v-else-if="dataType==='B'">B</h1>
                <h1 v-else-if="dataType==='C'">C</h1>
            </div>
            
            <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js">
            </script>
            <script>
                var vm = new Vue({
          
                    el: "#app",
                    
                    data: {
          
                        ok: true,
                        dataType: 'A'
                    }
                });
            </script>
        </body>
    </html>

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

### 2.3 v-for ###

*  语法格式

<div id="vue">
    	
    	<li v-for="item in items">
    		{
       { item.message }}
    	</li>
    </div>

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
        </head>
        <body>
            
            <div id="app">
                <li v-for="(item,index) in items">{
       {index + 1}}--{
       {item.message}}</li>
            </div>
            
            <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js">
            </script>
            <script>
                var vm = new Vue({
          
                    el: "#app",
                    
                    data: {
          
                        items: [
                            {
          message: '徐小明1'},
                            {
          message: '徐小明2'}
                        ]
                    }
                });
            </script>
        </body>
    </html>

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

### 2.4 v-on ###

*  v-on 监听事件：
    
     *  事件有Vue的事件、和前端页面本身的一些事件！这 click 是vue的事件，可以绑定到Vue中的methods 中的方法事件。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
    <div id="app">
      <button v-on:click="sayHi">按钮</button>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
    <script>
      var vm=new Vue({
          
        el:"#app",
        
        data:{
          
          message: "你好！"
        },
        methods: {
          
            sayHi: function (event) {
          
                alert(this.message);
            }
        }
      });
    </script>
    </body>
    </html>

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

### 2.5 v-model ###

*  双向数据绑定
    
     *  Vue.js 是一个 MVVM 框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。
     *  数据双向绑定，一定是对于 UI 控件来说的，非 UI 控件不会涉及到数据双向绑定。对于处理表单，Vue.js 的双向数据绑定用起来就特别舒服了。
     *  可以用 v-model 指令在表单 < input>、< textarea> 及 < select> 元元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。v-model 负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

#### 2.5.1 文本框&单选按钮演示 ####

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
        </head>
        <body>
            
            <div id="app">
                文本：<input type="text" v-model="message">{
       {message}}<br/>
                性别：<input type="radio" name="sex" value="男" v-model="sexType">男
                <input type="radio" name="sex" value="女" v-model="sexType">女<br/>
                <p>您选择的性别为:{
       {sexType}}</p>
            </div>
            
            <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js">
            </script>
            <script>
                var vm = new Vue({
          
                    el: "#app",
                    
                    data: {
          
                        message: "666",
                        sexType: ""
                    }
                });
            </script>
        </body>
    </html>

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

#### 2.5.2 单、多复选框 ####

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
        </head>
        <body>
            
            <div id="app">
                单复选框：
                <input type="checkbox" id="checkbox" v-model="checked">
                  
                <label for="checkbox">{
       { checked }}</label>
                <hr/>
                多复选框：
                <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
                <label for="jack">Jack</label>
                <input type="checkbox" id="john" value="John" v-model="checkedNames">
                <label for="john">John</label>
                <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
                <label for="mike">Mike</label>
                <span>选中的值: {
       { checkedNames }}</span>
            </div>
            
            <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js">
            </script>
            <script>
                var vm = new Vue({
          
                    el: "#app",
                    
                    data: {
          
                        checked: false,
                        checkedNames: []
                    }
                });
            </script>
        </body>
    </html>

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

### 2.5.3 下拉框 ###

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
        </head>
        <body>
            
            <div id="app">
                下拉框:
                <select v-model="selected">
                    <option disabled value=" ">请选择</option>
                    <option>A</option>
                    <option>B</option>
                    <option>C</option>
                </select>
                <span>选中的值：{
       {selected}}</span>
            </div>
            
            <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js">
            </script>
            <script>
                var vm = new Vue({
          
                    el: "#app",
                    
                    data: {
          
                        selected: ""
                    }
                });
            </script>
        </body>
    </html>

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

## 三 组件 ##

### 3.1 组件简介 ###

*  组件是可复用的 Vue 实例，说白了就是一组可以重复使用的模板，跟 JSTL 的自定义标签、Thymeleaf 的 th:fragment 等框架有着异曲同工之妙。通常一个应用会以一棵嵌套的组件树的形式来组织。  
    ![在这里插入图片描述][4ece63d5524249c982066a7d75e33494.png]

### 3.2 Vue 组件 ###

*  使用 Vue.component() 方法注册组件

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
        </head>
        <body>
            
            <div id="app">
                
                <Mylist v-for="item in items" v-bind:connect="item"></Mylist>
            </div>
            
            <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js">
            </script>
            <script>
                // Vue.component注册/定义组件
                //template：组件的模板
                //Mylist自定义组件的名字 首字母必须大写，否则有错误
                //使用 props 属性传递参数 默认规则下 props 属性里的值不能为大写
                Vue.component("Mylist", {
          
                    props: ["connect"],
                    template: "<li>{
          {connect}}</li>"
                });
                //再实例化Vue
                var vm = new Vue({
          
                    el: "#app",
                    
                    data: {
          
                        items: ["java", "linux", "C#"]
                    }
                });
            </script>
        </body>
    </html>

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

*  v-for=“item in items” ：遍历 Vue 实例中定义的名为 items 的数组，并创建同等数量的组件；
 *  v-bind:item=“item” ：将遍历的 item 项绑定到组件中 props 定义的名为 item 属性上；
 *  = 号左边的 item 为 props 定义的属性名，右边的为 item in items 中遍历的 item 项的值；

## 四 计算属性 ##

### 4.1 计算属性简介 ###

*  计算属性的重点突出在 ***属性*** 两个字上（属性是名词），***首先它是个属性其次这个属性有 计  
    算 的能力（计算是动词***），这里的 ***计算*** 简单点说，***它就是一个能够将计算结果缓存起来的属性（将行为转化成了静态的属性）可以想象为缓存！***
 *  ***计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销。***

### 4.2 演示 ###

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
        </head>
        <body>
            
            <div id="app">
                
                <p>调用当前时间的方法:{
       {currenTime1()}}</p>
                <p>当前时间的计算属性:{
       {currenTime2}}</p>
            </div>
            
            <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js">
            </script>
            <script>
                var vm = new Vue({
          
                    el: "#app",
                    
                    data: {
          
                        message: "hello"
                    },
                    methods: {
          
                        currenTime1: function () {
          
                            //返回一个时间戳
                            return Date.now();
                        }
                    },
                    computed: {
          
                        //currentTime2 这是一个属性！不是方法
                        /*computed：定义计算属性，调用属性使用 currentTime2，不需要带括号；
                        this.message 是为了能够让 currentTime2 观察到数据变化而变化；*/
                        currenTime2: function () {
          
                            this.message;
                            //返回一个时间戳
                            return Date.now();
                        }
                    }
                });
            </script>
        </body>
    </html>

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

>  *  methods 和 computed 里的东西不能重名
>  *  说明
>     
>      *  methods：定义方法，调用方法使用 方法名()，需要带括号。  
>         \- computed：定义计算属性，调用属性使用 方法名，不需要带括号。  
>         \- 如果在方法中的值发生了变化，则缓存就会刷新。

## 五 插槽 ##

### 5.1 插槽简介 ###

*  在 Vue 中使用 `<slot>`元素，作为承载分发内容的出口。
 *  可以应用在组合组件的场景中。

### 5.2 待办事项组件演示 ###

*  比如准备制作一个***待办事项组件（todo）***
    
     *  该组件由***待办标题（todo-title）和待办内容（todo-items）组成，但这三个组件又是相互独立的***

#### 5.2.1 定义一个待办事项的组件 ####

<todo></todo>
    <script type="text/javascript">
          // 定义一个待办事项的组件
          //slot 插槽
          Vue.component('todo', {
          
            template: '<div>\
    						<div>待办事项</div>\
    						<ul>\
    							<li>学高数</li>\
    							<li>学离散</li>\
    							<li>学数据结构</li>\
    						</ul>\
    					</div>'
          });
    </script>

#### 5.2.2 留出一个插槽 ####

1.  将上面的代码留出一个插槽,即 slot

1.  定义一个名为 todo-title 的待办标题组件 和 todo-items 的待办内容组件

Vue.component("todo-title", {
        
           props: ['title'],
           template: '<div>{
        {title}}</div>'
    });

//这里的index,就是数组的下标,使用for循环遍历
    Vue.component("todo-items", {
        
        props: ['item', 'index'],
        template: "<li>{
        {index+1}}-{
        {item}} </li>"
    });

1.  实例化 Vue 并初始化数据

1.  将这些值,通过插槽插入

### 5.3 进阶：自定义事件 ###

*  数据项在 Vue 的实例中，但删除操作要在组件中完成，那么组件如何才能删除Vue 实例中的数据呢？
 *  此时就涉及到参数传递与事件分发了，Vue 为我们提供了自定义事件的功能很好的帮助我们解决了这个问题。

#### 5.3.1 逻辑图 ####

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

#### 5.3.2 步骤 ####

*  使用 this.$emit(‘自定义事件名’, 参数)，操作过程如下:

1.  在vue的实例中,增加了 methods 对象并定义了一个名为 removeItems的方法

1.  修改 todo-items 待办内容组件的代码,增加一个删除按钮,并且绑定事件

Vue.component("todo-items", {
        props: ['item', 'index'],
        template: "<li>{
       {index+1}}-{
       {item}} <button @click='remove'>删除</button> </li>",
        /*<button @click='removeMethod'>删除</button>与下面的方法绑定*/
        methods: {
            remove: function (index) {
                // this.$emit 自定义事件
                //v-on:remove="removeItems(index)" 绑定自定义事件，并调用删除方法
                this.$emit('remove', index);
            }
        }
    });

1.  修改 todo-items 待办内容组件的 HTML 代码,增加一个自定义事件,比如叫 remove,可以和组件的方法绑定,然后绑定到vue的方法中!

<todo-items slot="todo-items" v-for="(item,index) in todoItems" :item="item"
                v-bind:index="index" v-on:remove="removeItems(index)" :key="index"></todo-items>

#### 5.3.3 完整代码及效果 ####

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
        </head>
        <body>
    
            <div id="app">
                <todo>
                    
                    <todo-title slot="todo-title" :title="title"></todo-title>
                    
                    <todo-items slot="todo-items" v-for="(item,index) in todoItems" :item="item"
                                v-bind:index="index" v-on:remove="removeItems(index)" :key="index"></todo-items>
                </todo>
            </div>
    
            <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
            <script type="text/javascript">
                // 定义一个待办事项的组件
                //slot 插槽
                Vue.component('todo', {
          
                    template: '<div>\
                        <slot name="todo-title"></slot>\
                        <ul>\
                          <slot name="todo-items"></slot>\
                        </ul>\
                      </div>'
                });
                Vue.component("todo-title", {
          
                    props: ['title'],
                    template: '<div>{
          {title}}</div>'
                });
                //组件3
                Vue.component("todo-items", {
          
                    props: ['item', 'index'],
                    template: "<li>{
          {index+1}}-{
          {item}} <button @click='removeMethod'>删除</button> </li>",
                    /*<button @click='removeMethod'>删除</button>与下面的方法绑定*/
                    methods: {
          
                        removeMethod: function (index) {
          
                            // this.$emit 自定义事件
                            //v-on:remove="removeItems(index)" 绑定自定义事件，并调用删除方法
                            this.$emit('remove', index);
                        }
                    }
                });
                var vm = new Vue({
          
                    el: "#app",
                    data: {
          
                        title: "代办事项",
                        todoItems: ["学高数", "学离散", "学数据结构"]
                    },
                    methods: {
          
                        removeItems: function (index) {
          
                            alert("删除了" + this.todoItems[index]);
                            this.todoItems.splice(index, 1);//一次删除一个元素
                        }
                    }
                });
            </script>
        </body>
    </html>

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

## 六 Axios ##

### 6.1 Axios简介 ###

*  Axios 是一个开源的可以用在浏览器端和 NodeJS 的异步通信框架，她的主要作用就是实现 AJAX 异步通信
 *  为什么要使用 Axios？
    
     *  由于 Vue.js 是一个 视图层框架 并且作者（尤雨溪）严格准守 SoC （关注度分离原则），所以Vue.js 并不包含 AJAX 的通信功能

### 6.2 Axios使用演示 ###

1.  开发的接口大部分都是采用 JSON 格式，可以先在项目里模拟一段 JSON 数据

{
      "name": "Java",
      "url": "https://baidu.com",
      "page": 1,
      "address": {
        "street": "夷山大道",
        "city": "开封市",
        "country": "中国"
      }
    }

1.  测试代码

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
            <style>
                [v-clock] {
          
                    display: none;
                }
            </style>
        </head>
        <body>
            <div id="vue" v-clock>
                <div>{
       {info.name}}</div>
                <div>{
       {info.address.country}}</div>
                <div>{
       {info.address.street}}</div>
                <div>{
       {info.address.city}}</div>
                <a v-bind:href="info.url">百度网站</a>
            </div>
    
            
            <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
            <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
            <script type="text/javascript">
                var vm = new Vue({
          
                    el: '#vue',
                    data() {
          
                        return {
          
                            info: {
          
                                name: null,
                                address: {
          
                                    country: null,
                                    city: null,
                                    street: null
                                },
                                url: null
                            }
                        }
                    },
                    mounted() {
           //钩子函数
                        axios.get('data.json').then(response => (this.info = response.data));
                    }
                });
            </script>
        </body>
    </html>

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

>  *  在data中的数据结构必须要和 Ajax 响应回来的数据格式匹配
>  *  使用 axios 框架的 get 方法请求 AJAX 并自动将数据封装进了 Vue 实例的数据对象中

## 七 Vue的生命周期 ##

*  Vue 的生命周期：Vue 实例有一个完整的生命周期，从开始创建、初始化数据、编译模板、挂载 DOM、渲染→更新→渲染、卸载等一系列过程。通俗说是 Vue 实例从创建到销毁的过程。
 *  在 Vue 的整个生命周期中，它提供了一系列的事件，可以让我们在事件触发时注册 JS 方法，可以让我们用自己注册的 JS 方法控制整个大局，在这些事件响应方法中的 this 直接指向的是 Vue 的实例。

### 7.1 Vue声明周期图 ###

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

[3cb6c4eb701443259964ae078275d782.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/0f204b34a2834877a0a8e631bfebde6f.png
[b3acd774aab64fd98d3d271b77215bba.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/f78e781f9e2e497d9c47d4bd0b675410.png
[b99d1b5298cc407787c5f858b2ed75d7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/d1ff05d3b6294ca2bfa70821b84cad80.png
[aed1424686b54b73a238e6d6031b3a14.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/520f3035fc59492ea4b00e3bc34f6e07.png
[cbce1cf8abef42f7adf984214745a926.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/1d0ef129af6046ae841dd5139c64c00f.png
[cc229f732c1249ed860303ae9d346b16.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/b3dcfbd7414c4afa92601a134d3fbcb3.png
[1854dccff2764f938a2498c471bd3035.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/9e085945fa8147a1b8069e6ab0d46dad.png
[ba8ad1e9e82b49d6af932a3c568e1b34.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/12d92c379fc049f9a3d44c8655f3f50e.png
[3d1b579d705e4b30975f35cb841f83ae.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/b7f3b2bafcb04e97a335d966bb85017c.png
[668292ec1c8246a984668cf31bebf170.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/4953fe3dcba846d2854e89cb9b89796b.png
[074dad43679545c19fa2fa4ca91ce8f6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/f312161afdfe41d28d651c42112ab4ff.png
[cbe13413be0f4e428e3cd6cbcc439f32.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/f9b26a4746e744acb23aafa65b6feacd.png
[2c2f4f9cd9764fa0847a96783b911e36.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/daf905ec16144230a3c41dcfc5517bc9.png
[407208bae4704508991d98a030674e89.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/08fcd80a063c4fb6b38788810c09de0f.png
[7b77631c685c41d8b8ea34c9dc990aec.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/9d5681da6a2a4512b3cd7a55ca4a46ff.png
[2bba6ea3a9d546b085278b03a2a907b0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/ea41e694564d4ded85560309ce08111c.png
[4ece63d5524249c982066a7d75e33494.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/da09601ae4c444c882dd8619fb81520d.png
[14e41353f1db49799cd4b9fd9377f306.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/515769a62d8e4d4aa344dfad1fc48a72.png
[b3afd6df42e541f4a93f3ce17a797149.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/f90e418f076141e99145dafaaf2d9cd6.gif
[96b084c077b8435e898f1dc816198d4a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/939f30c02f2941a389df2eee8554a1a4.png
[d88b8469ac5a43c49969902e00d96a54.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/e496dbbac3d44828b376edadda426ca2.gif
[7f5402e2459f493b886bdc00a52b50ce.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/de646dd7f74341b798f83b69853c33e7.png
[70b7335e79954e15b0c556f5abd3d3bb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/4b30efb61fbb4b748c6d0e2387991d40.png