Vue自定义组件

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

咩咩文

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

阅读量1.5k

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/u011659172/article/details/58083672

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>vue-component</title>
		<script type="text/javascript" src="js/mui.js" ></script>
		<script type="text/javascript" src="js/jquery-1.11.3.js" ></script>
		<script type="text/javascript" src="js/vue.js" ></script>
		<script type="text/javascript">
         var vue;
         $(function(){
         	//自定义组件
         	Vue.component('custom-template',//组件名
         	   {
	         	props:['param'],//组件接受外部参数
	        	template:'<li>{{param.text}}</li>'//模板
         	});
         	//初始化vue
         	vue = new Vue({
         		el:"#app",
         		data:{
         			customList: [
						    { text: 'java' },
						    { text: 'Object c'},
						    { text: 'c++' }
						    ]
         		}
         	});
         });
		</script>

	</head>

	<body>
		<div id="app">
      	<ol>
        <custom-template v-for="item in customList" v-bind:param="item"></custom-template>      		
      	</ol>
      	</div>
	</body>

</html>