Vue_00001

wisdom4

已于 2023-12-31 00:38:23 修改

阅读量270

点赞数

分类专栏： Vue 文章标签： vue.js 前端 javascript

于 2023-02-23 17:15:09 首次发布

本文链接：https://blog.csdn.net/wisdom1a/article/details/129185512

版权

Vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

介绍

入门案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>		
	</head>
	
	<body>
		
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
		
		<div id="app">
			
			今日热点新闻。{{msg}}
			
		</div>
		
		<script type="text/javascript">
			
			const{createApp} = Vue
			
			/*createApp(
				{
					
					data(){
						return{
							msg:'Hello 你好。'
						}
					}
					
				}
			).mount('#app')*/
			
			//声明组件
			var one = {
				data(){
						return{
							msg:'Hello 中国。'
						}
					}
			};
			
			/*创建组件*/
			var app = createApp(one);
			//将vue中的程序app，挂载到id=app的区域中。
			app.mount('#app')
			
		</script>
		
	</body>
	
</html>

插值表达式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	
	<body>
		
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
		
		<div id="main">
			
			<p>
				今日热点新闻：{{msg}} 
			</p>
			
			<p>
				发布作者：{{author}} 
			</p>
			
			<p>
				发布日期：{{publish_date}}
			</p>
			
			<p>
				阅读数量：{{count + 1}}
			</p>
			
		</div>
		
		
		<script type="text/javascript">
			
			//1、定义组件。
			var one = {
				
				data(){
					return {
						msg: "合肥今日气温-3°!",
						author: "合肥晚报",
						publish_date: "2022-12-12",
						count: 10
					};
				}
			};
			
			//2、创建vue程序对象。
			var app = Vue.createApp(one);
 			
			//3、将vue程序对象挂载到指定区域。
			app.mount("#main");	
			
		</script>
		
	</body>
	
</html>

基本指令

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	
	<body>
		
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
		
		<div id="main">
			
			<p>
				今日热点新闻：{{msg}} 
			</p>
			
			<p>
				发布作者：{{author}} 
			</p>
			
			<p>
				发布日期：{{publish_date}}
			</p>
			
			<p>
				阅读数量：{{count1}}
			</p>
			
			<!-- v-once指令将导致插值表达式仅渲染显示一次: 后期不随着属性变化。-->
			<p v-once>
				阅读数量：{{count1}}
			</p>
			
			<!-- 绑定count2[子文本]内容到p标签内-->
			<p v-text="count2">
				
			</p>
			
			<!-- count3[子网页元素]内容到p标签内-->
			<p v-html="count3">
				
			</p>
			
			<button v-on:click="function1">更新数据</button>
			
		</div>
			
		<script type="text/javascript">
			
			//1.定义组件
			var one = {
				//定义内部数据模型
				data(){
					return {
						msg: "合肥今日气温-3°!",
						author: "合肥晚报",
						publish_date: "2022-11-11",
						count1: 1,
						count2: 2,
						count3: "<a href='#'>3</a>"
					};
				},
				
				//定义内部方法
				methods: {
					function1(){
						//修改count1和count2的值
						this.count1 = 666;
						this.count2 = 666;
					}
				}
			};
			
			//2.创建vue程序对象
			var app = Vue.createApp(one);
 			
			//3.将vue程序对象挂载到指定区域
			app.mount("#main");
				
		</script>
			
	</body>
	
</html>

绑定属性和事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style>
			
			#id1{
				border: 5px red solid;
			}
			
			.c1{
				background-color: blue;
				color: white;
			}
			
			
			#id2{
				border: 5px blue solid;
			}
			
			.c2{
				background-color: greenyellow;
				color: white;
			}
					
		</style>
		
	</head>
	
	<body>
		
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
		
		<div id="main">
			
			<div v-bind:id="idValue" :class="classValue">
				
				<p>
					今日热点新闻：{{msg}} 
				</p>
				
				<p>
					发布作者：{{ author }} 
				</p>
				
				<p>
					发布日期：{{publish_date}}
				</p>
				
				<p>
					阅读数量：{{count}}
				</p>
				
				<p>
					<button v-on:click="function1">更新阅读量</button>
					<button @click="function2">更新背景色</button>
				</p>
				
				<p>
					<!-- v-model： 可以实现双向绑定-->
					<input type="text" v-model="username" />
					<button @click="function3">解析VUE属性username</button>
				</p>
				
			</div>
			
		</div>
		
		<script type="text/javascript">
			
			//1.定义组件:
			var one = {
				data(){
					return {
						msg: "合肥今日气温-3°!",
						author: "合肥晚报",
						pub_date: "2022-11-11",
						count: 1,
						idValue: "id1",
						classValue: "c1",
						username: "110@qq.com"
					};
				},
				methods: {
					function1(){
						++this.count;
					},
					function2(){
						this.idValue = "id2";
						this.classValue = "c2";
					},
					function3(){
						alert("username: " + this.username);
					}
					
				}
			};
			
			//2.创建vue程序对象.
			var app = Vue.createApp(one);
 			
			//3.将vue程序对象挂载到指定区域.
			app.mount("#main");
				
		</script>	
		
	</body>
	
</html>

条件指令

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	
	<body>
		
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
		
		<div id="main">
			
			<p v-if="code == 1">正常</p>
			<p v-else-if="code == 2">禁用</p>
			<p v-else>注销</p>
			
			<p v-if="r1">支付成功!</p>			
			<p v-else>支付失败!</p>
			
			<!-- 
				v-if：都可根据条件决定是否显示。
				v-show：都可根据条件决定是否显示。
				区别：v-if 根据判断条件决定该位置区域是否加载至网页中。
					v-show 该位置区域元素先加载至网页中，根据判断条件决定是否隐藏：display:none
			-->
			<p v-if="r2">1请先登录：登录</p>
			
			<p v-show="r2">2请先登录：登录</p>
			
		</div>
		
		
		<script type="text/javascript">
			
			//1、定义组件
			var one = {
				data(){
					return {
						code: 1,
						r1: false,
						//r2为登录状态：false表示已登录、true表示未登录。
						r2: false
					};
				}
			};
			
			//2、创建vue程序对象
			var app = Vue.createApp(one);
 			
			//3、将vue程序对象挂载到指定区域
			app.mount("#main");
			
		</script>
			
	</body>
	
</html>

循环指令

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	
	<body>
		
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
		
		<div id="main">
			
			<h1>第一组名单</h1>	
			<ul>
				<li v-for="pname in team1">{{pname}}</li>
			</ul>
			
			<h1>第一组名单和座位号</h1>
			<ul>
				<li v-for="(pname, index) in team1">{{index}} ----- {{pname}}</li>
			</ul>
			
			<h1>班长的基本信息</h1>
			<ul>
				<li v-for="(value, key, index) in bz">{{index}} ----- {{key}} ----- {{value}} </li>
			</ul>
			
			<button @click="f1">分配同学到第一组</button>
			
		</div>
		
		<script type="text/javascript">
			
			//1、定义组件。
			var one = {
				data(){
					return {
						//一些数组或列表集合
						team1: ["卢俊义", "吴用", "公孙胜"],
						//一些map或对象结构
						bz: {
							stu_id: 6,
							stu_name: "宋江",
							stu_nick: "孝义黑三郎"
						}
					};
				},
				methods: {
					f1(){
						this.team1[0] = "林冲";
						this.team1[1] = "武松";
						this.team1[2] = "潘金莲";
						this.team1[3] = "李逵";
					}
				}
			};
			
			//2、创建vue程序对象。
			var app = Vue.createApp(one);
 			
			//3、将vue程序对象挂载到指定区域。
			app.mount("#main");

		</script>
	
	</body>
	
</html>

计算属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	
	<body>
		
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
		
		<div id="main">
			
			<!-- 使用总页码: 不推荐以下方式。
				<p>
					总页码: {{ totalCount%pageSize>0? totalCount/pageSize + 1 : totalCount/pageSize }}
				</p> 
			-->
			
			<!-- 使用计算属性: -->
			<p>
				总页码: {{totalPage1}}------- 总记录数: {{totalCount}}
				<button @click="f1">更新计算属性totalPage1</button>
			</p> 
			
			<p>
				总页码: {{totalPage2}}------- 总记录数: {{totalCount}}
				<button @click="f2">更新计算属性totalPage2</button>
			</p> 
			
			<p>
				总页码: {{totalPage3}} ------- 总记录数: {{totalCount}}
				<button @click="f3">更新计算属性totalPage3</button>
			</p> 
			
		</div>
		
		
		<script type="text/javascript">
			
			//1.定义组件:
			var zj1 = {
				data(){
					return {
						totalCount: 22,
						pageSize: 5
					};
				},
				methods:{
					f1(){
						this.totalPage1 = 6;
					},
					f2(){
						this.totalPage2 = 6;
					},
					f3(){
						this.totalPage3 = 6;
					}
				},
				//计算属性: totalPage根据计算后产生.
				//仅提供只读的计算属性:  1.直接提供计算属性. 2.提供计算属性的get方法.
				//提供可写可读的计算属性: 3.提供计算属性的get和set方法.
				computed:{
					//属性1: totalPage1,默认提供get方法.  仅只读.
					totalPage1(){
						var totalPage = 1;
						if(this.totalCount % this.pageSize > 0){
							//除法运算总页数 + 1.
							totalPage = this.totalCount / this.pageSize + 1;
						}else{
							//直接除法运算总页数即可:
							totalPage = this.totalCount / this.pageSize;
						}
						return parseInt(totalPage);
					},
					//属性2: totalPage2,手动提供get方法.  仅只读.
					totalPage2: {
						//显示提供get方法:
						get(){
							var totalPage = 1;
							if( this.totalCount % this.pageSize > 0 ){
								//除法运算总页数 + 1.
								totalPage = this.totalCount / this.pageSize + 1;
							}else{
								//直接除法运算总页数即可:
								totalPage = this.totalCount / this.pageSize;
							}
							return parseInt( totalPage );
						}
					},
					//属性3:
					totalPage3: {
						//显示提供get方法:
						get(){
							var totalPage = 1;
							if( this.totalCount % this.pageSize > 0 ){
								//除法运算总页数 + 1.
								totalPage = this.totalCount / this.pageSize + 1;
							}else{
								//直接除法运算总页数即可:
								totalPage = this.totalCount / this.pageSize;
							}
							return parseInt( totalPage );
						},
						set(newValue){
							this.totalCount = newValue * this.pageSize;
							
						}
					}
				}
				
			};
			
			//2.创建vue程序对象.
			var app = Vue.createApp( zj1 );
 			
			//3.将vue程序对象挂载到指定区域.
			app.mount("#main");
			
		</script>
		
	</body>
	
</html>

侦听属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	</head>
	<body>
		
		<div id="main">
			
			<p>
				购买数量: <input type="text" v-model="count" />
			</p>
			
		</div>
		
		
		<script>
			
			var one = {
				data(){
					return {
						count: 1
					}
				},
				methods:{
					
				},
				computed:{
					
				},
				watch:{
					count(newValue , oldValue){
						//最新修改的数据不能超过：10件商品，如果超过继续保持老数据.
						if(newValue > 10){
							this.count = oldValue;
							alert("抱歉，商品一次性购买数量不能超过10件!");
						}else{
							//不超过: 正常使用新值.
							this.count = newValue;
						}
						
						
						
					}
				}
			};
			
			var app = Vue.createApp(one);
			
			app.mount("#main");
			
		</script>
		
	</body>
	
</html>

表单的双向绑定

<!DOCTYPE html>

<html>
	
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
		
	</head>
	
	<body>
		
		<div id="main">
			
			<p>
				<!-- 姓名: <input type="text" name="username" v-model="username"/> -->
				<!-- 姓名: <input type="text" name="username" v-model.trim="username"/> -->
				姓名：<input type="text" name="username" v-model.lazy="username"/>
			</p>
			
			<p>
				爱好：
				<input type="checkbox" name="hobby" value="tv1" v-model="hobby"/>看CCTV电视
				<input type="checkbox" name="hobby" value="tv2" v-model="hobby"/>看AHTV电视
				<input type="checkbox" name="hobby" value="tv3" v-model="hobby"/>看BeiJingTV电视
			</p>
			
			<p>
				性别：
				 <input type="radio" name="gender" value="1" v-model="gender"/>男
				 <input type="radio" name="gender" value="2" v-model="gender"/>女
			</p>
			
			<p>
				所在城市：
				<select name="city" v-model="city">
					<option value="-1">--请选择--</option>
					<option value="1">北京市</option>
					<option value="2">上海市</option>
					<option value="3">合肥市</option>
				</select>
			</p>
			
			<button @click="f1">查看VUE中的最新属性值</button>
			
		</div>
		
		<script>
			
			var one = {
				data(){
					//模拟属性
					return {
						username: "one",
						hobby: ["tv1" , "tv2"],
						gender: 2,
						city: 3
					}
				},
				methods:{
					f1(){
						//查看最新属性:
						console.log("username: " + this.username);
						console.log("hobby: " + this.hobby);
						console.log("gender: " + this.gender);
						console.log("city: " + this.city);
					}
				}
			};
			
			var app = Vue.createApp(one);
			
			app.mount("#main");
			
		</script>
		
	</body>
	
</html>

时间绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
		
		<style type="text/css">
			
			.d1{
				width: 500px;
				height: 200px;
				background-color: red;
			}
			
			.d2{
				width: 300px;
				height: 130px;
				background-color: green;
			}
			
			.d3{
				width: 100px;
				height: 70px;
				background-color: blue;
			}
	
		</style>
		
	</head>
	
	<body>
		
		<div id="main">
			 
			<h1 @click="f1">合肥今日热点新闻</h1>
			<h2 @mouseover="f2" @mouseout="f3">发布者：合肥晚报</h2>
			<input type="text" @keydown="f4"/>
			 			 
			<!--.stop修饰符来阻止子元素的事件冒泡（传递）-->
			<!-- 
			<div class="d1" @click.stop="f5">
				<div class="d2"  @click.stop="f6">
					<div class="d3"  @click.stop="f7">
						内部第三个DIV！！！
					</div>
				</div>
			</div> 
			-->
			
			<!--.capture修饰符来将优先把子元素的事件冒泡至父元素中捕获处理,依次从外往内执行-->
			<div class="d1" @click.capture="f5">
				
				<div class="d2"  @click.capture="f6">
					
					<div class="d3"  @click.capture="f7">
						内部第三个DIV！！！
					</div>
					
				</div>
				
			</div>
						
		</div>
		
		<script>
			
			var one = {
				data(){
					return {}
				},
				methods:{
					f1(){
						console.log("f1......");
					},
					f2(){
						console.log("f2......");
					},
					f3(){
						console.log("f3......");
					},
					f4(){
						console.log("f4......");
					},
					f5(){
						console.log("第一个DIV点击......");
					}
					,
					f6(){
						console.log("第二个DIV点击......");
					}
					,
					f7(){
						console.log("第三个DIV点击......");
					}
					
				}
			};
			
			var app = Vue.createApp(one);
			
			app.mount("#main");
			
		</script>
		
	</body>
	
</html>

定义组件模板

<!DOCTYPE html>

<html>
	
	<head>
	
		<meta charset="utf-8">
		<title></title>
		
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	
	</head>
	
	<body>
		
		<!-- 
		当前页面加载步骤:
			1、优先加载: 网页中的自定义内容，例如id="head"区域。注: 与组件无关。
			2、随后加载: 自定义在组件中的模板网页片段，例如id="main"区域。来自于：组件。
		 -->
		 
		 <div id="head">
			<button>测试LOGO</button>
		 </div>
		
		<!-- 
		使用方式一: 可以直接定义模板: 绑定属性信息即可. 初始组件中: 无需单独提供template。
		-->
		<div id="main">
			<h1>欢迎：{{username}}</h1>
		</div> 
		
		
		<!-- 使用方式二：提供指定显示区域, 绑定组件中的模板: 需要提供初始组件中: template. -->
		<div id="main">
			
		</div>
		
		
		<script>
			
			//默认提供的: 初始组件。
			var one = {
				data(){
					return {
						username: "宋江"
					}
				},
				methods:{
					
				},
				computed:{
					
				},
				watch:{
				},
				//当前组件模板: 组件的显示网页片段.
				template: `
					<h1>欢迎:{{username}}</h1>
				`
				
			};
			
			var app = Vue.createApp(one);
			
			app.mount("#main");
			
		</script>
		
	</body>
	
</html>

多个组件的定义

<!DOCTYPE html>

<html>
	
	<head>
		
		<meta charset="utf-8">
		<title></title>
		
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	
	</head>
	
	<body>
		
		<div id="main">
			
			<!-- 默认加载初始化组件-->
			<h1>{{news_title}}</h1>
			
			<h1>==================</h1>
			
				
			<!-- 自定义区域1: -显示娱乐 -->
			<one1></one1>
			
			<h1>==================</h1>
			
			<!-- 自定义区域2: -显示生活 -->
			<one2></one2>
			<one2></one2>
			
		</div>
		
		<script>
			
			var one={
				data(){
					return {
						news_title: "合肥今日新闻"
					}
				}
				
			};
			
			var one1={
				data(){
					return {
						news1: "娱乐头条：梁山今天宋江开会。"
					}
				},
				template:`
					<h2> 新闻1:{{news1}} </h2>
				`
				
			};
			
			var one2={
				data(){
					return {
						news1: "生活头条: 合肥今天多云转晴。"
					}
				},
				template:`
					<h2> 新闻2:{{news1}} </h2>
					<input type="text" v-model="news1"/>
				`
				
			};
			
			//Vue程序的实例对象创建：默认加载初始化组件one。
			var app = Vue.createApp(one);
			
			//加载其他全局组件: one1，one2 
			app.component("one1" ,one1);
			app.component("one2" ,one2);
			
			//vue程序渲染显示在指定位置中。
			app.mount("#main");
					
		</script>
		
	</body>
	
</html>

局部组件

<!DOCTYPE html>

<html>
	
	<head>
		
		<meta charset="utf-8">
		<title></title>
		
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	
	</head>
	
	<body>
		
		<div id="main">
			
			<!-- 默认加载初始化组件: -->
			<h1>{{news_title}}</h1>
			
			<!-- 自定义区域1: -显示娱乐 -->
			<one1></one1>
			
		</div>
		
		<script>
			
			var one={
				data(){
					return {
						news_title: "合肥今日新闻"
					}
				}
				
			};
			
			// 先声明one2和one3，方便最底部的one1引用
			var one2={
				data(){
					return {
						news1: "生活头条: 合肥今天多云转晴。"
					}
				},
				template:`
					<h2> 新闻2:{{news1}} </h2>
				`
				
			};
			
			var one3={
				data(){
					return {
						news1: "军事头条：宋江准备攻打方腊。"
					}
				},
				template:`
					<h2> 新闻3:{{news1}} </h2>
				`
				
			};
				
			var one1={
				data(){
					return {
						news1: "娱乐头条: 宋江在梁山开会。"
					}
				},
				//在one1组件中, 声明引用其他组件在当前位置中(局部组件使用)
				components: {
					"one2": one2,
					"one3": one3
				},
				template:`
					<h2> 新闻1:  {{news1}} </h2>
					<one2></one2>
					<one3></one3>
				`

			};
						
			//Vue程序的实例对象创建：默认加载初始化组件one。
			var app = Vue.createApp(one);
			
			//加载其他全局组件：one1
			app.component("one1" , one1);
			
			//vue程序渲染显示在指定位置中
			app.mount("#main");
			
		</script>
		
	</body>
	
</html>

局部组件的定义形式

<!DOCTYPE html>

<html>
	
	<head>
		
		<meta charset="utf-8">
		<title></title>
		
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	
	</head>
	
	<body>
		
		<div id="main">
			
			<!-- 自定义区域1：-显示娱乐 -->
			<one1>
				
				<template #s1>
					Inter-CPU-I7
				</template>
				
				<template #s2>
					金士顿内存: 16G
				</template>
				
				<template #s3>
					WD硬盘: 1TB
				</template>
				
			</one1>
			
		</div>
		
		<script>
			
			var one={
				data(){
					return {
					}
				}
				
			};
			
			var one1={
				data(){
					return {
						news1: "娱乐头条：宋江在梁山开会。"
					}
				},
				template:`
					<h2> 新闻1:  {{news1}} </h2>
					<slot name="s1"></slot>
					<slot name="s2"></slot>
					<slot name="s3"></slot>
				`
				
			};
			
			//Vue程序的实例对象创建： 默认加载初始化组件one
			var app = Vue.createApp(one);
			
			//加载其他全局组件：one1
			app.component("one1", one1);
			
			//vue程序渲染显示在指定位置中
			app.mount("#main");
						
		</script>
		
	</body>
	
</html>

动态组件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
		
	</head>
	
	<body>
		
		<div id="main">
			
			<!--静态组件应用形式
			<zj2></zj2>
			<zj3></zj3>
			<zj4></zj4>
			-->
			
			<!--动态组件的应用形式-->
			<h1>演示-动态组件</h1>
			<p>
				请输入显示的组件: <input type="text" v-model="zujian_name"/>
			</p>
			<component :is="zujian_name"></component>			
			
		</div>
		
		<script>
			
			//初始化组件：zj1
			var zj1 = {
				data(){
					return {
						zujian_name: "zj4"
					}
				}
			};
			
			//其他组件：zj2，zj3，zj4
			var zj2 = {
				template: `
					<h1>模拟组件2</h1>
				`
			};
			var zj3 = {
				template: `
					<h1>模拟组件3</h1>
				`
			};
			
			var zj4 = {
				template: `
					<h1>模拟组件4</h1>
				`
			};
			
			//创建Vue实例：加载初始组件
			var app = Vue.createApp(zj1);
			
			//加载其他全局组件:
			app.component("zj2", zj2);
			app.component("zj3", zj3);
			app.component("zj4", zj4);
			
			//挂载显示:
			app.mount("#main");
					
		</script>
		
	</body>
	
</html>

父子组件props传递数据校验

<!DOCTYPE html>

<html>
	
	<head>
		
		<meta charset="utf-8">
		<title></title>
		
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
		
	</head>
	
	<body>
		
		<div id="main">
						
		</div>
		
		<script>
			
			//其他组件: zj2,zj3
			var zj2 = {
				//声明自身模型属性
				data(){
					return {
						username: "宋江"
					}
				},
				//接收属性
				//props: ['uid','uage','modelValue'],
				props: {
					uid: Number,
					modelValue: {
						type: String,
						required: true
					},
					uage: {
						type: [Number,String],
						required: true,
						validator(value){
							if( value >= 18 && value <= 35 ){
								console.log("uage年龄信息合格!");
								return true;
							}else{
								console.log("uage年龄信息不满足!");
								return false;
							}
							
						}
					}
				},
				template: `
					<h1>zj2内部数据:{{uid}} ---- {{username}} ---- {{uage}} ---- {{modelValue}}</h1>
				`
			};	
			
			//初始化组件:zj1
			var zj1 = {
				data(){
					return {
						id: 666,
						email: '110@qq.com'
						
					}
				},
				components: {
					"zj2": zj2
				},
				template: `
					<h1>zj1内部数据: {{ id }} </h1>
					<zj2 :uid="id" uage="18" v-model="email" ></zj2>
				`
				
			};
			
			//创建Vue实例：加载初始组件
			var app = Vue.createApp(zj1);
			
			//挂载显示
			app.mount("#main");
						
		</script>
		
	</body>
	
</html>

父子组件之间的数据传递2

<!DOCTYPE html>

<html>
	
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
		
	</head>
	
	<body>
		
		<div id="main">
			
		</div>
		
		<script>
			
			var zj3 = {
				data(){
					return {}
				},
				//注入: 
				inject: ['uid' , 'uemail'],
				template: `
					<h1>zj3内部数据: {{uid}} ----- {{uemail}} </h1>
				`
				
			};
			
			//其他组件: zj2,zj3
			var zj2 = {
				//声明自身模型属性
				data(){
					return {
						username: "宋江"
					}
				},
				components: {
					"zj3": zj3
				},
				template: `
					<h1>zj2内部数据: {{username}}</h1>
					<zj3></zj3>
				`
				
			};
						
			//初始化组件: zj1
			var zj1 = {
				data(){
					return {
						id: 666,
						email: '110@qq.com'
					}
				},
				//对所有的子组件提供依赖
				provide(){
					return {
						uid: this.id,
						uemail: this.email
					}
				},
				components: {
					"zj2": zj2
				},
				template: `
					<h1>zj1内部数据: {{id}} ----- {{email}} </h1>
					<zj2></zj2>
				`
				
			};

			//创建Vue实例:加载初始组件
			var app = Vue.createApp(zj1);
			
			//挂载显示
			app.mount("#main");
			
		</script>
		
	</body>
	
</html>

组件的生命周期回调

<!DOCTYPE html>

<html>
	
	<head>
		
		<meta charset="utf-8">
		<title></title>
		
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
		
	</head>
	
	<body>
		
		<div id="main">
			
			<!-- 
			vue程序实例中的组件加载过程：
			1、组件初始化前执行：beforeCreate()
			2、组件初始化完成后：created()
			3、组件模板编译完成,渲染显示网页前执行：beforeMount()
			4、渲染显示网页完成后：mounted()
			5、当网页显示完成后, 组件数据更新变化，但还未重新渲染更新页面：beforeUpdate()
			6、当网页显示完成后, 组件数据更新变化，同时已重新渲染更新页面：updated()
			7、解除页面组件挂载(销毁组件)前执行：beforeUnmount()
			8、解除页面组件挂载(销毁组件)完成后：unmounted()
				
			其他生命周期钩子：errorCaptured，renderTracked，renderTriggered，activated，deactivated，serverPrefetch。
		    -->
					
		</div>
		
		<script>
			
			//初始化组件：zj1
			var zj1 = {
				data(){
					return {
						username: '宋江',
						password: '123456'
					}
				},
				
				//初始化组件显示模板
				template: `
					<h1>账号密码信息:{{username}}-----{{password}}</h1>
					<p>
						账号:<input type="text" v-model="username"/>
					</p>
					<p>
						密码:<input type="text" v-model="password"/>
					</p>
				`,
				
				//定义生命周期钩子函数
				beforeCreate(){
					console.log("1、组件初始化前执行。");
				},
				created(){
					console.log("2、组件初始化完成后。" );
				},
				beforeMount(){
					console.log("3、渲染显示网页前执行。" );
				},
				mounted(){
					console.log("4、渲染显示网页完成后。" );
				},
				beforeUpdate(){
					//定义钩子函数：此时的this表示当前vue中的组件对象。
					console.log("5、组件数据模型变化，更新网页显示前。" + this.username);
				},
				updated(){
					console.log("6、组件数据模型变化，更新网页完成后。" + this.username);
				},
				beforeUnmount(){
					console.log("7、组件销毁前。");
				},
				unmounted(){
					console.log("8、组件销毁后。");
				}
								
			};
			
			//创建Vue实例：加载初始组件。
			var app = Vue.createApp(zj1);
			
			//挂载显示。
			app.mount("#main");
			
		</script>
		
	</body>
	
</html>

欢迎使用Markdown编辑器

你好！这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。

新的改变

我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：

全新的界面设计 ，将会带来全新的写作体验；
在创作中心设置你喜爱的代码高亮样式，Markdown 将代码片显示选择的高亮样式 进行展示；
增加了 图片拖拽 功能，你可以将本地的图片直接拖拽到编辑区域直接展示；
全新的 KaTeX数学公式 语法；
增加了支持甘特图的mermaid语法¹ 功能；
增加了 多屏幕编辑 Markdown文章功能；
增加了 焦点写作模式、预览模式、简洁写作模式、左右区域同步滚轮设置 等功能，功能按钮位于编辑区域与预览区域中间；
增加了 检查列表 功能。

功能快捷键

撤销：Ctrl/Command + Z
重做：Ctrl/Command + Y
加粗：Ctrl/Command + B
斜体：Ctrl/Command + I
标题：Ctrl/Command + Shift + H
无序列表：Ctrl/Command + Shift + U
有序列表：Ctrl/Command + Shift + O
检查列表：Ctrl/Command + Shift + C
插入代码：Ctrl/Command + Shift + K
插入链接：Ctrl/Command + Shift + L
插入图片：Ctrl/Command + Shift + G
查找：Ctrl/Command + F
替换：Ctrl/Command + G

合理的创建标题，有助于目录的生成

直接输入1次#，并按下space后，将生成1级标题。
输入2次#，并按下space后，将生成2级标题。
以此类推，我们支持6级标题。有助于使用TOC语法后生成一个完美的目录。

如何改变文本的样式

强调文本 强调文本

加粗文本 加粗文本

标记文本

~~删除文本~~

引用文本

H₂O is是液体。

2¹⁰ 运算结果是 1024.

插入链接与图片

链接: link.

图片: Alt

带尺寸的图片:

居中的图片: Alt

居中并且带尺寸的图片:

当然，我们为了让用户更加便捷，我们增加了图片拖拽功能。

如何插入一段漂亮的代码片

去博客设置页面，选择一款你喜欢的代码片高亮样式，下面展示同样高亮的 代码片.

// An highlighted block
var foo = 'bar';

生成一个适合你的列表

项目
- 项目
  - 项目

项目1
项目2
项目3

计划任务
完成任务

创建一个表格

一个简单的表格是这么创建的：

项目	Value
电脑	$1600
手机	$12
导管	$1

设定内容居中、居左、居右

使用:---------:居中
使用:----------居左
使用----------:居右

第一列	第二列	第三列
第一列文本居中	第二列文本居右	第三列文本居左

SmartyPants

SmartyPants将ASCII标点字符转换为“智能”印刷标点HTML实体。例如：

TYPE	ASCII	HTML
Single backticks	`'Isn't this fun?'`	‘Isn’t this fun?’
Quotes	`"Isn't this fun?"`	“Isn’t this fun?”
Dashes	`-- is en-dash, --- is em-dash`	– is en-dash, — is em-dash