Vue组件01

原创于 2021-10-12 12:22:11 发布 · 146 阅读

CC 4.0 BY-SA版权

文章标签：

本文展示了如何在Vue中创建并注册一个名为'haha'的组件，该组件的模板包含文本'哈哈我是头部'。通过在Vue实例中使用components选项，可以在模板中直接使用<haha/>标签。重点讲解了Vue组件的template定义和components注册过程，为前端开发者提供了一次实际操作的教程。

<body>
    <div id="app">

        <haha></haha>
        <haha></haha>
    </div>
</body>
<script>
    // 写一个组件
    var  box = {
        template:`
            <div>哈哈我是头部</div>
        `
    }
    var vm = new Vue({
        el:"#app",
        // 可以直接使用<haha/>了
        components:{
            "haha":box
        }
    })
</script>

注意：1.模板的书写(template)，2.注册组件（components）