vue-组件学习

最新推荐文章于 2024-06-18 22:29:23 发布

小白程序猿一枚

最新推荐文章于 2024-06-18 22:29:23 发布

阅读量286

点赞数

分类专栏： Vue学习文章标签：前端 vue.js

本文链接：https://blog.csdn.net/fgets__/article/details/121490980

版权

Vue学习专栏收录该内容

12 篇文章 1 订阅

订阅专栏

通过Component来自定义组件的名称和样式，说的通俗一点，其实就是相当于把页面上公共的部分单独写一下，用的时候直接拿出来。举个例子：网页上的导航栏

v-for="item in items" :遍历Vue实例中定义的名为items 的数组，并创建同等数量的组件

v-bind:zkw="item" :将遍历的item 项绑定到组件中props 定义的名为zkw属性上。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件学习</title>
</head>
<body>

    <div id="app">
        <!--1.xw就是自定义组件的名字。使用v-for遍历出数组的每个元素赋值到item上，
        然后通过v-bind将item上的值给到zkw上-->
      <xw v-for="item in items" v-bind:zkw="item"></xw>

    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
    <script>

        //定义一个组件，其实这个当组件，就相于页面上公共的部分，比如导航栏
        Vue.component("xw",{
            //2.然后通过使用props将值接收到，最后显示在组件中
            props:["zkw"],
            template:"  <ul>" +
                "            <li>{{zkw}}</li>\n" +
                "        </ul>"
        });

        var vm = new Vue({
            el: "#app",
            data: {
                items:["数据结构","linux","Java"]
            }
        });
    </script>
</body>
</html>

结果如下

在这里插入图片描述

小白程序猿一枚

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue-组件学习

通过Component来自定义组件的名称和样式，说的通俗一点，其实就是相当于把页面上公共的部分单独写一下，用的时候直接拿出来。举个例子：网页上的导航栏v-for="item in items" :遍历Vue实例中定义的名为items 的数组，并创建同等数量的组件v-bind:zkw="item" :将遍历的item 项绑定到组件中props 定义的名为zkw属性上。<!DOCTYPE html><html lang="en"><head>.
复制链接

扫一扫

专栏目录