vue的组件

最新推荐文章于 2023-01-29 13:37:50 发布

创造1024组合成员杨抄阅

最新推荐文章于 2023-01-29 13:37:50 发布

阅读量197

点赞数

文章标签： vue html

本文链接：https://blog.csdn.net/weixin_35969228/article/details/105924243

版权

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

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

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

一.自定义局部组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<div id="app"> 
   <Navbar></Navbar>
</div>

    <script src="vue.min.js">
    </script>

    <script>
        new Vue({
            el:'#app',
            components:{
                'Navbar': {
            //组件的内容
            template: '<ul><li>首页</li><li>学员管理</li></ul>'
        }
            }
        })
    </script>
</body>
</html>

二.自定义全局组件

局部组件只能在当前页面用，所有页面使用需要全局组件

新建文件夹，在文件夹下添加包含组件的js文件

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

})

将js文件引入 <script src="components/Navbar.js"></script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<div id="app"> 
   <Navbar></Navbar>
</div>

    <script src="vue.min.js"></script>
    <script src="components/Navbar.js"></script>

    <script>
        new Vue({
            el:'#app',
      
        })
    </script>
</body>
</html>