前端组件化发展历史
前后端耦合
前后端不分离项目
找后台搭建项目开发环境
寻找项目目录中的静态资源目录
js
img
css
同步修改css
前后端分离
前端团队合作项目的出现
组件化为了解决多人协作冲突问题
复用
组件的概念
组件是一个html 、 css 、js 、img 等的一个聚合体
Vue中的组件属于扩展性功能
通过 Vue.extend() 来扩展的
ƒ Vue ( options) {
if ( ! ( this instanceof Vue )
) {
warn ( 'Vue is a constructor and should be called with the `new` keyword' ) ;
}
this . _init ( options) ;
}
ƒ VueComponent ( options) {
this . _init ( options) ;
}
VueComponet这个构造函数我们不进行new实例化,我们希望组件是以标签化的形式展示
< Hello/ > -- > < div> < / div>
< Banner> < / Banner>
组件注册
全局注册 Vue.component( 组件名,组件的选项 )
局部注册 components选项
全局注册
< body>
< div id= "app" >
< Hello> < / Hello>
< head- title> < / head- title>
< Hello/ >
< / div>
< div id= "root" >
< Hello> < / Hello>
< / div>
< / body>
< script src= "../../../lib/vue.js" > < / script>
< script>
var Hello = Vue. extend ( {
template: '<div> hello 组件 </div>' ,
} )
Vue. component ( 'Hello' , Hello )
Vue. component ( 'HeadTitle' , Hello)
new Vue ( {
el: '#app'
} )
new Vue ( {
el: '#root'
} )
< / script>
局部注册
< body>
< div id= "app" >
< Hello> < / Hello>
< / div>
< div id= "root" >
< Hello/ >
< / div>
< / body>
< script src= "../../../lib/vue.js" > < / script>
< script>
var Hello = Vue. extend ( {
template: '<div> 晚上嗨起来 </div>'
} )
new Vue ( {
el: '#app' ,
components: {
'Hello' : Hello
}
} )
new Vue ( {
el: '#root'
} )
< / script>
局部注册组件components选项简写
< body>
< div id= "app" >
< Hello> < / Hello>
< / div>
< div id= "root" >
< Hello/ >
< / div>
< / body>
< script src= "../../../lib/vue.js" > < / script>
< script>
new Vue ( {
el: '#app' ,
components: {
'Hello' : {
template: '<div> 晚上嗨起来 </div>'
}
}
} )
new Vue ( {
el: '#root'
} )
< / script>