Vue组件

最新推荐文章于 2024-10-17 09:40:47 发布

李滇滇

最新推荐文章于 2024-10-17 09:40:47 发布

阅读量452

点赞数

分类专栏： Vue 文章标签：开发语言前端 vue

本文链接：https://blog.csdn.net/qq_44772261/article/details/121370859

版权

Vue 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

组件：可以扩展html，封装重复的代码

使用：

1.全局组件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="../js/vue.js">
			
		</script>
	</head>
	<body>
		<div id="app">
			
			<!-- 3.2 使用组件 -->
			<Person></Person>
			
		</div>
		
		<div id="a">
			<Person></Person>
		</div>
		
		<script type="text/javascript">
			// 全局组件：作用范围是多个Vue对象使用，可以再所有的渲染区使用
			<!--3.1 创建全局组件 -- 1.是组件名，2.是组件内容 -->
			// Vue.component(1,2)
			Vue.component('Person',{
				// template：组件具体要啥内容
				template:"<h1>姓名：jack，年龄：20</h1>"
			})
			
			new Vue({	
				el:"#app",
				components:{
					starter:{//组件名
						template:'<h1>哈哈</h1>'
					}
				}
			})
			
			
			new Vue({
				el:"#a",
				
			})
		</script>
	</body>
</html>

2.局部组件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="../js/vue.js">
			
		</script>
	</head>
	<body>
		<div id="app">
			<starter></starter>
			<Student></Student>
		</div>
		
		<div id="a">
			<Student></Student>
		</div>
		<script type="text/javascript">
			Vue.component('Student',{
				template:"<h2>学号：2018124118</h2>"
			})
			new Vue({
				el:"#app",
				components:{
					starter:{
						template:"<h4>jack</h4>"
					}
				}
			})
			new Vue({
				el:"#a"
			})
		</script>
	</body>
</html>

整合案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="../js/vue.js">
			
		</script>
	</head>
	<body>
		<div id="app">
			<name></name>
			<starter></starter>
			<happy></happy>
			<age></age>
			<stu></stu>
		</div>
		<script type="text/javascript">
			Vue.component('name',{
				template:'<h1>你好啊~</h1>'
			})
			Vue.component('age',{
				template:'<ol><li>我是元素1</li><li>我是元素2</li></ol>'
			})
			Vue.component('stu',{
				template:'<button style="background-color:cadetblue;">点击</button>'
			})
			new Vue({
				el:"#app",
				components:{
					starter:{
						template:'<h2>I AM FINE !!</h2>'
					},
					happy:{
						template:'<button style="background-color: aquamarine;">按钮</button>'
					}
				}
			})
		</script>
	</body>
</html>