Vue学习笔记06组件基础

最新推荐文章于 2024-07-25 15:19:10 发布

Jatine

最新推荐文章于 2024-07-25 15:19:10 发布

阅读量286

点赞数

分类专栏：前端文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/asdfghjkl_zth/article/details/122530905

版权

前端专栏收录该内容

38 篇文章 3 订阅

订阅专栏

文章目录

- 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>

运行如图：
在这里插入图片描述

Jatine

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习笔记06组件基础

文章目录Vue学习笔记06组件基础什么是组件Vue学习笔记06组件基础什么是组件组件是可复用的Vue 实例，说白了就是一组可以重复使用的模板，跟JSTL 的自定义标签、Thymeleaf的th:fragment以及Sitemesh3框架有着异曲同工之妙。通常一个应用会以一棵嵌套的组件树的形式来组织：如，你可能会有页头、侧边栏、内容区等组件，每个组件又包含其他如导航链接等组件。代码：<!DOCTYPE html><html lang="en"><head&gt
复制链接

扫一扫

专栏目录