在讲解之前，大家可以看一下我的资源里的一个demo（产品流程态势图），里面就是在html里面使用的vue和vue组件，大家可以参考一下，如果有什么疑问，可以评论留言，我会及时的回复大家！

上期我们讲解了如何在html里面引入vue.js，这一期我们来讲解一下如何在html里使用vue组件，防止代码臃肿，方便我们维护，下面是一般组件在html里的示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./vue.js"></script>
  </head>
  <body>
    <!-- 创建一个根元素 -->
    <div class="home" id="home">
      <!-- 使用卡片组件 -->
      <card-Bg :card-Item="cardItem"></card-Bg>
    </div>


    <!-- 卡片组件开始 -->
    <template type="text/x-template" id="cardBg">
      <!-- 子组件的最外层必须有一个根元素 -->
      <div>
        <div>{{cardItem.name}}</div>
        <div>{{cardItem.id}}</div>
      </div>
    </template>
    <!-- 卡片组件结束 -->


    <script>
      Vue.component("cardBg", {
        template: "#cardBg",
        props: ["cardItem"],
        data() {
          return {};
        },
        methods: {},
      });
      // 将vue挂载到id为home的根元素上
      var vm = new Vue({
        el: "#home",
        data() {
          return {
            cardItem: {
              name: "子组件1",
              id: "1",
            },
          };
        },
        created() {},
      });
    </script>
  </body>
</html>

上面有两个注意点：

1、子组件必须有一个根元素，如图；

 2、组件使用时的标签名字和传参时使用的命名不能用驼峰，需要用“-”连接，如图；

 以上是vue组件在html中的使用，下面分享一个知识点：递归组件，首先说一下递归组件的使用场景，当接口返回的数据是一个树状结构时，我们需要使用递归组件将树状结构深层遍历出来，这个大家也可以参考我的资源里的“产品流程态势图”左侧树结构，下面是简单的代码实现：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./vue.js"></script>
  </head>
  <body>
    <!-- 创建一个根元素 -->
    <div class="home" id="home">
      <!-- 使用递归卡片组件 -->
      <card-Bg :card-Item="cardItem"></card-Bg>
    </div>


    <!-- 递归卡片组件开始 -->
    <template type="text/x-template" id="cardBg">
      <!-- 子组件的最外层必须有一个根元素 -->
      <div>
        <div v-for="(item,index) in cardItem.children" :key="item.label">
          {{item.label}}
          <div v-if="item.children">
            <card-Bg :card-Item="item"></card-Bg>
          </div>
        </div>
      </div>
    </template>
    <!-- 递归卡片组件结束 -->


    <script>
      Vue.component("cardBg", {
        template: "#cardBg",
        props: ["cardItem"],
        data() {
          return {};
        },
        methods: {},
      });
      // 将vue挂载到id为home的根元素上
      var vm = new Vue({
        el: "#home",
        data() {
          return {
            cardItem: {
              label: "AM6.100.423",
              children: [
                {
                  label: "AM6.101.431",
                  children: [
                    {
                      label: "AM6.102.431",
                      children: [
                        {
                          label: "AM6.103.431",
                        },
                      ],
                    },
                  ],
                },
                {
                  label: "AM6.201.431",
                  children: [
                    {
                      label: "AM6.202.431",
                      children: [
                        {
                          label: "AM6.203.431",
                        },
                      ],
                    },
                    {
                      label: "AM6.202.432",
                      children: [
                        {
                          label: "AM6.203.432",
                        },
                        {
                          label: "AM6.204.432",
                        },
                      ],
                    },
                  ],
                },
                {
                  label: "AM6.301.431",
                },
              ],
            },
          };
        },
        created() {},
      });
    </script>
  </body>
</html>

 希望本次的分享对大家有所帮助！

# vue.js # 前端 # javascript
GitHub 加速计划 / vu / vue
105
18
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支：1 个月前 )
9e887079 [skip ci] 1 年前
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 1 年前
Logo
GitCode 开源社区

新一代开源开发者平台 GitCode，通过集成代码托管服务、代码仓库以及可信赖的开源组件库，让开发者可以在云端进行代码托管和开发。旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

cover

混元世界模型 1.1 在 GitCode 开源！秒级生成 3D 世界，开发者速来体验！

avatar GitCode 开源社区

华为盘古 Ultra-MoE-718B-V1.1 正式开放下载！

👉Int8量化版本也同步开源：https://gitcode.com/ascend-tribe/openPangu-Ultra-MoE-718B-V1.1-Int8还记得9月底刷屏的「华为盘古718B」吗？当时凭借的训练哲学，在 SuperCLUE 榜单中一举冲至开源模型第三，成为业界焦点。openPangu-Ultra-MoE-718B-V1.1 是基于昇腾 NPU 训练的大规模混合专家（Mo

avatar GitCode 开源社区
cover

GitCode 携手昇腾：内容创作激励来袭，学习技术同时赢奖励

avatar GitCode 开源社区