一味的闷头开发,却对基础概念缺乏理解,是个大坑... 查阅官网后现对自己的理解记录一下,用于日后复习巩固
Vue.extend({}) 简述:使用vue.extend返回一个子类构造函数,也就是预设部分选项的vue实例构造器。
后可使用vue.component进行实例化、或使用new extendName().$mount('' el)方式进行实例化(从而实现模拟组件)。
1 let Footer = Vuew.extend({
2 data(){
3 return {
4 footerName:'I CAN DO IT...'
5 }
6 },
7 template:'<div>{{footerName}}</div>'
8 });
Vue.component({})简述:不多介绍了。。。用于生成全局组件
使用:
1,Vue.component使用Vue.extend生成的构造函数:
Vue.component('footer-view',Footer);
2,实例化构造函数从而模拟组件:
new Footer({
data:{
'...':''
}
}).$mount('my-footer')
完整代码:
<template>
<my-footer></my-footer>
</template>
<script>
let Footer = Vuew.extend({
data(){
return {
footerName:'I CAN DO IT...'
}
},
template:'<div>{{footerName}}</div>'
});
Vue.component('footer-view',Footer);
// new Footer({
// data:{
// '...':''
// }
// }).$mount('my-footer')
</script>
若有什么错误,欢迎指正。。。
更多专业前端知识,请上 【猿2048】www.mk2048.com