Vue局部组件案例

最新推荐文章于 2023-07-16 06:46:42 发布

夏木炎

最新推荐文章于 2023-07-16 06:46:42 发布

阅读量692

点赞数

分类专栏： Vue学习笔记文章标签： vue局部组件 template components

本文链接：https://blog.csdn.net/xm393392625/article/details/81666478

版权

Vue学习笔记专栏收录该内容

8 篇文章 1 订阅

订阅专栏

一.案例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	<div id="app">
		<my-date></my-date>
		<my-color></my-color>
	</div>
	
	
	
	<script type="text/javascript" src="js/jquery.js" ></script>
	<script type="text/javascript" src="js/vue.js" ></script>
	<script>
		//1.组件构造器
		let Profile_1=Vue.extend({
			//1.1模板选项
			template:
			`<div>
				<input type="date">
				<p>请选择日期</p>
			</div>`
		});
		let Profile_2=Vue.extend({
			//1.1模板选项
			template:
			`<div>
				<input type="color">
				<p>请选择颜色</p>
			</div>`
		});
		new Vue({
			el:'#app',
			components:{
				'my-date':Profile_1,
				'my-color':Profile_2
			},
			data:{
				
			}
		})
	</script>
	</body>
</html>

二.案例效果图示

夏木炎

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue局部组件案例

一.案例代码&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="app"&am
复制链接

扫一扫

专栏目录