Vue的Componet组件创建和使用

最新推荐文章于 2024-05-01 10:00:25 发布

记或往

最新推荐文章于 2024-05-01 10:00:25 发布

阅读量453

点赞数 1

分类专栏： vue坎坷之路总结文章标签： vue

本文链接：https://blog.csdn.net/xiaozhuzhuyang/article/details/114697563

版权

vue坎坷之路总结专栏收录该内容

9 篇文章 0 订阅

订阅专栏

Vue的Componet组件创建和使用

component组件，我觉得和jsp中的 <include>标签类似的效果可以引入一个html模块显示在你需要放的地方。

那我们用一个简单的例子感受一下component组件的使用：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<!-- 组件：yang-->
			<yang></yang>
		</div>
	</body>
	<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">	
		/* 定义一个vue组件component  组件名为yang  */
		Vue.component("yang",{
			template:'<li>你好</li>' //组件的内容
		})	
		var vm=new Vue({
			el: '#app',
			data: {}
		});	
	</script>
</html>

显示效果：
在这里插入图片描述

看完上面简单的例子，我们用组件和vue数据绑定起来使用：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<!-- 组件：yang           传值给组件中的值 props-->
			<yang v-for="itme in itmes" v-bind:a="itme"></yang>
		</div>
	</body>
	<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		
		/* 定义一个vue组件component  组件名为yang  */
		Vue.component('yang',{
			props: ['a'], /* 组件的属性名数组 */
			template: '<li>{{a}}</li>' /* 组件的内容 */
		});
		var vm=new Vue({
			el: "#app",
			data: {
				itmes: ['java','linux','前端']
			}
		});
	</script>
</html>

显示效果：
在这里插入图片描述

记或往

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue的Componet组件创建和使用

Vue的Componet组件创建和使用component组件，我觉得和jsp中的 <include>标签类似的效果可以引入一个html模块显示在你需要放的地方。那我们用一个简单的例子感受一下component组件的使用：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body&
复制链接

扫一扫