专栏首页天天vue中一些小坑(2)

vue中一些小坑(2)

vue中app.vue中的header和footer组件不显示

好久没写vue代码,时间长了不写都是会生疏或者有些地方会忽略,就像在项目刚开始就碰到了自己注册的header和footer不显示 其实这就是我们忽略了一些问题,

其实回头看看vue的官方文档中,我们看到的都是xxxx-xxx,例如<todo-item></todo-item>,都是采用这种格式,回头看看修正后的代码

<template>
  <div id="app">
    <div class="header">
      <my-header></my-header>
    </div>
    <div class="main">
      <div class="tab">
        i'm tab nav
      </div>
      <div class="article">
        i;m article
      </div>
    </div>
    <div class="footer">
      <my-footer></my-footer>
    </div>
  </div>
</template>

<script>
import myheader from 'components/header/header';
import myfooter from 'components/footer/footer';
export default {
  name: 'App',
  components: {
    MyHeader:myheader,
    MyFooter:myfooter
  }
};
</script>

<style>
 @import url('common/style/base.css');
 .header{
   width:100%;
   height:56px;
   line-height:56px;
   color:#444;
 }
</style>

错误代码

<template>
  <div id="app">
    <div class="header">
      <header></header>
    </div>
   ...
    </div>
    <div class="footer">
      <footer></footer>
    </div>
  </div>
</template>

<script>
import header from 'components/header/header';
import footer from 'components/footer/footer';
export default {
  name: 'App',
  components: {
    Header:header,
    Footer:footer
  }
};

</script>
...

这样一看就知道到底是什么原因了,所以在开发中还是多按照文档中使用的代码格式, 而且header和footer是h5中的标签,自定义组件的名字使用这么html标签确实不合理,

回头想想这中错误简直愚蠢的简直了,特在此记录以告诫自己....

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 选择器与css的一些用法

    天天_哥
  • css3转换(banner)

    天天_哥
  • 切换

    天天_哥
  • 【JavaScript小项目】弹出广告

    efonfighting
  • 【译】停止滥用div! HTML语义化介绍

    我们喜欢(使用)<div>标签。它们已经存在了几十年,这几十年来,当需要将一些内容包裹起来达到(添加)样式或者布局目的的时候,它们成为首选元素。查看线上站点时,...

    嘉明
  • 【JavaScript小项目】轮播图

    efonfighting
  • 解决img父元素高度多出3px

      结果运行之后发现,不管是在移动端还是pc端,都会出现这种问题。刚开始以为是父元素初始化了margin和padding的原因,排查css无果,又怀疑是html...

    csxiaoyao
  • 04-老马jQuery教程-DOM节点操作及位置和大小

    DOM时代我们通过document的createElement方法动态创建标签。创建标签后,动态的给他添加属性。例如代码:

    老马
  • vue的计算属性computed和监听器watch

    用户1149564
  • 常见的实体字符

    河湾欢儿

扫码关注云+社区

领取腾讯云代金券