vueDemo Hbuild教程

àì夳堔傛蜴生んèń 2022-10-19 12:41 159阅读 0赞

**目录**

Hbuilid设置主题

Hbuilid设置自动保存

生命周期

v-html输出标准nheml

v-bind

\{ \{ message.split('').reverse().join('') \}\}

v-if

vue methor

多样式绑定

class 设置样式

v-else-if

v-show

v-for

v-on

函数不需要初始化

vue 双向绑定

placehold：占位，hint

v-moudle

input type="submit" 和"button"有什么区别

属性必须用都好进行分隔

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

# Hbuilid设置主题 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70][]

# Hbuilid设置自动保存 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 1][]

[https://learning.dcloud.io/\#/?vid=1][https_learning.dcloud.io_vid_1]

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script src="vue.js"  type="text/javascript" charset="utf-8"></script>
    	</head>
    	<body>
    		<div id="app" >
    			{
       { message }}
    		</div>
    
    		<script type="text/javascript">
    			var app = new Vue({
    			  el: '#app',
    			  data: {
    			    message: 'Hello Vue!'
    			  }
    			})
    		</script>
    
    	</body>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 2][]

[https://learning.dcloud.io/\#/?vid=3][https_learning.dcloud.io_vid_3]

[https://cn.vuejs.org/v2/guide/instance.html\#数据与方法][https_cn.vuejs.org_v2_guide_instance.html]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 3][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 4][] ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 5][]

#  生命周期 #

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
    	</head>
    	<body>
    		<div id="app">
    			{
       { a }}
    			
    		</div>
    
    		<script type="text/javascript">
    			var data = {
    				a: 1
    			};
    			var vm = new Vue({
    				el: '#app',
    				data: data
    			});
    			vm.$watch('a',function(newVal,oloVal){
    				console.log(newVal,oloVal)
    			})
    			vm.$data.a="ew";
    		</script>
    
    	</body>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 6][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 7][]

#  v-html输出标准nheml #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 8][]

# v-bind #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 9][]

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
    	</head>
    	<body>
    		<div id="app">
    			{
       { a }}
    			<a v-bind:href="url"> 123</a>
    			<p v-bind:class="color"> 456</p>
    			
    		</div>
    
    		<script type="text/javascript">
    			var data = {
    				a: 1,
    				url:"www.baidu.com",
    				color:"red",
    			};
    			var vm = new Vue({
    				el: '#app',
    				data: data
    			});
    			vm.$watch('a',function(newVal,oloVal){
    				console.log(newVal,oloVal)
    			})
    			vm.$data.a="ew";
    		</script>
    		<style>
    		.red {color: aqua;}
    		
    		</style>
    
    	</body>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 10][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 11][]

#  \{ \{ message.split('').reverse().join('') \}\} #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 12][]

# v-if![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 13][] #

# vue methor![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 14][] #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 15][]

# 多样式绑定 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 16][]

# class 设置样式![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 17][] #

# v-else-if #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 18][]

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
    	</head>
    	<body>
    		<div id="app">
    			<div v-if="type===1">1</div>
    			<div v-else-if="type===2">2</div>
    
    			<div v-else-if="type===3">3</div>
    
    			<div v-else-if="type===4">4</div>
    
    			<div v-else=>Not</div>
    
    		</div>
    		<script type="text/javascript">
    			var vm = new Vue({
    				el: '#app',
    				data: {
    
    					type: 0
    				}
    			});
    		</script>
    	</body>
    </html>

# v-show![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 19][] #

#  v-for![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 20][] #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 21][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 22][]

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
    	</head>
    	<body>
    		<div id="app">
    			<ul>
    				<li v-for="item in items">{
       {item.message}}</li>
    					<li v-for="value in mm">{
       {value}}</li>
    			</ul>
    
    		</div>
    		<script type="text/javascript">
    			var vm = new Vue({
    				el: '#app',
    				data: {
    					items:[
    						{message:"133"},
    						{message:"233"},
    						{message:"333"}
    					],
    					mm:{
    						ce1:'ce1',
    						ce2:'cd2',
    						ce3:'ce3'
    					}
    				}
    			});
    		</script>
    	</body>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 23][]

# v-on![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 24][] #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 25][]

# 函数不需要初始化 #

# ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 26][] #

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
    	</head>
    	<body>
    		<div id="app">
    			<button v-on:click="sum=sum+1">点击次数:{
       {sum}}</button>
    			<button v-on:click="sumFun=fun(1,$event)">点击次数:{
       {sumFun}}</button>
    		</div>
    		<script type="text/javascript">
    			var vm = new Vue({
    				el: '#app',
    
    				data: {
    					sum: 0,
    					sumFun: 0
    				},
    				methods: {
    					fun: function(i,e) {
    						i += i;
    						alert(i)
    						console.log("-----")
    						console.log(e)
    						console.log("-----")
    						
    						return i
    					}
    				}
    			});
    		</script>
    
    	</body>
    
    </html>

# ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 27][] #

#  vue 双向绑定![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 28][] #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 29][]

###  ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 30][]placehold：占位，hint ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 31][]

#  v-moudle![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 32][] #

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
    	</head>
    	<body>
    		<div id="app" style="margin-top: 20px; color: red;">
    			<input type="radio" id="idOne" value="valueOne" v-model="Message" />
    			<label for="idOne">contentOne</label>
    			
    			<input type="radio" id="idTwo" value="valueTwo" v-model="Message" />
    			<label for="idOne">contentTwo</label>	
    			
    		
    	        <input type="radio" id="idThree" value="valueThree" v-model="Message" />
    			<label  for="idOne">contentThree</label>
    			<br />
    			<span style="margin-left:1.25rem;">Message:</span>
    			<span style="color: aqua;">{
       {Message}}</span>
    			
    		</div>
    		<script type="text/javascript">
    			var vm = new Vue({
    				el: '#app',
    
    				data: {
    					Message:""
    				},
    
    			});
    		</script>
    
    	</body>
    
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 33][]

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
    	</head>
    	<body>
    		<div id="app" style="margin-top: 20px; color: red;">
    			<input type="checkbox" id="idOne" value="valueOne" v-model="Message" />
    			<label for="idOne">contentOne</label>
    			
    			<input type="checkbox" id="idTwo" value="valueTwo" v-model="Message" />
    			<label for="idOne">contentTwo</label>	
    			
    		
    	        <input type="checkbox" id="idThree" value="valueThree" v-model="Message" />
    			<label  for="idOne">contentThree</label>
    			<br />
    			<span style="margin-left:1.25rem;">Message:</span>
    			<span style="color: aqua;">{
       {Message}}</span>
    			
    		</div>
    		<script type="text/javascript">
    			var vm = new Vue({
    				el: '#app',
    
    				data: {
    					Message:[]
    				},
    
    			});
    		</script>
    
    	</body>
    
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 34][]

### input type="submit" 和"button"有什么区别![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 35][] ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 36][]

### 属性必须用都好进行分隔 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 37][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 38][]

# 组件和vue 对象的区别 #

组件data必须函数方式返回；

vue对象直接命名组件data 属性；

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 39][]

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
    	</head>
    	<body>
    		<div id="app" style="margin-top: 20px; color: red;">
    
    			<name_componment ref="ce"></name_componment>
    			<hr />
    			<name_componment></name_componment>
    			<button v-on:click="adds()">ceshi</button>
    		</div>
    		<script type="text/javascript">
    			Vue.component('name_componment', {
    
    				data: function() {
    					return {
    						co: 0
    					}
    				},
    				// data: {
    				// 	co: 0
    				// },
    				methods: {
    					add: function() {
    						this.co++;
    					}
    				},
    
    				template: '<button v-on:click="add"> 点击了{
       {co}}次</button>'
    			})
    			var count = 0
    
    			var vm = new Vue({
    				el: '#app',
    
    				data: {
    					count: 5,
    					ce: 4
    
    				},
    				methods: {
    					adds: function() {
    						this.$refs.ce.add()
    						this.count++;
    						alert(this.$refs.ce.co)
    					},
    				}
    			});
    		</script>
    
    	</body>
    
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 40][]

###  template 只加载一个模板 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 41][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 42][]

<slot>slot</slot>空间内加载html

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 43][]

# vue emit  #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 44][]

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
    	</head>
    	<body>
    		<div id="app" style="margin-top: 20px; color: red;">
    
    			<name_componment @clickadd='clickNow'></name_componment>
    		</div>
    		<script type="text/javascript">
    			Vue.component('name_componment', {
    				data: function() {
    					return {
    						co: 0
    					}
    				},
    				methods: {
    					add: function() {
    						this.co++;
    						this.$emit('clickadd', this.co);
    					}
    				},
    				template: '<div><h1>123</h1><button v-on:click="add"> 点击了{
       {co}}次</button><slot>slot</slot></div>'
    			})
    
    			var vm = new Vue({
    				el: '#app',
    				methods: {
    					clickNow: function(a) {
    						alert(a);
    					}
    				}
    			});
    		</script>
    
    	</body>
    
    </html>

# vue 组件变量定义 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 45][]

#  组件全局注册 和局部注册 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 46][]

# VUE 组件使用  #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 47][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 48][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 49][]

# Hbuild +uniapp 插件 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 50][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 51][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70]: /images/20221005/8589fe98598d40bdb311d9195317bdae.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 1]: /images/20221005/92247b2273de4cceb5de908d7b76e4bc.png
[https_learning.dcloud.io_vid_1]: https://learning.dcloud.io/#/?vid=1
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 2]: /images/20221005/53156e352ba746b8b2f3b8a0e8523404.png
[https_learning.dcloud.io_vid_3]: https://learning.dcloud.io/#/?vid=3
[https_cn.vuejs.org_v2_guide_instance.html]: https://cn.vuejs.org/v2/guide/instance.html#%E6%95%B0%E6%8D%AE%E4%B8%8E%E6%96%B9%E6%B3%95
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 3]: /images/20221005/d7682cf1851d43f685bb8ebe54a5a5d2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20210712085512140.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 5]: /images/20221005/fc5f977c235b450a978a29b52b279d45.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 6]: /images/20221005/eca9307b65124ac286f765b74076fc24.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 7]: /images/20221005/95fa39a3dad14b7786b1d2a91f5031c2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 8]: /images/20221005/fd8ed5031a43480c82e6cc77f2e57c1e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 9]: /images/20221005/ee49e2fe7c6143c8a6f3a4c292fc3f24.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 10]: /images/20221005/4c405e037c0b4d22a12451590f7ec946.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 11]: /images/20221005/ab6b8c69687644988c759ad9fb598cf2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 12]: /images/20221005/abd83314580042689d98dc09bc27eb4d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 13]: /images/20221005/5aafa7bf72044002b0b4bdc8724cf6e3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 14]: /images/20221005/0315c312dda341fea46fc22f6fb78ac5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 15]: /images/20221005/0e1fce8d64d0435fbc982cb8a1723f61.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 16]: /images/20221005/4f80f49b052f4bf0af1329b8cfa6a624.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 17]: /images/20221005/d0d45a244bcf4fbaa6a530128a51e32a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 18]: /images/20221005/b763ae22df3041638f3d38a4e0b541eb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 19]: /images/20221005/864341cee9804ccd88f26f9d6b0d44f9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 20]: /images/20221005/0c1789c417fd4298a860781a3e2ae2fa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 21]: /images/20221005/3237d33eb649472fbbc17b6dbf39b143.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 22]: /images/20221005/6ed444bedc784b04947b2ee8ef8644f0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 23]: /images/20221005/9180934380c144fa8f889ebb79881bdf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 24]: /images/20221005/37ddb192931d43dba1fff1d60d6ac2a3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 25]: /images/20221005/4e2ab767134f4670910d0134b93cbd17.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 26]: /images/20221005/d195c3ca67bf44ae9c90113133c70a36.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 27]: /images/20221005/e2e70cd1ac4d4925a59cbc86f5ea2985.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 28]: /images/20221005/b0cac9e7a56e4feb8a9338d48e98fc5c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 29]: /images/20221005/e1ed60c267a846f890a784370d896253.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 30]: /images/20221005/c0c38ec3e4a24705bc78a05f3dcd6ab2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 31]: /images/20221005/3a65f9b6e7ad4ceb90eb48dd7171a0bc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 32]: /images/20221005/15eddede768543c3aef03e7e2c7fe9c3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 33]: /images/20221005/88230ebfc6224971994f5c392c68150a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 34]: /images/20221005/797b25260beb4183b3111829c9177d08.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 35]: /images/20221005/cb97459cb89e4c4da145057d947ba28e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 36]: /images/20221005/4b0c692b411f44109d30102c73453532.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 37]: /images/20221005/c73d62c2ceb44de4a82a474655f4833a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 38]: /images/20221005/65a92955c48841b6b569667cd2b882dd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 39]: /images/20221005/450756ce44be4fe89349b3d21f322a47.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 40]: /images/20221005/7ed1870231044efba5c1ad7da8318743.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 41]: /images/20221005/0f1623755b6a4e578a62c92ae76eeea9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 42]: /images/20221005/c39ea57bcba54bd3aa2c32aa80016527.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 43]: /images/20221005/1cde7a6c46674e6f9bfac1ca16c3b3f1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 44]: /images/20221005/1faa686e9a424f049ba6727ede887a90.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 45]: /images/20221005/76b8fb95155e4606b3737b34361ea421.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 46]: /images/20221005/4a555077284a409db2b7abbc1f4206c1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 47]: /images/20221005/86941fee916f4c81bdbafe62262997d7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 48]: /images/20221005/9a1f6f992d1046dca58c292c36fbdf5f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 49]: /images/20221005/f9aab5f629ea4951b16bb5ab8e409d19.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 50]: /images/20221005/253cc4a8b5944ea6b579b83187b84c0b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 51]: /images/20221005/217b2165ae6d4cf2871c9a6ca2be74e2.png