开发者学堂课程【微服务+全栈在线教育实战项目演练（SpringCloud Alibaba+SpringBoot）:前端技术-vue 组件】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/667/detail/11310
前端技术-vue 组件
组件
1.组件定义
组件(Component)是 Vuejs 最强大的功能之一。
组件可以扩展 HTML 元素，封装可重用的代码。
组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树:
vue 中的操作都是以组件方式构建的类似于java中每部分都是一个对象。
2.局部组件
创建01-1-局部组件.html
（1）定义组件
var app = new Vue({
el:‘#app',
//定义局部组件，这里可以定义多个局部组件
components:{
//组件的名字
'Navbar':{
//组件的内容
template:'<ul><l1>首页</li><li>学员管理</li></ul>' }
｝
｝
｝)
（2）使用组件
在写 vue 代码之前写过
new Vue({
el:'#app'，
data:{
userlist:[
{id:l,username: 'helen', age:18 },
{id:2, username: 'peter', age: 28},
{id:3,username: 'andy', age: 38}
]
}
｝)
除此以外，vue 还有 components 属性，即组件的意思。可以自定义 vue 中使用的组件或内容。
（3）做演示查看效果
使用一个最基本的例子
//组件的名字
'Navbar':{
//组件的内容
template:'<ul><l1>首页</li><li>学员管理</li></ul>' }
组件的名字为 Navbar,
组件内容需要加固定的名字 template,template 有模板的意思，ulli 为标签。
组件该如何使用？
把组件的名字作为一个标签就可以做到，这个标签不是 htlm 自带的，是自己定义的标签。效果就是把组件内容做出显示
证明组件标签已经生效
组件只在当前页面有效，换界面以后组件不可用
2.全局组件
创建01-2-全局组件.html
定义全局组件:components/Navbar.js
//定义全局组件
Vue.component("Navbar', {
template:'<ul><li>首页</li><1i>学员管理</li><i>讲师管理</li></ul>
})
每个页面中引入 js 文件用标签即可以做到
写法与全局组件有区别，刚刚是在html文件中，现在是单独在js文件中
全局组件的使用，将文件直接引入用标签就可以做到。在新的页面中，将js文件引入
〈script src="components/Navbar.js"〉〈/script〉,加入以后直接使用标签即可。这就引入了 js 文件将内容做出显示
