Vue基础教程(九) - 博客详情

组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。

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

1.局部组件

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document Title</title>
</head>

<body>
<div id="app">
    <Navbar></Navbar>
</div>
<!-- 引入开发环境的vue.js版本，包含了有帮助的命令行警告 ,这样使用的也是最新版本-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        // 定义局部组件，这里可以定义多个局部组件
        components: {
            //组件的名字
            'Navbar': {
                //组件的内容
                template: '<ul><li>首页</li><li>学员管理</li></ul>'
            }
        }
    })
</script>
</body>
</html>

2.全局组件

js/navbar.js

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

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document Title</title>
</head>

<body>
<div id="app">
    <Navbar></Navbar>
</div>

<!-- 引入开发环境的vue.js版本，包含了有帮助的命令行警告 ,这样使用的也是最新版本-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--注意引入次序，必须在引入vue.js之后引入组件-->
<script src="js/navbar.js"></script>
<script>
    let vm = new Vue({
        el: '#app'
    })
</script>
</body>
</html>

运行效果：