CGB2110 第二阶段之Vue

最新推荐文章于 2024-10-06 22:38:44 发布

Chiffon9394

最新推荐文章于 2024-10-06 22:38:44 发布

阅读量318

点赞数

分类专栏：自我总结文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/m0_63635826/article/details/121846522

版权

自我总结专栏收录该内容

3 篇文章 0 订阅

订阅专栏

今天学习了Vue框架的各种知识，重复写了好多遍还是有些步骤写错，现发上网方便自己有空看看，可以多多复习。加油！

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js">
			
		</script>
		<style type="text/css">
			[v-cloak]{
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="aa" v-cloak>
			<h1>{{name}}</h1>
			<input v-model="name" />
			<h1 v-text="url1></h1>
			<h1 v-html="url1"></h1>
			<h2 v-if="age>60">老年人</h2>
			<h2 v-else-if="age>40">中老年人</h2>
			<h2 v-else-if="age>30">中年人</h2>
			<h2 v-else-if="age>18">青年人</h2>
			<h2 v-else>少年人</h2>
			<input v-model="age" />
			<h2 v-show="num%2==0">偶数</h2>
			<h2 v-show="num%2!=0">奇数</h2>
			<input v-model="num" />
			<ol><li v-for="i in hobby">{{i}}</li></ol>
			<table >
				<tr><th>name</th><th>age</th></tr>
				<tr v-for="p in info"><td>{{p.name}}</td><td>{{p.age}}</td></tr>
			</table>
			<button v-on:click="play()">play</button>
			<button v-on:click="show()">show</button>
			<button v-on:click="add()">add</button>
			<a v-bind:href="url">baidu</a>
			<a :href="url">baidu</a>		
		</div>

		<script >
			new Vue({
				el:"#aa",
				data(){
					return{
					name:"miamia",
					url1:"<a>https://www.baidu.com</a>",
					age:18,
					num:100,
					hobby:["football","table","running"],
					info:[{name:"aa",age:20},{name:"bb",age:21},{name:"acc",age:22},{name:"a1a",age:20}],
					count:1	,
					url:'https://www.baidu.com'
					}
				},
				methods:{
					show(){
						console.log('show'+this.count)
					},
					add(){
						this.count++
						console.log('add'+this.count)
					},
					play(){
						console.log('paly'+--this.count)
					}

				}

			})
		</script>
		
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="vue-router.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="a1">
			<aab></aab>
			<abb></abb>
		</div>
		
		
		
		<script type="text/javascript">
			Vue.component('aab',{
				template:'<a href="https://www.baidu.com">baidu</a>'
			})
			new Vue({
				el:"#a1",
				components:{
					abb:{
						template:'<a href="https://www.taobao.com">taobao</a>'
					}
				}
			})
		</script>
		
		
		
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="vue-router.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="aa">
			<router-link to="/baidu">baidu</router-link>
			<router-link to="/taobao">taobao</router-link>
			<router-link to="/qq">qq</router-link>
			<router-view></router-view>
			
		</div>
		<script type="text/javascript">
		let baidu={template:'<a href="https://www.baidu.com">baidu</a>'};
		let taobao={template:'<a href="https://www.taobao.com">taobao</a>'};
		let qq={template:'<a href="https://www.qq.com">qq</a>'};
			let router=new VueRouter({
				routes:[{path:"/baidu",component:baidu},{path:"/taobao",component:taobao},{path:"/qq",component:qq}]
			});
			
			new Vue({
				el:"#aa",
				router,
			})
		</script>
		
	</body>
</html>