<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index</title>
</head>
<body>
    <!-- <h3>this is node -> Vue test</h3> -->
    <div id='app'  style='color:red; font-size:20px; font-weight:bold;'>app node start...</div>
    <template id="my-app">
		<!--<div v-html='info'></div> 
		<Home @op="add">home vue</Home>
		<h5 style="color:oranged">{{number}}</h5>
		<About>this is About</About>
		<test></test>-->
		<p>
			<router-link to="/home">首页</router-link>
			<router-link to="/test">test</router-link>
			<router-link to="/about">关于</router-link>
		</p>
		<router-view></router-view>

		<div class="flex flex-wrap gap-4 item-center">
			<el-select
				v-model="value"
				placeholder="Select"
				size="large"
				style="width: 240px"
			>
				<el-option
					v-for="item in options"
					:key="item.value"
					:label="item.label"
					:value="item.value"
					@click="changelang(item.value)"
				/>
			</el-select>
		</div>

	  <br/>
	<!--避免使用单标签，组件按照双标签规范用；    js代码相对位置导入后可以直接使用 -->
		<!-- <p>before i18n label</p> -->
		<div v-t="'messages.username'"></div>
		{{$t('messages.login')}}
		<!-- <p>after i18n label</p> -->
		<!-- <label @click="changelang('zh')">中文</label>
		<label @click="changelang('en')">english</label> -->
		<hr/>
		<button @click="interface_web()">connect to tomcat</button>
		<br/>
		<h4>tomcat_res -></h4><h4> {{ tomcat_res==""?"content empty":tomcat_res }}</h4>
		<hr/>
		<h2>书籍列表</h2>
		<ul>
			<!-- <li  v-for="(iterm,key,value) in books">{{value}}-{{key}}-{{item}}</li> -->
			<!-- <li>{{item}}</li> -->
			<li  v-for="(value,key,iterm) in books">{{value.title}}&nbsp;{{value.author}}&nbsp;{{value.publisher}}&nbsp;{{value.pages}}</li>
			
			<!-- <li>{{item["title"]}}&nbsp;{{item["author"]}}&nbsp;{{item["publisher"]}}&nbsp;{{item["pages"]}}</li> -->
		</ul>
		<hr/>
		<!--<input type="button" text="中文" @click="changelang('zh')"/>
		<input type="button" text="english" @click="changelang('en')"/>-->
    </template>
    <!-- <template style="width:100%; backgroud-color:oranged;">
	<Home @op="add">home vue</Home>
        <h2>{{number}}</h2>
    </template> -->
</body>
</html>



