Vue组件

一、组件（重点）

组件（Component）是 Vue.js 最强大的功能之一。

组件可以扩展 HTML 元素，封装可重用的代码。

组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：

 

 

1、局部组件

创建 01-1-局部组件.html

定义组件

var app = new Vue({

  el: '#app',

  // 定义局部组件，这里可以定义多个局部组件

  components: {

      //组件的名字

      'Navbar': {

          //组件的内容

          template: '<ul><li>首页</li><li>学员管理</li></ul>'

      }

  }

})

使用组件
<div id="app">
    <Navbar></Navbar>
</div>

2、全局组件

创建 01-2-全局组件.html

定义全局组件：components/Navbar.js

// 定义全局组件
Vue.component('Navbar', {
    template: '<ul><li>首页</li><li>学员管理</li><li>讲师管理</li></ul>'
})

<div id="app">
    <Navbar></Navbar>
</div>
<script src="vue.min.js"></script>
<script src="components/Navbar.js"></script>
<script>
    var app = new Vue({
        el: '#app'
    })
</script>