首页
学习
活动
专区
圈层
工具
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

vue中一些小坑(2)

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

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

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

代码语言:javascript
复制
<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>

错误代码

代码语言:javascript
复制
<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标签确实不合理,

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

下一篇
举报
领券