慕课网Vue2.5去哪儿实战课程（1）

逃离我推掉我的手 2022-03-19 01:56 285阅读 0赞

**1.课程介绍**

基础内容：基础语法、MVVM模式、组件化、生命周期、动画特效

实战项目：环境搭建、使用Git、数据模拟、本地开发、前后端联调、真机测试、上线流程

Axios：Ajax数据获取  
Vue Router：多页面的路由  
Vuex：各个组件之间的数据共享  
异步组件：让我们代码上线，性能更优  
Stylus：编写前端样式  
递归组件：组件自身调用组件自己、  
插件：轮播效果  
公用组件：  
公用组件拆分：

**2.Vue起步**

本章将快速讲解部分 Vue 基础语法，通过 TodoList 功能的编写，在熟悉基础语法的基础上，扩展解析 MVVM 模式及前端组件化的概念及优势。

2.1开发TodoList（v-model、v-for、v-on）

<div id="app">
    		<input type="text" name="" v-model="inputValue">
    		<button @click="handleSubmit">提交</button>
    		<ul>
    			<li v-for="item in list">{
       {item}}</li>
    		</ul>
    	</div>
    
    	<script type="text/javascript">
    		var app = new Vue({
    			el:'#app',
    			data:{
    				inputValue:'',
    				list:['第一课的内容','第二课的内容']
    			},
    			methods:{
    				handleSubmit:function(){
    					this.list.push(this.inputValue)
    					this.inputValue = ''  //每次提交后清空
    				}
    			}
    		})
    
    	</script>

2.2MVVM模式

Model—View—ViewModel（MVVM）是一个软件架构设计模式，是一种简化用户界面的事件驱动编程方式。

MVVM 的出现促进了 GUI 前端开发与后端业务逻辑的分离，极大地提高了前端开发效率。MVVM 的核心是 ViewModel 层，它就像是一个中转站（value converter），负责转换 Model 中的数据对象来让数据变得更容易管理和使用，该层向上与视图层进行双向数据绑定，向下与 Model 层通过接口请求进行数据交互，起呈上启下作用。

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

当下流行的MVVM框架有Vue，Angular等.

简单画了一张图来说明MVVM的各个组成部分：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 1]  
**\#ViewModel层**

ViewModel是由前端开发人员组织生成和维护地视图数据层。在这一层，前端开发者对从后端获取的Model数据进行转换处理，做二次封装，以生成符合View层使用预期的视图数据模型。需要注意的是ViewModel所封装的数据模型包括视图的状态和行为两部分，而Model层的数据模型只包含状态的，比如页面的这一块展示什么，那一块展示什么这些都属于视图状态（展示），而页面加载进行时发生什么，点击这一块发生什么，这一块滚动时发生什么这些都属于视图行为（交互），视图状态和行为都封装在了ViewModel里。这样的封装使得ViewModel可用完整地去描述View层。

**由于实现了双向绑定，ViewModel 的内容会实时展现在 View 层，这是激动人心的，因为前端开发者再也不必低效又麻烦地通过操纵 DOM 去更新视图，MVVM 框架已经把最脏最累的一块做好了，我们开发者只需要处理和维护 ViewModel，更新数据视图就会自动得到相应更新，真正实现数据驱动开发**。看到了吧，View 层展现的不是 Model 层的数据，而是 ViewModel 的数据，由 ViewModel 负责与 Model 层交互，这就完全解耦了 View 层和 Model 层，这个解耦是至关重要的，它是前后端分离方案实施的重要一环。

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

MVVM简化DOM操作，主要关注在数据Model层，ViewModel主要原理是虚拟DOM和object的defineproperty方法。

MVP模式中，主要的工作在Presenter层，Presenter层很大一部分代码都在做DOM的操作（View层点击需要改变Dom，有时候直接在Presenter层处理了，有时候需要从Model读取数据）。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 3]

2.3前端组件化

如果不使用组件化，那么一个页面的逻辑代码讲非常多。

2.4使用组件改造TodoList

Vue中组件：  
注册组件就是利用Vue.component()方法，先传入一个自定义组件的名字，然后传入这个组件的配置。

// 定义一个名为 button-counter 的新组件
    Vue.component('button-counter', {
      data: function () {
        return {
          count: 0
        }
      },
      template: '<button v-on:click="count++">You clicked me {
       { count }} times.</button>'
    })
    
    <div id="components-demo">
      <button-counter></button-counter>
    </div>
    
    new Vue({ el: '#components-demo' })

全局组件的使用：

<body>
    	<div id="app">
    		<input type="text" name="" v-model="inputValue">
    		<button @click="handleSubmit">提交</button>
    		
    		<todo-item v-bind:content="item" v-for="item in list">
    			
    		</todo-item>
    	</div>
    
    	<script type="text/javascript">
    		//zujian
    		Vue.component("TodoItem",{
    			//从父组件接收内容props
    			props:['content'],
    			template:"<li>{
       { content }}</li>"
    		})
    
    
    		var app = new Vue({
    			el:'#app',
    			data:{
    				inputValue:'',
    				list:[]
    			},
    			methods:{
    				handleSubmit:function(){
    					this.list.push(this.inputValue)
    					this.inputValue = ''  //每次提交后清空
    				}
    			}
    		})
    
    	</script>
    </body>

局部组件的使用：

var TodoItem = {
    			//从父组件接收内容props
    			props:['content'],
    			template:"<li>{
       { content }}</li>" //组件内容最终会被模板template替换掉
    }
    var app = new Vue({
    			el:'#app',
    			components:{
    				TodoItem：TodoItem
    				}, //需要在Vue实例中注册组件
    			data:{
    				inputValue:'',
    				list:[]
    			},
    			methods:{
    				handleSubmit:function(){
    					this.list.push(this.inputValue)
    					this.inputValue = ''  //每次提交后清空
    				}
    			}
    		})

2.5简单的组件间传值

**主要是props和emit**

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document Vue2.x实战课程</title>
    	<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.6.3/vue.min.js"></script>
    </head>
    <body>
    	<div id="app">
    		<input type="text" name="" v-model="inputValue">
    		<button @click="handleSubmit">提交</button>
    		
    		<todo-item 
    			//v- 绑定属性，然后模板中props进行接收使用
    			v-bind:content="item"
    			v-bind:index="index" 
    			v-for="(item,index) in list"
    			@delete="handleItemDelete">
    			
    		</todo-item>
    	</div>
    
    	<script type="text/javascript">
    		//zujian
    		Vue.component("TodoItem",{
    			//从父组件接收内容props
    			props:['content','index'],
    			template:"<li @click='handleItemClick'>{
       { content }}</li>",
    			methods: {
    				handleItemClick:function(){
    					//子组件传递事件到父组件
    					this.$emit("delete",this.index);
    				}
    			}
    		})
    
    
    		var app = new Vue({
    			el:'#app',
    			data:{
    				inputValue:'',
    				list:[]
    			},
    			methods:{
    				handleSubmit:function(){
    					this.list.push(this.inputValue)
    					this.inputValue = ''  //每次提交后清空
    				},
    				handleItemDelete:function(index){
    					this.list.splice(index,1)
    				}
    			}
    		})
    
    	</script>
    
    </body>
    </html>

**3.Vue基础精讲**

3.1Vue实例

$是指Vue实例的属性或方法  
$data、  
$el、  
$destory

每一个组件经过底层编译也是一个实例，所以Vue可以说是由一个个实例组成的。

3.2Vue实例生命周期

**\{ \{ \{.生命周期函数就是vue实例在某一时间点会自动执行的函数.\}\}\}，例如beforeCreate、create、beforeMount、mounted、beforeUpdate、updated、beforeDestory、destoryed**

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

**在某一时刻，程序内部会自动执行的代码，就是钩子。**

比如 created 钩子可以用来在一个实例被创建之后执行代码：

new Vue({
      data: {
        a: 1
      },
      created: function () {
        // `this` 指向 vm 实例
        console.log('a is: ' + this.a)
      }
    })
    // => "a is: 1"

也有一些其它的钩子，在实例生命周期的不同阶段被调用，如 mounted、updated 和 destroyed。生命周期钩子的 this 上下文指向调用它的 Vue 实例。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 4]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 5]  
update指页面dom是否被更新完，不是数据是否被更新完。

生命周期中mounted最常用。

参考文章：  
https://segmentfault.com/a/1190000011381906  
https://juejin.im/entry/5aee8fbb518825671952308c

3.3Vue的模板语法

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。

在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。

v-text、v-html、v-bind：

<div v-text="name"></div> //v-text让innerText指向name，所以和下面代码作用是一样的
    <div>{
       {name}}</div>
    
    //一个是原样输出，一个是编译后输出，会将数据解释为普通文本
    <div v-text='name1'></div>
    <div v-html='name1'></div>
    
    //绑定属性
    <div v-bind:title="name"></div>
    
    new Vue({
    	el:"#app",
    	data:{
    		name:"Dell",
    		name1:"<h1>Dell</h1>"
    	}
    })

Vue中v-click或者v-text或者v-html，当我们看见`v-`这样形式时，后面的`" "`中不是字符串，是JavaScript表达式。

3.4计算属性，方法和侦听器

computed、watch（methods属性里面是方法，computed属性里面是变量，watch只能watch是data里面的数据；）

//computed
    {
       {fullName}}
    data:{
    	firstName:'dell',
    	lastName:'lee'
    }
    computed:{
    	fullName:function(){
    		return this.firstName + " " + this.lastName
    	}
    }
    
    //方法
    <div>
    	{
       {fullName()}}
    </div>
    methods:{
    	fullName:function(){
    		return this.firstName + " " + this.lastName
    	}
    }
    
    //watch（firstName与lastname是watch监听的属性，对应的值是函数）
    data:{
    	firstName:'dell',
    	lastName:'lee'
    },
    watch:{
    	firstName:function(){
    		this.fullName = this.firstName + " " + this.lastName;
    	},
    	lastName:function(){
    		this.fullName = this.firstName + " " + this.lastName;
    	}
    }

方法调用和属性调用，两种方式的最终结果确实是完全相同的。

然而，不同的是计算/调用属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果（也就是返回缓存结果），而不必再次执行函数。

相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。如果你不希望有缓存，请用方法来替代。

3.5计算属性的getter和setter

计算属性的get和set  
computed对象：里面的属性为计算属性,里面有两种方式  
1.计算属性fullName为变量 对应的值是函数 fullName:function()\{return …\}  
2.计算属性fullName为对象，此时此对象有2个方法，get与set方法  
特性：get里面所依赖的值也会发生变化，他就会重新的计算，get里面的变化可以通过set去改变。

computed:{
    	fullName:
    		get:function(){
    			return this.firstName + " " + this.lastName
    		},
    		set:function(value){
    			var arr = value.split(" ");
    			this.firstName = arr[0];
    			this.lastName = arr[1];
    		}
    }
    
    vm.fullName = "Mike Wang" //默认使用set方法，然后改变firstName和lastName的值了
    {
       {fullName}};   //默认使用get方法

3.6Vue中的样式绑定

:class="\{activated:isActivated\}"的意思是class是activated，这个class的样式显示不显示由isActivated是true还是false决定。

//第一种：class的对象绑定：以class和对象的形式，样式和数据的绑定
    <style>
    	.activated{
    		color:red;
    	}
    </style>
    <div @click="handleDivClick"
    	:class="{activated:isActivated}">
    	Hell world
    </div>
    new Vue({
    	el:"#app",
    	data:{
    		isActivated:false
    	},
    	methods:{
    		handleDivClick:function(){
    			this.isActivated = !this.isActivated
    		}
    	}
    })
    
    //第二种：class的数组绑定
    <style>
    	.activated{
    		color:red;
    	}
    </style>
    <div @click="handleDivClick"
    	:class="[activated]">
    	Hell world
    </div>
    new Vue({
    	el:"#app",
    	data:{
    		activated:" "
    	},
    	methods:{
    		handleDivClick:function(){
    			this.isActivated =
    				 this.activated==="activated" ? " " : "activated"
    		}
    	}
    })
    
    //看一个例子
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Hello World</title>
        <script type="text/javascript" src="./vue.js"></script>
        <style type="text/css">
            .activated1{
                color:red;
            }
        </style>
    </head>
    <body>
    
        <div id="app" @click="handleDivClick"
             v-bind:class="[activated]">
            Hello World
        </div>
    
        <script>
            var app = new Vue({
                el:'#app',
                data:{
                    activated:""
                },
                methods:{
                    handleDivClick:function(){
                        this.activated = "activated1"
                    }
                }
            })
        </script>
    
    </body>
    </html>

再看一个数组示例（数组里是变量，data里面是对变量的初始值，要和class样式关联在一起，需要初始化或者function中设置）：

.activated{
    	color: red;
    }
    div1{
    	color: green;
    }
    div2{
    	font-size: 18px;
    }
    
    	<div id="app">
    	
    		<div @click="handleDivClick"
    			 :class="{activated:isActivated}"
    			>
    			点击
    		</div>
    			
    		<div
    			:class="[div01,div02]">
    			Hello World
    		</div>
    
    	</div>
    	<script>
    
    		var app = new Vue({
    			el:"#app",
    			data:{
    				isActivated:false,
    				div01:'',
    				div02:'',
    			},
    			methods:{
    				handleDivClick:function(){
    					//this.isActivated=this.isActivated?false:true;
    					this.isActivated = !this.isActivated;
    					this.div01 = 'div1',
    					this.div02 = 'div2'
    
    				}
    			}
    		})
    
    </script>

使用class是内联方式，我们还可以通过使用style进行嵌入方式.

<div @click="handleDivClick"
    	:style="styleObj">  //style样式可以由多个决定[styleObj1,styleObj2]
    	Hell world
    </div>
    new Vue({
    	el:"#app",
    	data:{
    		styleObj:{
    			color:"black"
    		}
    	},
    	methods:{
    		handleDivClick:function(){
    			this.styleObj.color =
    				this.stylrObj.color === "black" ? "red" : "black"
    		}
    	}
    })
    
    //还可以写成下面的形式
    <div @click="handleDivClick"
    	:style="[styleObj,{fontize:'20px'}]">
    </div>

3.7Vue中的条件渲染

条件渲染：v-if、v-else、v-else-if、v-show

v-if和v-show都是重绘

v-show已经渲染到页面，不过display属性为none

<div id="app">
    
    	<div v-if="show">
    		{
       {message}}
    	</div>
    	<div v-else>
    			else
    	</div>
    	
    	<button
    	 @click="clickShow">
    		显示 	
    	</button>
    </div>
    <script>
    
    	var app = new Vue({
    		el:"#app",
    		data:{
    			show:false,
    			message:"Hello World"
    		},
    		methods:{
    			clickShow:function(){
    				this.show = !app.show;
    			}
    		}
    	})
    
    </script>

不推荐同时使用v-if与v-for

**还有注意一个问题：**

Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做除了使 Vue 变得非常快之外，还有其它一些好处。例如，如果你允许用户在不同的登录方式之间切换：

<template v-if="loginType === 'username'">
      <label>Username</label>
      <input placeholder="Enter your username">
    </template>
    <template v-else>
      <label>Email</label>
      <input placeholder="Enter your email address">
    </template>

那么在上面的代码中切换 loginType 将不会清除用户已经输入的内容。因为两个模板使用了相同的元素，`<input>`不会被替换掉——仅仅是替换了它的 placeholder。

效果可以去官网查看

这样也不总是符合实际需求，所以 Vue 为你提供了一种方式来表达“这两个元素是完全独立的，不要复用它们”。只需添加一个具有唯一值的 key 属性即可：

<template v-if="loginType === 'username'">
      <label>Username</label>
      <input placeholder="Enter your username" key="username-input">
    </template>
    <template v-else>
      <label>Email</label>
      <input placeholder="Enter your email address" key="email-input">
    </template>

现在，每次切换时，输入框都将被重新渲染。

3.8Vue中的列表渲染

1.数组列表渲染  
2.对象列表渲染

<div id="app">
    	//1.数组列表渲染
    	<div v-for="(item,index) of list">
    		{
       {item+'-'+index}}
    	</div>
    	//2.对象列表渲染
    	<div v-for="(value,key,index) of object">
    		{
       {value+'='+key+'='+index}}
    	</div>
    	
    </div>
    <script>
    	var app = new Vue({
    		el:"#app",
    		data:{
    			list:[1,2,3,4,5,6],
    			object:{
    				firstName: 'John',
      				lastName: 'Doe',
      				age: 30
    			}
    		},
    		methods:{
    			
    		}
    	})
    </script>
    
    <ul id="v-for-object" class="demo">
      <li v-for="value in object">
        {
       { value }}
      </li>
    </ul>
    
    new Vue({
      el: '#v-for-object',
      data: {
        object: {
          firstName: 'John',
          lastName: 'Doe',
          age: 30
        }
      }
    })

Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新。这些方法如下：  
push()  
pop()  
shift()  
unshift()  
splice()  
sort()  
reverse()

`：key="item.id"`为什么这样设置：  
建议尽可能在使用 v-for 时提供 key，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。  
因为它是 Vue 识别节点的一个通用机制，key 并不与 v-for 特别关联，key 还具有其他用途，我们将在后面的指南中看到其他用途。

想问一下为什么key值用index性能不如用id？  
参考文章：https://www.cnblogs.com/tim100/p/7262963.html

3.9Vue中的set方法

结合老师讲的和自己测试，  
修改对象有两种方法：1.修改引用 2.set方法  
修改数组有三种方法：1.修改引用 2.set方法 3.数组方法

可以参考：https://www.jianshu.com/p/71c07d8a5f30

<div id="app">
    
    		<button>对象/数组的修改</button>
    
    		<div v-for="(item) of arr1">
    			{
       {item}}
    		</div>
    
    		<div v-for="(value,key,index) of obj1">
    			{
       {value+'-'+key}}
    		</div>
    		
    	</div>
    	<script>
    
    		var app = new Vue({
    			el:"#app",
    			data:{
    				arr1:[1,2,3,4,5,6],
    				obj1:{
    					firstName: 'John',
          				lastName: 'Doe',
          				age: 30
    				},
    				listObj=[
    					{id:1,text:a},
    					{id:2,text:b}
    				]
    			},
    			methods:{
    				
    			}
    		})
    	</script>
    
    //修改数组三种方法vm.set(target,index,val)
    app.arr1.splice(1,1,10)
    
    Vue.set(app.arr1,1,10)
    10
    app.$set(app.arr1,2,20)
    20
    
    app.arr1 = [1,2,3,3,2,1]
    
    //修改对象两种方法vm.set(target,key,val)
    Vue.set(app.obj1,'age',50)
    50
    app.$set(app.obj1,'firstName','Xie')
    "Xie"
    
    app.obj1 = {1:'1',2:"2"}
    
    //修改元素是对象类型的数组,先获取到数组某一项vm.listObj[]，然后对这个具体项，就像对象类型一样操作key/value
    Vue.set(vm.listObj[0],'id',3)

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

看了上面代码，我们可能思考一个问题：Vue.set（）与vm.$set（)都有何区别？

一个是类方法，一个是实例方法，类和实例要区分开。  
没区别，这两个指向的是同一个函数

Vue.set === Vue.prototype.$set // 返回 true

vm 是 Vue 的实例，vm. s e t 就 是 V u e . p r o t o t y p e . set 就是 Vue.prototype. set就是Vue.prototype.set，就是 Vue.set，你如果不理解什么是 prototype，建议你重新去学习 javascript 的基础知识

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

可以参考文章：  
https://www.cnblogs.com/zccblog/p/7192420.html  
https://blog.csdn.net/panyang01/article/details/76665448

**最后两小节还需要再看。**

3.10Vue中的事件绑定

v-on的事件函数如果不加(),则会默认传入事件对象e；否则事件函数如果有(),则不会默认传入e，但可以通过$event获取到事件对象。

事件修饰符  
.stop—阻止事件冒泡 v-on:click.stop=“doThis”  
.prevent—阻止事件默认行为, 如a标签的自动跳转  
.self—只在点击自身元素的时候才会执行，其他的元素不会触发  
.once—只触发一次回调

修饰符可以进行串联，相应的代码会以同样的顺序产生  
用 v-on:click.prevent.self 会阻止所有的点击,而 v-on:click.self.prevent 只会阻止对元素自身的点击

1.事件修饰符  
stop 当子元素冒泡到当前stop元素时停止  
capture 点击子元素时候优先冒泡该元素，后冒泡子元素到父辈元素  
self 只能自己点击自己才会触发，其他元素不会触发  
once 该元素只冒泡一次 再点不会受到监听  
prevent 阻止超链和form的页面刷新操作

2.按键修饰符（点击按键时，方法才会执行）  
<input type=“text” @keyDown.enter=“handleKeyDown”>  
enter、 tab 、delete 、 esc

3.系统修饰符  
ctrl、alt、shift、meta

4.鼠标按键修饰符  
right、left 、middle

3.11Vue中的表单绑定

表单绑定修饰符

.lazy 鼠标失去焦点时同步数据  
.number 将输入的数字内容转化为number类型  
.trim 去除输入框内容的首位空格

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70]: /images/20220319/436b779a77e148e1bf145bca843a5118.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 1]: /images/20220319/2660c1b7cad24dc991ed90b21090e98f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 2]: /images/20220319/bedb8cf855e74fd5bbeba3af5750bd11.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 3]: /images/20220319/1e7ac37fb4934f90852a8793e4451e0c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 4]: /images/20220319/3c329dcf4331428fa3f32e86f5170761.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 5]: /images/20220319/32a8613224b846daa87f30335ac3a8ac.png