一.案例代码
<!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>
二.案例效果图示
版权声明：本文为xm393392625原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。