其他分享
首页 > 其他分享> > Vue组件

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>

 

标签:Vue,定义,Navbar,app,组件,全局
来源: https://www.cnblogs.com/upupup-999/p/15788318.html