vue组件的使用

最新推荐文章于 2024-05-16 14:53:02 发布

原克技术

最新推荐文章于 2024-05-16 14:53:02 发布

阅读量115

点赞数

文章标签： vue vue.js html5 javascript

本文链接：https://blog.csdn.net/weixin_44432032/article/details/108689609

版权

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>引用模板</title>
	<script src="js/vue.js"></script>
</head>
<body>
	<div id="itany">
		<my-hello></my-hello>
		<my-hello></my-hello>
	</div>

	<template id="wbs">
		<!-- <template>必须有且只有一个根元素 -->
		<div>
			<h3>{{msg}}</h3>
			<ul>
				<li v-for="value in arr">{{value}}</li>
			</ul>
		</div>
	</template>

	<script>
		var vm=new Vue({
			el:'#itany',
			components:{
				'my-hello':{
					name:'wbs17022',  //指定组件的名称，默认为标签名，可以不设置
					template:'#wbs',
					data(){
						return {
							msg:'欢迎来到南京网博',
							arr:['tom','jack','mike']
						}
					}
				}
				
			}
		});	
	</script>
</body>
</html>

原克技术

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue组件的使用

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>引用模板</title> <script src="js/vue.js"></script></head><body> <div id="itany"> <my-hello></my-hello>
复制链接

扫一扫