【Vue.js 知识量化】基础语法

灰太狼 2022-10-20 00:57 228阅读 0赞

### Vue.js 基础语法 ###

*  Vue.js 安装
 *  插值操作
 *   *  Mustache：将 data 中的文本数据插入到 HTML
     *  v-once：使元素和组件只渲染一次
     *  v-html：解析 HTML 并展示
     *  v-text：用于将数据显示在界面中
     *  v-pre：跳过这个元素和它子元素的编译过程，用于显示原本的 Mustache 语法
     *  v-cloak：可用于隐藏未编译的 Mustache 标签
 *  绑定属性
 *   *  v-bind 基础、语法糖
     *  v-bind 绑定 class
     *  v-bind 绑定 style
 *  计算属性
 *   *  计算属性的 setter 和 getter
     *  计算属性的缓存
 *  事件监听
 *   *  v-on 基础、语法糖
     *  v-on 参数
     *  v-on 修饰符
     *  watch
 *  条件判断
 *   *  v-if、v-else-if、v-else
     *  v-show
 *  循环遍历
 *   *  v-for 遍历数组
     *  v-for 遍历对象
     *  组件的 key 属性
 *  表单绑定 v-model
 *   *  v-model 原理
     *  修饰符

> 视频：[王红元老师的Vue][Vue]

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

认识 Vuejs

*  为什么学习 Vuejs
 *  简单认识一下 Vuejs

Vuejs 安装方式

*  CDN 引入
 *  下载和引入
 *  NPM 安装管理

Vuejs 初体验

*  Hello Vuejs
 *  Vue 列表展示
 *  案例：计数器

Vuejs 的 MVVM

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

Vue 有很多特点和 Web 开发中常见的高级功能：

*  解耦视图和数据
 *  可复用的组件
 *  前端路由技术
 *  状态管理
 *  虚拟 DOM

# Vue.js 安装 #

方式一：**直接 CDN 引入**

*  可以选择引入开发环境版本还是生产环境版本
    
         
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>

方式二：**下载到本地引入**

*      开发环境 https://vuejs.org/js/vue.js 
        生产环境 https://vuejs.org/js/vue.min.js

方式三：**NPM 安装**

*  后续通过 webpack 和 CLI 的使用，我们使用该方式

# 插值操作 #

插值操作的主要作用是 将值插入到我们**模板的内容**当中

## Mustache：将 data 中的文本数据插入到 HTML ##

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

## v-once：使元素和组件只渲染一次 ##

**v-once**:

*  该指令后面不需要跟任何表达式
 *  该指令表示元素和组件只渲染一次，不会随着数据的改变而改变。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 2]

## v-html：解析 HTML 并展示 ##

> 某些情况下，我们从服务器请求到的数据本身就是一个 HTML 代码  
> \* 如果我们直接通过 `{ {}}` 来输出，会将 HTML 代码也一起输出  
> \* 但是我们可能希望的是按照 HTML 格式进行解析，并且显示对应的内容

**v-html**：

*  该指令后面往往会跟上一个 string 类型
 *  会将 string 的 html 解析出来并且进行渲染  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 3]

## v-text：用于将数据显示在界面中 ##

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

## v-pre：跳过这个元素和它子元素的编译过程，用于显示原本的 Mustache 语法 ##

**v-pre** 用于跳过这个元素和它子元素的编译过程，用于显示原本的 Mustache 语法

下面的代码：

*  第一个 h2 元素中的内容会被编译解析出来对应的内容
 *  第二个 h2 元素中会直接显示 \{ \{message\}\}  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 5]

## v-cloak：可用于隐藏未编译的 Mustache 标签 ##

在某些情况下，我们浏览器可能会直接显然出未编译的 Mustache 标签  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 6]

# 绑定属性 #

> 插值操作的主要作用是 将值插入到我们**模板的内容**当中

但是，除了内容需要动态来决定外，某些属性我们也希望动态来绑定

*  比如动态绑定 a 元素的 href 属性
 *  比如动态绑定 img 元素的 src 属性

这时，我们可以使用 v-bind 指令：

*  作用：动态绑定属性
 *  缩写：
 *  预期：any (with argument) | Object (without argument)
 *  参数：attrOrProp (optional)

## v-bind 基础、语法糖 ##

v-bind 用于绑定一个或多个属性值，或者向另一个组件传递 props 值

> 在开发中，有哪些属性需要动态进行绑定呢？  
> 比如：图片的链接 src、网站的链接 href、动态绑定一些类、样式等等

通过 Vue 实例中的 data 绑定元素的 src 和 href，代码如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 7]

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

开发中，我们通常会使用**语法糖**的形式：  
![在这里插入图片描述][20210712152208301.png]

## v-bind 绑定 class ##

很多时候，我们希望动态的来切换 class，比如：

*  当数据为某个状态时，字体显示红色
 *  当数据另一个状态时，字体显示黑色

绑定 class 有两种方式：

*  对象语法
 *  数组语法

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

**对象语法**的含义是：class 后面跟的是一个对象

*  用法一：直接通过 `{}` 绑定一个类

<h2 :class="{ 'active': isActive}">Hello World</h2>

*  用法二：也可以通过判断，传入多个值

<h2 :class="{ 'active': isActive, 'line': isLine}">Hello World</h2>

*  用法三：和普通的类同时存在，并不冲突  
    注：如果 `isActive` 和 `isLine` 都为 true，那么会有 title / active / line 三个类

<h2 class="title" :class="{ 'active': isActive, 'line': isLine}">Hello World</h2>

*  用法四：如果过于复杂，可以放在一个 methods 或者 computed 中

> 注：classes 是一个计算属性

<h2 class="title" :class="classes">Hello World</h2>

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

**数组语法**的含义是：class 后面跟的是一个数组

*  用法一：直接通过 `{}` 绑定一个类

<h2 :class="['active']">Hello World</h2>

*  用法二：也可以传入多个值

<h2 :class="['active', 'line']">Hello World</h2>

*  用法三：和普通的类同时存在，并不冲突  
    注：会有 title / active / line 三个类

<h2 class="title" :class="['active', 'line']">Hello World</h2>

*  用法四：如果过于复杂，可以放在一个 methods 或者 computed 中  
    注：classes 是一个计算属性

<h2 class="title" :class="classes">Hello World</h2>

## v-bind 绑定 style ##

我们可以利用 v-bind:style 来绑定一些 CSS 内联样式

在写 CSS 属性名的时候，比如 font-size：

*  可以使用 **驼峰式 (camelCase)** `fontSize`
 *  也可以使用 **短横线分隔 (kebab-case)** `'font-size'` (需要单引号`'`)

绑定 class 有两种方式：

*  对象语法
 *  数组语法

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

绑定方式一：对象语法

*  style 后面跟的是一个对象类型  
    对象的 key 是 CSS 属性名称  
    对象的 value 是具体赋的值，值可以来自于 data 中的属性

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

绑定方式二：数组语法

*  style 后面跟的是一个数组类型，多个值以 `,` 分割即可

# 计算属性 #

在模板中可以直接通过插值语法显示一些 data 中的数据，但是在某些情况，我们可能需要对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示

*  比如我们有 firstName 和 lastName 两个变量，我们需要显示完整的名称
 *  如果多个地方都需要显示完整的名称，我们就需要写多个 `{ {firstName}} { {lastName}}`

我们可以将上面的代码换成计算属性，计算属性是写在实例的 computed 选项中的  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 8]

> 计算属性中也可以进行一些更加复杂的操作，比如下面的例子：  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 9]

## 计算属性的 setter 和 getter ##

每个计算属性都包含一个 getter 和一个 setter

*  在上面的例子中，我们只是使用 getter 来读取
 *  在某些情况下，也可以提供一个 setter 方法（不常用）

在需要写 setter 的时候，代码如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 10]

## 计算属性的缓存 ##

methods 和 computed 看起来都可以实现我们的功能，那么为什么还要多一个计算属性这个东西呢？

*  原因：**计算属性会进行缓存，如果多次使用时，计算属性只会调用一次。**

# 事件监听 #

在前端开发中，我们需要经常和用户交互

*  需要监听用户发生的时间，比如点击、拖拽、键盘事件等等

在 Vue 中使用 **v-on** 指令监听事件

## v-on 基础、语法糖 ##

![在这里插入图片描述][20210712155108576.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 11]

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

v-on 有对应的语法糖，`v-on:click` 可以写成 `@click`：  
![在这里插入图片描述][20210712155203983.png]

## v-on 参数 ##

> 参考文章：[https://www.kancloud.cn/cyyspring/vuejs/936538\#von\_\_1][https_www.kancloud.cn_cyyspring_vuejs_936538_von_1]

当通过 methods 中定义方法，以供 `@click` 调用时，需要注意参数问题：

*  情况一：如果该方法不需要额外参数，方法后的 () 可以不添加。
    
    > 但是注意：如果方法本身中有一个参数，那么会默认将原生事件 `event` 参数传递进去
 *  情况二：如果需要同时传入某个参数，同时需要 `event` 时，通过 `$event` 传入事件

![在这里插入图片描述][20210712155417150.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 12]

## v-on 修饰符 ##

在某些情况下，我们拿到 event 的目的可能是进行一些事件处理

Vue 提供了修饰符来帮助我们方便的处理一些事件：

*  `.stop` \- 调用 `event.stopPropagation()`
 *  `.prevent` \- 调用 `event.preventDefault()`
 *  `.{keyCode | keyAlias}` \- 只当事件是从特定键触发时才触发回调
 *  `.native` \- 监听组件根元素的原生事件
 *  `.once` \- 只触发一次回调  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 13]

## watch ##

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://unpkg.com/vue@next"></script>
    </head>
    <body>
    <div id="hello-vue" class="demo">
      { {  message }}
    	<button @click="changeVal()">change</button>
    </div>
    
    <script>
    const HelloVueApp = { 
      data() { 
        return { 
          message: 'old message'
        }
      },
      watch: { 
      	message(newVal, oldVal) { 
    		console.log(oldVal, newVal)
    	}
      },
      methods: { 
      	changeVal() { 
    		this.message = "new message"
    	}
      }
    }
    
    Vue.createApp(HelloVueApp).mount('#hello-vue')
    </script>
    </body>
    </html>

# 条件判断 #

## v-if、v-else-if、v-else ##

v-if、v-else-if、v-else 这三个指令与 JavaScript 的条件语句 if、else、else if 类似

*  Vue 的条件指令可以根据表达式的值在 DOM 中渲染或销毁元素或组件

简单的案例演示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 14]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 15]  
v-if 的原理：

*  v-if 后面的条件为 false 时，对应的元素以及其子元素不会渲染
 *  也就是根本没有不会有对应的标签出现在 DOM 中

## v-show ##

v-show 的用法和 v-if 非常相似，也用于决定一个元素是否渲染  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 16]  
v-if 和 v-show 对比：

*  v-if 当条件为 false 时，压根不会有对应的元素在 DOM 中
 *  v-show 当条件为 false 时，仅仅是给元素设置 `display: none;`

v-if 和 v-show 都可以决定一个元素是否渲染，那么开发中我们如何选择呢？

*  当需要在显示与隐藏之间切换很频繁时，使用 v-show
 *  当只有一次切换时，通过使用 v-if

# 循环遍历 #

## v-for 遍历数组 ##

当我们有一组数据需要进行渲染时，我们就可以使用 v-for 来完成

*  v-for 的语法类似于 JavaScript 中的 for 循环
 *  格式如下：`v-for="item in items"` 或 `v-for="(item, index) in items"` 的形式  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 17]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 18]

## v-for 遍历对象 ##

v-for 可以遍历对象：

*  比如某个对象中存储着你的个人信息，我们希望以列表的形式显示出来
 *  格式：`v-for="(value, key) in info"` 或 `v-for="(value, key, index) in info"` ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70]

## 组件的 key 属性 ##

官方推荐我们在使用 v-for 时，给对应的元素或组件添加上一个 `:key` 属性

为什么需要这个 key 属性呢？

*  这个其实和 Vue 的虚拟 DOM 的 Diff 算法有关系

当某一层有很多相同的节点时，也就是列表节点时，我们希望插入一个新的节点

*  我们希望可以在 B 和 C 之间加一个 F  
    ![在这里插入图片描述][20210712161052725.png]
 *  Diff 算法默认执行起来是这样的  
    ![在这里插入图片描述][2021071216110960.png]  
    即把 C 更新成 F，D 更新成 C，E 更新成 D，最后再插入 E，是不是很没有效率？
 *  所以我们需要使用 key 来给每个节点做一个唯一标识  
    Diff 算法就可以正确的识别此节点，找到正确的位置区插入新的节点  
    ![在这里插入图片描述][20210712161141383.png]

总结为一句话，**key 的作用主要是为了高效的更新虚拟 DOM**

# 表单绑定 v-model #

Vue 中使用 v-model 指令来实现表单元素和数据的双向绑定  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 1]

## v-model 原理 ##

v-model 其实是一个语法糖，它的背后本质上是包含两个操作：

1.  v-bind绑定一个value属性
2.  v-on指令给当前元素绑定input事件

也就是说下面的代码写法等同：

## 修饰符 ##

**lazy 修饰符**：

*  默认情况下，v-model 默认是在 input 事件中同步输入框的数据的
 *  也就是说，一旦有数据发生改变对应的data中的数据就会自动发生改变
 *  lazy 修饰符可以让数据在失去焦点或者回车时才会更新

**number 修饰符**：

*  默认情况下，在输入框中无论我们输入的是字母还是数字，都会被当做字符串类型进行处理
 *  但是如果我们希望处理的是数字类型，那么最好直接将内容当做数字处理
 *  number 修饰符可以让在输入框中输入的内容自动转成数字类型

**trim 修饰符**：

*  如果输入的内容首尾有很多空格，通常我们希望将其去除
 *  trim 修饰符可以过滤内容左右两边的空格

[Vue]: https://www.bilibili.com/video/BV15741177Eh
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70]: /images/20221004/8a00008a6d6e46f69548a3afdc141b0b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 1]: /images/20221004/5dd9d32440d54e0ba0895c698a8c5ee6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 2]: /images/20221004/3977915f61cd4a47b1393fe1b932f875.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 3]: /images/20221004/710cd2eb594148c99dbffc4d971c1e49.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 4]: /images/20221004/7679ae26b39d41c6b4d08aef21e94666.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 5]: /images/20221004/9209a142162d4efc8f575798f585586c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 6]: /images/20221004/b1581d792e1c4a43bd3135ceb389fbf4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 7]: /images/20221004/b956858721204ed185fe73bd82b40e78.png
[20210712152208301.png]: /images/20221004/5f8e8eb6f3ad4e4e8cd57030a57f8874.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 8]: /images/20221004/ee70a262d5f0461d8015f173dd5d4e9e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 9]: /images/20221004/b74734bd029441dc8c5c9b0f8b9eb0a3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 10]: /images/20221004/2160bb7504554af68222cb5ea470111f.png
[20210712155108576.png]: /images/20221004/2d387e7d77aa4bea9d3a57708ca66253.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 11]: /images/20221004/3efc80b3ccdf4908964a9ce11303c182.png
[20210712155203983.png]: /images/20221004/30148a4acb32411db1502b99f5c84da2.png
[https_www.kancloud.cn_cyyspring_vuejs_936538_von_1]: https://www.kancloud.cn/cyyspring/vuejs/936538#von__1
[20210712155417150.png]: /images/20221004/aadff0abd78f46f7814ce357856f51ab.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 12]: /images/20221004/1113731edbb34ec7ad34c759cf013e82.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 13]: /images/20221004/70def899eb514c5e8dc4d1b9ea995a2c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 14]: /images/20221004/20b2bcccc53245a9b3f152a5e9e23d2a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 15]: /images/20221004/5d3f5b28a4c84379830c89164ad94d96.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 16]: /images/20221004/87efe88cd4c947a0927b0f9a30d99d1b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 17]: /images/20221004/4a88c7d15806409eb902e269ce3ed64c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70 18]: /images/20221004/adea3e174cc44e73b617b9f6c4aafbd9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70]: /images/20221004/8b6f11872190491b872daf945736d06b.png
[20210712161052725.png]: /images/20221004/a604c642d2bc4d08be8edf06422790b0.png
[2021071216110960.png]: /images/20221004/5cd2467d7e464e18b6f9cb09dc976929.png
[20210712161141383.png]: /images/20221004/c1dbf5d29c7344628e598dda61ed990a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 1]: /images/20221004/24939a34e5874d11a9f3baa45559c28d.png