初识vue（1）——一篇博客教你掌握 vue 基础

不念不忘少年蓝@ 2023-07-24 14:45 95阅读 0赞

最近跟着vue相关视频学了些vue的基础知识，做此总结，以防遗忘。

## 一. Hello Vue ##

**1、引入vue.js：**

**2、创建Vue对象：**  
**el : 指定根element(选择器，指定用vue来管理页面中的哪个标签区域)**  
**data : 初始化数据**

这是html代码：

<div id="app">		
    	<p>{
       {message}}</p>		
    </div>

这是js代码：

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

## 二. 理解什么是MVM ##

> MVVM指的是  
>   model：模型，数据对象（data）  
>   view：视图，模板页面  
>   viewModel：视图模型（Vue的实例vm）

其中，`model`指：data部分  
![在这里插入图片描述][2020102616025815.png_pic_center]

`view`指下面这部分：  
![在这里插入图片描述][20201026160142698.png_pic_center]

`viewModel`指下面这部分：  
![在这里插入图片描述][202010261603589.png_pic_center]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center]

## 三. 双向数据绑定 v-model ##

<div id="app">
    	<input type="text" v-model="username" />
    	<p>Hello {
       {username}}</p>			
    </div>

const vm = new Vue({ 
    	el:'#app',
    	data:{ 
    		username:'Tom'
    	}
    })

![在这里插入图片描述][20201026155458447.png_pic_center]  
![在这里插入图片描述][20201026155516118.png_pic_center]

## 四. 字母转为大写 toUpperCase() ##

<div id="app">	
    	<p>{
       {msg}}</p>        
    	<p>{
       {msg.toUpperCase()}}</p>
    </div>

![在这里插入图片描述][20201026162851394.png_pic_center]

## 五. 文本渲染三种方法 ：\{ \{\}\} 、v-text 和 v-html ##

> \{ \{\}\}：即textContent，将元素当成纯文本输出。  
> v-text：即textContent，将元素当成纯文本输出。  
> v-html：即innerHTML，将元素当成HTML标签解析后输出。

![在这里插入图片描述][20201026163959472.png_pic_center]

## 六. 强制数据绑定 v-bind:   简写 : ##

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

## 七. 绑定事件监听 v-on:  简写 @ ##

![在这里插入图片描述][20201026165500435.png_pic_center]  
![在这里插入图片描述][20201026165624489.png_pic_center]

## 八. 计算属性 computed ##

![在这里插入图片描述][20201026171330812.png_pic_center]

## 九.监视 watch $watch ##

> **watch 和 $watch 都能实现监视。  
> 如果想要实现上述 计算属性实例的效果，需要写两个 监视。如下实例：用了一个 watch ,一个 $watch。**

![在这里插入图片描述][20201026173339417.png_pic_center]

## 十一. 计算属性之 get 与 set ##

> **计算属性高级：  
>   通过getter/setter实现对属性数据的显示和监视。  
>   计算属性存在缓存, 多次读取只执行一次getter计算。**

![在这里插入图片描述][20201026191828762.png_pic_center]

## 十二. class绑定: :class=‘xxx’ ##

> **三种情况：**  
> **  xxx是字符串  
>   xxx是对象  
>   xxx是数组**

<div id="demo">
       <h2>class绑定: :class='xxx'</h2>
       <p class="classC" :class="a">xxx是字符串</p>
       <p :class="{classA:isA,classB:isB}">xxx是对象</p>
       <p :class="['classA','classC']">xxx是数组</p>
       <button @click="update">更新</button>		
    </div>

.classA { 
    	color: red;
    }
    .classB { 
    	background: blue;
    }
    .classC { 
    	font-size: 20px;
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center 2]  
**  点击更新按钮后，效果如下：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center 3]

## 十三. style绑定 ##

<div id="demo">
    	<p :style="{ color: activeColor, fontSize: fontSize + 'px' }">style绑定</p>		   
    	<button @click="update">更新</button>		
    </div>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center 4]  
**  点击更新按钮后，效果如下：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center 5]

## 十四. 条件渲染 ##

> **  1. 条件渲染指令  
>      v-if：能确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。但如果在初始渲染时条件为假，则什么也不做，直到条件第一次变为真时，才会开始渲染。  
>      v-else  
>       v-show：不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。  
>   2. 比较v-if与v-show  
>      如果需要频繁切换， v-show 较好**  
> **     如果在运行时条件很少改变，则使用 v-if 较好。**

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

## 十五. 遍历 v-for ##

> **vue重写了数组中的一系列改变数组内部数据的方法（先调用原生，再更新页面）————>数组内部改变，页面自动变化**

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

<div id="demo">
    	<h2>v-for 遍历数组</h2>
    	<ul>
    	  	<li v-for="(p,index) in persons" :key="index">
    	  		{ { index}}--{ { p.name}}--{ { p.age}}
    	  		---<button @click="deleteP(index)">删除</button>
    	  		---<button @click="updateP(index, {name:'Cat', age: 16})">更新</button>
    	  	</li>
      </ul>	
    
      <h2>v-for 遍历对象</h2>
      <ul>
        <li v-for="(value,key) in persons[1]" :key="key">
        	{ { value}}---{ { key}}
        </li>
      </ul>
    </div>

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

## 十六. 列表搜索和排序 ##

> **看下面的示例，搜索是通过computed属性计算出新的数组，该数组通过filter对persons数组进行过滤得到。**  
> **排序是通过点击不同的按钮传递不同的orderType值进行判断，使用sort方法。**

<div id="demo">
    	<input type="text" v-model="searchName">
    	<ul>
    		<li v-for="(p, index) in filterPersons" :key="index">
    	      {
       {index}}--{
       {p.name}}--{
       {p.age}}
    	    </li>
    	</ul>
    	<div>
    	    <button @click="setOrderType(1)">年龄升序</button>
    	    <button @click="setOrderType(2)">年龄降序</button>
    	    <button @click="setOrderType(0)">原本顺序</button>
    	</div>
    </div>

![在这里插入图片描述][20201026223421685.png_pic_center]  
![在这里插入图片描述][20201026223430778.png_pic_center]

## 十七. 事件处理 ##

#### 1. 绑定监听: ####

> **（1）v-on:xxx=“fun”  
> （2）@xxx=“fun”  
> （3）@xxx=“fun(参数)”  
>   默认事件形参: event  
>    隐含属性对象: $event**

![在这里插入图片描述][2020102708390433.png_pic_center]  
![在这里插入图片描述][20201027083916725.png_pic_center]  
![在这里插入图片描述][20201027083931880.png_pic_center]  
![在这里插入图片描述][2020102708394680.png_pic_center]

#### 2. 事件修饰符: ####

> .**prevent : 阻止事件的默认行为 event.preventDefault()  
> .stop : 停止事件冒泡 event.stopPropagation()**

**  可以自己试试，可以发现，事件的默认行为和冒泡行为全部被阻止了。**

#### 3. 按键修饰符: ####

> .**keycode : 操作的是某个keycode值的健  
> .enter : 操作的是enter键，enter键的keycode值为13，以下以enter为示例。**

![在这里插入图片描述][20201027085558137.png_pic_center]  
![在这里插入图片描述][20201027085617913.png_pic_center]

## 十八. 表单输入绑定 ##

> **使用v-model(双向数据绑定)自动收集数据  
> text/textarea  
> checkbox  
> radio  
> select**

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

## 十九. 生命周期 ##

> **1. vue对象的生命周期  
> 1). 初始化显示  
> \* beforeCreate()  
> \* created()  
> \* beforeMount()  
> \* mounted()  
> 2). 更新状态  
> \* beforeUpdate()  
> \* updated()  
> 3). 销毁vue实例: vm.$destory()  
> \* beforeDestory()  
> \* destoryed()  
> 2. 常用的生命周期方法  
> created()/mounted(): 发送ajax请求, 启动定时器等异步任务  
> beforeDestory(): 做收尾工作, 如: 清除定时器**

<div id="test">
    	<button @click="destroyVue">destory vue</button>
    	<p v-if="isShow">尚硅谷IT教育</p>
    </div>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center 10]  
**附上vue的生命周期图：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center 11]

## 二十. 过渡和动画 ##

> **1. vue动画的理解  
>   操作css的trasition或animation  
>   vue会给目标元素添加/移除特定的class  
> 2. 基本过渡动画的编码  
>   1). 在目标元素外包裹  
>   2). 定义class样式  
>    1>. 指定过渡样式: transition  
>    2>. 指定隐藏时的样式: opacity/其它  
> 3. 过渡的类名  
>   xxx-enter-active: 指定显示的transition  
>   xxx-leave-active: 指定隐藏的transition  
>   xxx-enter**

#### 实例一： ####

<div id="demo">
    	<button @click="show = !show">Toggle</button>
    	<transition name="xxx">
    		<p v-show="show">hello</p>
    	</transition>
    </div>

/*指定过渡样式*/
    .xxx-enter-active, .xxx-leave-active { 
    	transition: opacity 1s
    }
    /*指定隐藏时的样式*/
    .xxx-enter, .xxx-leave-to { 
    	opacity: 0;
    }

#### 实例二： ####

<div id="demo2">
    	<button @click="show = !show">Toggle2</button>
    	<transition name="move">
    		<p v-show="show">hello</p>
    	</transition>
    </div>

.move-enter-active { 
    	transition: all 1s
    }
    
    .move-leave-active { 
    	transition: all 3s
    }
    
    .move-enter, .move-leave-to { 
    	opacity: 0;
    	transform: translateX(20px)
    }

#### 实例三： ####

<div id="example-2">
    	<button @click="show = !show">Toggle show</button>
    	<br>
    	<transition name="bounce">
    		<p v-if="show" style="display: inline-block">Lorem</p>
    	</transition>
    </div>

在这里插入代码片 `.bounce-enter-active { 
    	animation: bounce-in .5s;
    }
    .bounce-leave-active { 
    	animation: bounce-in .5s reverse;
    }
    @keyframes bounce-in { 
    	0% { 
    		transform: scale(0);
    	}
    	50% { 
    		transform: scale(1.5);
    	}
    	100% { 
    		transform: scale(1);
    	}
    }
    
    ```javascript <script> new Vue({ 
        el: '#example-2', data: { 
          show: true
        }
      })
    </script>

#### 可自己运行查看效果。 ####

## 二十一. 过滤器 ##

> **1. 理解过滤器  
> 功能: 对要显示的数据进行特定格式化后再显示  
> 注意: 并没有改变原本的数据, 而是产生新的对应的数据  
> 2. 编码  
> 1). 定义过滤器  
> Vue.filter(filterName, function(value\[,arg1,arg2,…\])\{  
> // 进行一定的数据处理  
> return newValue  
> \})  
> 2). 使用过滤器**  
> 
> 
> \{ \{myData | filterName\}\}
> 
>   
> 
> 
> \{ \{myData | filterName(arg)\}\}

<div id="test">
    	<h2>显示格式化的日期时间</h2>
    	<p>{
       {time}}</p>
    	<p>最完整的: {
       {time | dateString}}</p>
    	<p>年月日: {
       {time | dateString('YYYY-MM-DD')}}</p>
    	<p>时分秒: {
       {time | dateString('HH:mm:ss')}}</p>
    </div>

#### 这里引入了moment，详情可查看其官网[moment.js][] ####

#### 也可以查看我的博客 [初识react（13）—— 使用 moment 来获取日期][react_13_ _ moment] ，不过我这篇博客是基于 react 写的，可以参考着看。下面是上述代码运行结果： ####

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

## 二十二. 指令 ##

#### 1. 常用内置指令 ####

> **v:text : 更新元素的 textContent  
> v-html : 更新元素的 innerHTML  
> v-if : 如果为true, 当前标签才会输出到页面  
> v-else: 如果为false, 当前标签才会输出到页面  
> v-show : 通过控制display样式来控制显示/隐藏  
> v-for : 遍历数组/对象  
> v-on : 绑定事件监听, 一般简写为@  
> v-bind : 强制绑定解析表达式, 可以省略v-bind  
> v-model : 双向数据绑定  
> ref : 为某个元素注册一个唯一标识, vue对象通过$refs属性访问这个元素对象  
> v-cloak : 使用它防止闪现表达式, 与css配合: \[v-cloak\] \{ display: none \}**

<div id="example">
      <p ref="msg">abcd</p>
      <button @click="hint">提示</button>
      <p v-cloak>{
       {content}}</p>
    </div>

[v-cloak] {  display: none }

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

#### 2. 自定义指令 ####

> **1. 注册全局指令  
> Vue.directive(‘my-directive’, function(el, binding)\{  
> el.innerHTML = binding.value.toupperCase()  
> \})  
> 2. 注册局部指令  
> directives : \{  
> ‘my-directive’ : \{  
> bind (el, binding) \{  
> el.innerHTML = binding.value.toupperCase()  
> \}  
> \}  
> \}  
> 3. 使用指令  
> v-my-directive='xxx’**

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

## 二十三. 插件 ##

#### 1.首先创建一个js文件，如： ####

![在这里插入图片描述][20201029212542520.png_pic_center]

#### 2.在该js文件中，写如下所示代码，向外暴露该 js 文件： ####

(function (window) { 
    
      //这里写入你的代码
      
      //向外暴露
      window.MyPlugin = MyPlugin
    })(window)

#### 3.在 html 文件中引入该 js 文件： ####

#### 4.使用 该 js 文件方法： ####

Vue.use(MyPlugin)
    Vue.xxx()

### 以上是我通过看视频学习，对 vue 基础知识的一次总结，主要是为了方便自己以后翻阅，希望也能帮助到大家。 ###

### 以上内容来自尚硅谷的视频，不理解的可以看视频学习。 ###

[20200412173148495.png]: /images/20230528/5aafc99dcf2a45d1944aac77ce47f1df.png
[2020102616025815.png_pic_center]: /images/20230528/1c7d8a1ca9574a819b1ee75ebf01e405.png
[20201026160142698.png_pic_center]: /images/20230528/2cafe356c19a48e4ac2102bb70385656.png
[202010261603589.png_pic_center]: /images/20230528/488a8dfbeb6b495f941750529f684582.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center]: /images/20230528/5189a27167cf4954b606c9b7013f766f.png
[20201026155458447.png_pic_center]: /images/20230528/abd0a2cffafb4a2c91cd16e9a5e64bc0.png
[20201026155516118.png_pic_center]: /images/20230528/8e7f77560b9f4e46ba9d8cec53460911.png
[20201026162851394.png_pic_center]: /images/20230528/647eeb1087b64152b3bf652cfdd87ba4.png
[20201026163959472.png_pic_center]: /images/20230528/6fb9c908a7244f5987014c5ea3338d7b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20230528/9df2b09509d64070be4bb30256eec3c2.png
[20201026165500435.png_pic_center]: /images/20230528/ada25761c13e4cddb67dd7dfa5ca82d6.png
[20201026165624489.png_pic_center]: /images/20230528/691574cfa8a84ca3bedcb1b963ef15ad.png
[20201026171330812.png_pic_center]: /images/20230528/b0ab84c9f84b4f11916687a7d2ec4c34.png
[20201026173339417.png_pic_center]: /images/20230528/2dc4996bcb5d441fb102b25375c0fec0.png
[20201026191828762.png_pic_center]: /images/20230528/1a7cac633aef4f83a9944baf6bef3b82.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20230528/379b2b625e324de09cbb12743c96ed9c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20230528/af82081cd5904be5af3226a21afed226.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20230528/f8bd8e12176046bf8c0b0e2b39fc93a9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20230528/18d25750893b4143931e4d8d79ca51b2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20230528/432e310c3d3443b0a3b0ba61429837cb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20230528/34f79d13d39e4eb6b1fdc89d384b173e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center 8]: /images/20230528/e1a736314fa94a2e898a27256957cf29.png
[20201026223421685.png_pic_center]: /images/20230528/842ebdb8b6f545dc89ff3227195faead.png
[20201026223430778.png_pic_center]: /images/20230528/5e3bea174d3341ec917205d378431faf.png
[2020102708390433.png_pic_center]: /images/20230528/7496cc1e1b77402d8bd8588c3a4c0599.png
[20201027083916725.png_pic_center]: /images/20230528/c169084bc049492e97a66a3dd2bbbe75.png
[20201027083931880.png_pic_center]: /images/20230528/44b7f7bad2ba4b3f84e251d9e9ca1257.png
[2020102708394680.png_pic_center]: /images/20230528/745965629c04451681c0a0e560ae5f13.png
[20201027085558137.png_pic_center]: /images/20230528/e5b8abef949e4c6c92966ea64e1da14f.png
[20201027085617913.png_pic_center]: /images/20230528/f6eda0fc11dd42d293e535fea57eefab.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center 9]: /images/20230528/a69e294c47dd43709579a31aa1d724c9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center 10]: /images/20230528/937ef53bf5e34e6e9ffc79f53bc3908d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center 11]: /images/20230528/b118f06a31f7451fb17f31cd034a652d.png
[moment.js]: http://momentjs.cn/
[react_13_ _ moment]: https://blog.csdn.net/qq_43652492/article/details/108214803
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center 12]: /images/20230528/63850ba9afda4746a8e2a0d28c949cb1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center 13]: /images/20230528/9d2b3e36d3ca4d0094a311352426a16e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center 14]: /images/20230528/6a97c8e02b194e2092b4939f1d6ce1b7.png
[20201029212542520.png_pic_center]: /images/20230528/5fedcefc12844018af7e4391e83d110d.png