VUE 快速上手与基础指令（内附详细案例）

野性酷女 2024-03-03 09:07 89阅读 0赞

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

*  前言
 *  一、vue快速上手
 *   *  1. vue是什么
     *  2. 创建一个vue实例
     *  3. 插值表达式
     *  4. vue的响应式特性
     *  5. 开发者工具安装
 *  二、vue指令
 *   *  1. v-html
     *  2. v-if 和 v-show
     *  3. v-else 和 v-else-if
     *  4. v-on
     *  5. v-bind
     *  6. 案例-波仔的学习之旅
     *  7. v-for
     *  8. 案例-小黑的书架
     *  9. v-for 中的key
     *  10. v-model
     *  11. 综合案例 - 小黑记事本
 *  三、 好书推荐
 *  总结

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

## 前言 ##

为了巩固所学的知识，作者尝试着开始发布一些学习笔记类的博客，方便日后回顾。当然，如果能帮到一些萌新进行新技术的学习那也是极好的。作者菜菜一枚，文章中如果有记录错误，欢迎读者朋友们批评指正。

## 一、vue快速上手 ##

### 1. vue是什么 ###

Vue是一种流行的前端开发框架。它是一个用于构建用户界面的渐进式JavaScript框架。Vue提供了一组用于构建交互式Web界面的工具和库，使开发者能够更轻松地创建可复用的组件、处理数据和状态、以及实现页面动态性。下面是一些关于Vue的核心概念和特点：

*  渐进式：Vue被设计为渐进式框架，可以逐步地应用到现有的项目中。它可以仅用于处理特定部分的功能，也可以作为完整的单页面应用（SPA）开发。

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

*  响应式更新：Vue使用了一种称为"响应式"的机制，当数据发生变化时，界面会自动更新以反映这些变化。这样的机制使得开发者不需要手动操作DOM来更新界面，而是通过操作数据来实现界面的动态变化。
 *  组件化开发：Vue鼓励开发者以组件的方式构建应用。一个组件是一个可重用且自包含的代码块，包括模版（HTML）、样式（CSS）和逻辑（JavaScript）。组件可以嵌套、组合和重复使用，使得代码更易维护和复用。
 *  单向数据流：在Vue中，通过将数据从父组件传递给子组件，实现了一种单向数据流的数据管理方式。父组件可以通过props将数据传递给子组件，子组件则通过事件向父组件发送数据更新请求。
 *  生态系统：Vue拥有丰富的生态系统，包括官方提供的核心库以及许多由社区贡献的插件和工具。这些插件和工具可以帮助开发者更高效地开发、测试和部署Vue应用。

### 2. 创建一个vue实例 ###

> vue 2 官方文档：https://v2.cn.vuejs.org/v2/guide/

核心步骤4步:

> 1. 准备容器  
> 2. 引包(官网)- 开发版本 /生产版本  
> 3. 创建Vue 实例 new Vue()  
> 4. 指定配置项>渲染数据
> 
>  *  Del指定挂载点
>  *  data 提供数据

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    <body>
    
    
    
    
    <div class="box2">
      box2 -- {
       { count }}
    </div>
    <div class="box">
      box -- {
       { msg }}
    </div>
    -----------------------------------------------------
    
    <div id="app">
      
      <h1>{
       { msg }}</h1>
      <a href="#">{
       { count }}</a>
    </div>
    
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    
    <script>
      // 一旦引入 VueJS核心包，在全局环境，就有了 Vue 构造函数
      const app = new Vue({
          
        // 通过 el 配置选择器，指定 Vue 管理的是哪个盒子
        el: '#app',
        // 通过 data 提供数据
        data: {
          
          msg: 'Hello 传智播客',
          count: 666
        }
      })
    
    </script>
    
      
    </body>
    </html>

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

### 3. 插值表达式 ###

![在这里插入图片描述][72ff9b3ef33546a19e308c7630559cef.png]  
![在这里插入图片描述][b4e820365f57441bad6cd38ddbc6faaf.png]

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    <body>
    
      
    
    <div id="app">
      <p>{
       { nickname }}</p>
      <p>{
       { nickname.toUpperCase() }}</p>
      <p>{
       { nickname + '你好' }}</p>
      <p>{
       { age >= 18 ? '成年' : '未成年' }}</p>
      <p>{
       { friend.name }}</p>
      <p>{
       { friend.desc }}</p>
    
      
      
      
      
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <script>
    
      const app = new Vue({
          
        el: '#app',
        data: {
          
          nickname: 'tony',
          age: 18,
          friend: {
          
            name: 'jepson',
            desc: '热爱学习 Vue'
          }
        }
      })
    
    
    </script>
    
    </body>
    </html>

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

### 4. vue的响应式特性 ###

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

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

### 5. 开发者工具安装 ###

![在这里插入图片描述][1ee73747810b40819bf47934fa17fced.png]  
![在这里插入图片描述][7e88324bef0c4db197e7976f06e9bd5b.png]

## 二、vue指令 ##

### 1. v-html ###

`插值表达式并不具备解析标签的能力`  
![在这里插入图片描述][5381b3a85d0f476cbed7a9b2f6026d11.png]

### 2. v-if 和 v-show ###

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

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        .box {
          
          width: 200px;
          height: 100px;
          line-height: 100px;
          margin: 10px;
          border: 3px solid #000;
          text-align: center;
          border-radius: 5px;
          box-shadow: 2px 2px 2px #ccc;
        }
      </style>
    </head>
    <body>
    
      
    
      <div id="app">
        <div v-show="flag" class="box">我是v-show控制的盒子</div>
        <div v-if="flag" class="box">我是v-if控制的盒子</div>
      </div>
      
      <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
      <script>
        const app = new Vue({
          
          el: '#app',
          data: {
          
            flag: false
          }
        })
      </script>
    
    </body>
    </html>

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

### 3. v-else 和 v-else-if ###

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

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

### 4. v-on ###

**1. v-on 内联语句**  
![在这里插入图片描述][bea642b6099a4debb2f47348dd102de6.png]

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

**2. v-on 配置mehtods函数**  
![在这里插入图片描述][095b822b78d44a29a71de8445b26c7d6.png]

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

**3. v-on 调用传参**  
![在这里插入图片描述][053d8c98cd8541099e35fac5dc0208bb.png]

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        .box {
          
          border: 3px solid #000000;
          border-radius: 10px;
          padding: 20px;
          margin: 20px;
          width: 200px;
        }
        h3 {
          
          margin: 10px 0 20px 0;
        }
        p {
          
          margin: 20px;
        }
      </style>
    </head>
    <body>
    
      <div id="app">
        <div class="box">
          <h3>小黑自动售货机</h3>
          <button @click="buy(5)">可乐5元</button>
          <button @click="buy(10)">咖啡10元</button>
          <button @click="buy(8)">牛奶8元</button>
        </div>
        <p>银行卡余额：{
       { money }}元</p>
      </div>
    
      <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
      <script>
        const app = new Vue({
          
          el: '#app',
          data: {
          
            money: 100
          },
          methods: ## 标题{
          
            buy (price) {
          
              this.money -= price
            }
          }
        })
      </script>
    </body>
    </html>

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

### 5. v-bind ###

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

### 6. 案例-波仔的学习之旅 ###

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

### 7. v-for ###

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

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

### 8. 案例-小黑的书架 ###

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

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    <body>
    
      <div id="app">
        <h3>小黑的书架</h3>
        <ul>
          <li v-for="(item, index) in booksList" :key="item.id">
            <span>{
       { item.name }}</span>
            <span>{
       { item.author }}</span>
            
            <button @click="del(item.id)">删除</button>
          </li>
        </ul>
      </div>
      <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
      <script>
        const app = new Vue({
          
          el: '#app',
          data: {
          
            booksList: [
              {
           id: 1, name: '《红楼梦》', author: '曹雪芹' },
              {
           id: 2, name: '《西游记》', author: '吴承恩' },
              {
           id: 3, name: '《水浒传》', author: '施耐庵' },
              {
           id: 4, name: '《三国演义》', author: '罗贯中' }
            ]
          },
          methods: {
          
            del (id) {
          
              // console.log('删除', id)
              // 通过 id 进行删除数组中的 对应项 → filter(不会改变原数组)
              // filter: 根据条件，保留满足条件的对应项，得到一个新数组。
              // console.log(this.booksList.filter(item => item.id !== id))
              this.booksList = this.booksList.filter(item => item.id !== id)
            }
          }
        })
      </script>
    </body>
    </html>

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

### 9. v-for 中的key ###

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

### 10. v-model ###

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

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    <body>
    
      <div id="app">
        
        账户：<input type="text" v-model="username"> <br><br>
        密码：<input type="password" v-model="password"> <br><br>
        <button @click="login">登录</button>
        <button @click="reset">重置</button>
      </div>
      <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
      <script>
        const app = new Vue({
          
          el: '#app',
          data: {
          
            username: '',
            password: ''
          },
          methods: {
          
            login () {
          
              console.log(this.username, this.password)
            },
            reset () {
          
              this.username = ''
              this.password = ''
            }
          }
        })
      </script>
    </body>
    </html>

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

### 11. 综合案例 - 小黑记事本 ###

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

1.  列表渲染和删除

<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./css/index.css" />
    <title>记事本</title>
    </head>
    <body>
    
    
    <section id="app">
      
      <header class="header">
        <h1>小黑记事本</h1>
        <input  placeholder="请输入任务" class="new-todo" />
        <button class="add">添加任务</button>
      </header>
      
      <section class="main">
        <ul class="todo-list">
          <li class="todo" v-for="(item, index) in list" :key="item.id">
            <div class="view">
              <span class="index">{
       { index + 1 }}.</span> <label>{
       { item.name }}</label>
              <button @click="del(item.id)" class="destroy"></button>
            </div>
          </li>
        </ul>
      </section>
      
      <footer class="footer">
        
        <span class="todo-count">合 计:<strong> 2 </strong></span>
        
        <button class="clear-completed">
          清空任务
        </button>
      </footer>
    </section>
    
    
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      const app = new Vue({
          
        el: '#app',
        data: {
          
          list: [
            {
           id: 1, name: '跑步一公里' },
            {
           id: 3, name: '游泳100米' },
          ]
        },
        methods: {
          
          del (id) {
          
            // console.log(id) => filter 保留所有不等于该 id 的项
            this.list = this.list.filter(item => item.id !== id)
          }
        }
      })
    
    </script>
    </body>
    </html>

![在这里插入图片描述][137522c6a5ac46b4bb376a8b9d0b5522.png]  
2. 添加

<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./css/index.css" />
    <title>记事本</title>
    </head>
    <body>
    
    
    <section id="app">
      
      <header class="header">
        <h1>小黑记事本</h1>
        <input v-model="todoName"  placeholder="请输入任务" class="new-todo" />
        <button @click="add" class="add">添加任务</button>
      </header>
      
      <section class="main">
        <ul class="todo-list">
          <li class="todo" v-for="(item, index) in list" :key="item.id">
            <div class="view">
              <span class="index">{
       { index + 1 }}.</span> <label>{
       { item.name }}</label>
              <button @click="del(item.id)" class="destroy"></button>
            </div>
          </li>
        </ul>
      </section>
      
      <footer class="footer">
        
        <span class="todo-count">合 计:<strong> 2 </strong></span>
        
        <button class="clear-completed">
          清空任务
        </button>
      </footer>
    </section>
    
    
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      // 添加功能
      // 1. 通过 v-model 绑定 输入框 → 实时获取表单元素的内容
      // 2. 点击按钮，进行新增，往数组最前面加 unshift
      const app = new Vue({
          
        el: '#app',
        data: {
          
          todoName: '',
          list: [
            {
           id: 1, name: '跑步一公里' },
            {
           id: 3, name: '游泳100米' },
          ]
        },
        methods: {
          
          del (id) {
          
            // console.log(id) => filter 保留所有不等于该 id 的项
            this.list = this.list.filter(item => item.id !== id)
          },
          add () {
          
            if (this.todoName.trim() === '') {
          
              alert('请输入任务名称')
              return
            }
            this.list.unshift({
          
              id: +new Date(),
              name: this.todoName
            })
            this.todoName = ''
          }
        }
      })
    
    </script>
    </body>
    </html>

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

1.  底部统计和清空

<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./css/index.css" />
    <title>记事本</title>
    </head>
    <body>
    
    
    <section id="app">
      
      <header class="header">
        <h1>小黑记事本</h1>
        <input v-model="todoName"  placeholder="请输入任务" class="new-todo" />
        <button @click="add" class="add">添加任务</button>
      </header>
      
      <section class="main">
        <ul class="todo-list">
          <li class="todo" v-for="(item, index) in list" :key="item.id">
            <div class="view">
              <span class="index">{
       { index + 1 }}.</span> <label>{
       { item.name }}</label>
              <button @click="del(item.id)" class="destroy"></button>
            </div>
          </li>
        </ul>
      </section>
      
      <footer class="footer" v-show="list.length > 0">
        
        <span class="todo-count">合 计:<strong> {
       { list.length }} </strong></span>
        
        <button @click="clear" class="clear-completed">
          清空任务
        </button>
      </footer>
    </section>
    
    
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      // 添加功能
      // 1. 通过 v-model 绑定 输入框 → 实时获取表单元素的内容
      // 2. 点击按钮，进行新增，往数组最前面加 unshift
      const app = new Vue({
          
        el: '#app',
        data: {
          
          todoName: '',
          list: [
            {
           id: 1, name: '跑步一公里' },
            {
           id: 2, name: '跳绳200个' },
            {
           id: 3, name: '游泳100米' },
          ]
        },
        methods: {
          
          del (id) {
          
            // console.log(id) => filter 保留所有不等于该 id 的项
            this.list = this.list.filter(item => item.id !== id)
          },
          add () {
          
            if (this.todoName.trim() === '') {
          
              alert('请输入任务名称')
              return
            }
            this.list.unshift({
          
              id: +new Date(),
              name: this.todoName
            })
            this.todoName = ''
          },
          clear () {
          
            this.list = []
          }
        }
      })
    
    </script>
    </body>
    </html>

![在这里插入图片描述][87b87a16a1f046a7a4681cc9bb8ad268.png]  
![在这里插入图片描述][fca88a573a30492cb54f762fad116832.png]

## 三、 好书推荐 ##

![在这里插入图片描述][9e42bde172304ef18ff47c1b1e0c9962.png_pic_center]  
![在这里插入图片描述][22117ff9fced43cab6c4bf984f1f13c4.png]

> 京东购买链接：https://item.jd.com/14140678.html

## 总结 ##

欢迎各位留言交流以及批评指正，如果文章对您有帮助或者觉得作者写的还不错可以点一下关注,点赞，收藏支持一下。  
（博客的参考源码可以在我主页的资源里找到，如果在学习的过程中有什么疑问欢迎大家在评论区向我提出）

[51a7c0c06b0b44248340e076a264c7d6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/03/51dafd7fd756428591d059b7d87c25ca.png
[2e03ebc37c124915b6f143b34ffb639c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/03/f12db2315b12408bb5aad9a21f6b1a4d.png
[72ff9b3ef33546a19e308c7630559cef.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/03/25707f1d0c354cbfbfa12ea6922beb48.png
[b4e820365f57441bad6cd38ddbc6faaf.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/03/a9082ff15f7544feb84a29cace590835.png
[b94739b5cb89486db95737b1511da1ba.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/03/778b6d0115f345c1a81ee995edf3a967.png
[abb0bc3c9dc149e498a4d0f2d26d7109.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/03/b5030c7d87b740caadcdfae57a090c19.png
[b9cf5744a81a406887ae4244e3baeb02.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/03/a36cd3b17e8948a2a9aeec406a6c773b.png
[e3e65ffcc3d9470b907a704e16ccc8f5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/03/4a89831a0c0845138b785d7eccf23252.png
[1ee73747810b40819bf47934fa17fced.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/03/6114e344ae4c47899d59ec17ac6e9d64.png
[7e88324bef0c4db197e7976f06e9bd5b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/03/748a697d753445549796bf6f0c548d8b.png
[5381b3a85d0f476cbed7a9b2f6026d11.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/03/491c3bc4299a43c087fb9fe7e277444b.png
[261c87d9a97245dabe4a4c88f2d6cb7a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/03/2a2964bbcac540e0a123a71ed6b4806d.png
[265b8673a133472488493f8b9874b981.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/03/03b6129b463e41c6bf5156b467758430.png
[bcb7f4c3b99d47d0bb3ba11ca090ea4d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/03/68203cdc985540e3a1ca067e1d5e325f.png
[830d7e3f8b73471bad00319a7d7df503.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/03/cfac1ecc030844189c21a87aafd5434a.png
[bea642b6099a4debb2f47348dd102de6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/03/18b18661a0774153b405023ea167e6c1.png
[e47e489160a6485892fe18c252271959.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/03/728ec694f6604e3587c1918ab992bd24.png
[095b822b78d44a29a71de8445b26c7d6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/03/e4d6fd3e811b413191f6fa76e8990af9.png
[b8616a35136146769fc6721be6a73423.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/03/230559898a934b6a8ab8b94c392ff237.png
[053d8c98cd8541099e35fac5dc0208bb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/03/770d1c398d0c4a688e834a6995e081e1.png
[33feaf09bb2d4150bb7fb3a470b56520.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/03/155ec7e99f8b49d286d0423d68f65219.png
[214e0f97fa1d4d088cdbcba3181dd9c9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/03/3555bdf48fe34f8a8d7fe4f4d5def544.png
[a1eeef3fb41240c5ad8d501253ad425d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/03/d5607b1ece3f4fecac687b47f9880db6.png
[03ca2be4fdb044d58514da1cdb45f58f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/03/28960e3d288440dd9052e0ea0cd1b643.png
[19d9f07f6a284f9d86d23380dd1ca105.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/03/30c138746774417b9a6aa728615c448c.png
[bc374144dfb44fc1ad390ff84ed53f46.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/03/84b86be1cfc6488b80ed4c6634107d54.png
[dbaba49c54fe41d18dfc0512cbc6a4df.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/03/3164a9afa1fc466698e9f1dd58a13818.png
[1adcad75bf4c46c2b5a359ff2b0daaf6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/03/bf07c5cc8d8d4b1eb5facd7793d3dab5.png
[1c1684a2895743f4964f8dce56db6e66.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/03/86a978ccac7a411ca85119663694c1a8.png
[895f498a77ef44fe8d8fb1c4cde3e048.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/03/e0924acc58094310afbd18aa41f19aea.png
[20734091d18f47019025e627484acdbf.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/03/604efdd760e647edaa84086951fd4bf0.png
[137522c6a5ac46b4bb376a8b9d0b5522.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/03/9a498454890e43629ba6cdfb35df245b.png
[c272461f3c4d49ff99b10ed75dddd9da.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/03/10c2e90d51e34a938b486d432a0ed42e.png
[87b87a16a1f046a7a4681cc9bb8ad268.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/03/a6ff05c157f74c72a3b9964e9211e710.png
[fca88a573a30492cb54f762fad116832.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/03/81e64332e27d461ca33260c054fe01bc.png
[9e42bde172304ef18ff47c1b1e0c9962.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/03/5e388bc090d64d8e93a46b9d86699d21.png
[22117ff9fced43cab6c4bf984f1f13c4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/03/7bacd3ecddc74180aa80553166cbfca5.png