Vue--项目开发之实现tabbar功能来学习单文件组件1

创建好一个Vue项目后，我们进入项目里，点开src文件下的components文件里的helloworld.vue

文件。清空初始数据。然后开始编写.

一个.vue文件初始格式为以下三部分（组件三部曲）
<template>
  
</template>

<script>
    
</script>

<style>
 
</style>

　　然后我们在template标签里定义一个div标签

<div class="tabbar">
</div>

接着在style标签里定义一些样式

.tabbar {width: 100%;height: 12%; position: fixed;bottom: 0;
　　　　　　left: 0;border-top: 1px solid #ccc; }

以上就是父组件helloword.vue的定义
然后项目开发都是通过一大堆单文件组件相互调用来实现项目的。
所以我们再在components文件下创建一个item.vue文件
同理通过组件三部曲定义如下：

<template>
  <div class="itemwrap">
      <img src="../assets/img/hot5.gif" alt=""/><br/>
      <span>首页</span>
  </div>
</template>

<script>
  
</script>

<style>
  .itemwrap {width: 20%; float: left; text-align: center; padding: 2px 0;}
  .itemwrap img {width: 50px;}
  .itemwrap span {font-size: 16px; color: #999;}
</style>

　　这段代码我直接写好tabbar选项的模板了（标签加样式）

　　那如何去在父组件里调用子组件呢?

　　我们需要import引入

　　也就是helloworld.vue里的script标签里

import item from './item.vue'

export default {
      components:{
          item
      }
}
然后通过export释放组件给template调用
最后就是在div里写上<item></item>标签了调用子组件了模板

显示效果如下：

很好，到这一步，我们就初步试用了单组件知识编写vue项目了

下一篇文章我会继续完成这个tabbar项目开发

 

转载于:https://www.cnblogs.com/YKingcc/p/8491212.html