什么是组件?
组件是Vue.js最强大的功能之一。组件可以扩展HTML元素,封装可重用的代码。在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能。(感觉就像可以自定义一些功能强大的标签)
如何声明一个全局组件呢?
1,先创建一个组件的构造器
// 创建组件的构造器(类似于组件的容器)
let profile =Vue.extend({
<!-- 模板选项 -->
template:`
<div>
<input type="date" name="">
<p>今天的自己好帅</p>
</div>
`
});
2,注册全局组件
// 注册一个全局组件
Vue.component('my-date',profile);
到这里一个全局组件就写好了,那么如何用起来呢?
还需要创建一个Vue并绑定到标签上面。
new Vue({
el:'#app',
data:{
}
})
全部的代码如下
<!--
作者:Kason
时间:2019/01/16 23:43 -->
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<my-date></my-date>
</div>
<script type="text/javascript">
// 创建组件的构造器(类似于组件的容器)
let profile =Vue.extend({
<!-- 模板选项 -->
template:`
<div>
<input type="date" name="">
<p>今天的自己好帅</p>
</div>
`
});
// 注册一个全局组件
Vue.component('my-date',profile);
new Vue({
el:'#app',
data:{
}
})
</script>
</body>
</html>