Vue-第一个Vue组件

最新推荐文章于 2024-07-12 11:59:46 发布

lengzher_5601

最新推荐文章于 2024-07-12 11:59:46 发布

阅读量94

点赞数 1

分类专栏： Vue 文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_49512993/article/details/120581971

版权

Vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

Vue-第一个Vue组件

六、第一个Vue组件

组件是可复用的Vue实例，说白了就是一组可以重复使用的模板，跟JSTL的自定义标签、Thymeleal的th:fragment等框架有着异曲同工之妙，通常一个应用会以一棵嵌套的组件树的形式来组织：

在这里插入图片描述

注意：在实际开发中，我们并不会用以下方式开发组件，而是采用vue-cli创建，vue模板文件的方式开发，以下方法只是为了让大家理解什么是组件。

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">

    <!--组件：传递给组件中的值：props-->
    <courses v-for="item in items" v-bind:course="item"></courses>

</div>
<!--导入Vue.js-->
<script src = "https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    //定义一个组件
    Vue.component("courses",{
        props: ['course'],
        template: '<li>{{course}}</li>'
    });

    var vm = new Vue({
        el:"#app",
        data:{
            items:["java","linux","前端"]
        }
    });

</script>

</body>
</html>

说明：

v-for=“item in items”：遍历Vue实例中定义的名为items的数组，并创建同等数量的组件
v-bind:course=“item”：将遍历的item项绑定到组件中props定义名为item属性上；= 号左边的course为props定义的属性名，右边的为item in items 中遍历的item项的值

lengzher_5601

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue-第一个Vue组件

Vue-第一个Vue组件六、第一个Vue组件组件是可复用的Vue实例，说白了就是一组可以重复使用的模板，跟JSTL的自定义标签、Thymeleal的th:fragment等框架有着异曲同工之妙，通常一个应用会以一棵嵌套的组件树的形式来组织：注意：在实际开发中，我们并不会用以下方式开发组件，而是采用vue-cli创建，vue模板文件的方式开发，以下方法只是为了让大家理解什么是组件。<!DOCTYPE html><head> <meta charset="U
复制链接

扫一扫