[JavaScript知识库] Vue学习笔记06组件基础

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> Vue学习笔记06组件基础 -> 正文阅读

[JavaScript知识库]Vue学习笔记06组件基础

文章目录

- Vue学习笔记06组件基础
- - 什么是组件

Vue学习笔记06组件基础

什么是组件

组件是可复用的Vue 实例，说白了就是一组可以重复使用的模板，跟JSTL 的自定义标签、Thymeleaf
的th:fragment以及Sitemesh3框架有着异曲同工之妙。通常一个应用会以一棵嵌套的组件树的形式来组织：
在这里插入图片描述
如，你可能会有页头、侧边栏、内容区等组件，每个组件又包含其他如导航链接等组件。
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>Vue组件</title>
</head>
<body>
<div id="app">

    <!--使用自定义组件-->
    <ul>
        <!--用v-bind将props的item与item进行绑定-->
        <my-component-li v-for="item in items" v-bind:item="item"></my-component-li>
    </ul>

</div>
    <script>

        //定义一个组件
        Vue.component("my-component-li",{
            props:["item"],//item对应{{item}}
            template:'<li>{{item}}</li>'
        })
        var app = new Vue({
            //element的缩写，挂载元素
            el:"#app",
            //列表渲染
            data:{
                items:["古力娜扎","迪丽热巴","玛尔扎哈"]//对应"item in items"中的items
            }

        })
    </script>
</body>
</html>