大概是只仓鼠 2021-10-12 13:49 采纳率: 79.6%
浏览 56
已结题

vue组件设计基础，一个比较简单的问题

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <!-- <script src="https://unpkg.com/vue@next"></script> -->
        <script src="js/v3.2.8/vue.global.prod.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <flex-rol>hi</flex-rol>
        <script>
        Vue.component('flex-rol',{
            template:'<div><p class="flex-center"></p><slot></slot></div>'
        })
        </script>
    </body>
    <style type="text/css">
        .flex-center{
            display: flex;
            align-items: center;
            flex-direction: column;
            color: blue;
        }

    </style>
</html>

报错
Uncaught TypeError: Vue.component is not a function
at index.html:12（也就是Vue.component 那一行），如何更改？

  • 写回答

2条回答 默认 最新

  • .︶ㄣ☆.'龍 2021-10-12 14:05
    关注

    首先，vue需要实例化，然后挂载到节点上，组件才能进行渲染，具体知识参考官网https://cn.vuejs.org/v2/guide/components.html
    改造代码如下：

    
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <!-- <script src="https://unpkg.com/vue@next"></script> -->
        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    </head>
    <body>
        <div id="demo">
            <flex-rol>hi</flex-rol>
        </div>
         <script>
        Vue.component('flex-rol',{
            template:'<div><p class="flex-center"></p><slot></slot></div>'
        })
        new Vue({ el: '#demo' })
        </script>
    </body>
   
    <style type="text/css">
        .flex-center{
            display: flex;
            align-items: center;
            flex-direction: column;
            color: blue;
        }
    </style>
</html>

    有帮助麻烦点个采纳【本回答右上角】，谢谢~~

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

问题事件

  • 系统已结题 10月20日
  • 已采纳回答 10月12日
  • 创建了问题 10月12日

悬赏问题

  • ¥15 完成下列问题完成下列问题
  • ¥15 C#算法问题, 不知道怎么处理这个数据的转换
  • ¥15 YoloV5 第三方库的版本对照问题
  • ¥15 请完成下列相关问题！
  • ¥15 drone 推送镜像时候 purge: true 推送完毕后没有删除对应的镜像,手动拷贝到服务器执行结果正确在样才能让指令自动执行成功删除对应镜像，如何解决？
  • ¥15 求daily translation（DT）偏差订正方法的代码
  • ¥15 js调用html页面需要隐藏某个按钮
  • ¥15 ads仿真结果在圆图上是怎么读数的
  • ¥20 Cotex M3的调试和程序执行方式是什么样的？
  • ¥20 java项目连接sqlserver时报ssl相关错误