创建好一个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项目开发


Vue--项目开发之实现tabbar功能来学习单文件组件1的更多相关文章

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

    上一篇文章里item.vue里的span标签内容是写死了,但是我们不希望写死 所以对于五个tab选项的标题需要从外部传入,也就说 需要在item.vue里的script里写上 export defau ...

  2. webpack搭建vue项目开发环境【文档向学习】

    为何有这篇文章 各个社区已经有无数篇帖子介绍如何使用webpack搭建前端项目,但无论是出于学习webpack的目的还是为了解决工作实际需要都面临着一个现实问题,那就是版本更新.别人的帖子可能刚写好版 ...

  3. Vue项目开发相关问题总结

    Vue项目开发相关问题总结 一.创建一个项目(两种方式) 1.通过CLI命令行创建,具体步骤如下: (1)Node 版本要求 Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11 ...

  4. Vue 项目开发

    目录 Vue 项目开发 项目目录结构解析 入口文件 main.js (项目入口) 根组件 app.vue index.html 文件入口 router 路由 components 子组件 项目初始化 ...

  5. Vue项目开发最新、最全代码规范文档

    Vue项目开发最新.最全代码规范文档 2019年02月21日 10:43:49 yw00yw 阅读数 337   一. 目录结构 |— build 构建脚本目录 |— build.js 生产环境构建( ...

  6. Vue项目中添加锁屏功能

    0. 直接上 预览链接 Vue项目中添加锁屏功能 1. 实现思路 ( 1 ) 设置锁屏密码 ( 2 ) 密码存localStorage (本项目已经封装h5的sessionStorage和localS ...

  7. vue第七单元(vue的单文件组件形式-单文件组件的加载原理-vue-cli构建的开发环境以及生命周期)

    第七单元(vue的单文件组件形式-单文件组件的加载原理-vue-cli构建的开发环境以及生命周期) #课程目标 掌握安装 vue-cli 命令行工具的方法,掌握使用命令行在本地搭建开发环境,使用命令行 ...

  8. webpack入坑之旅(五)加载vue单文件组件

    这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不 ...

  9. Vue单文件组件

    前面的话 本文将详细介绍Vue单文件组件 概述 在很多 Vue 项目中,使用 Vue.component 来定义全局组件,紧接着用 new Vue({ el: '#container '}) 在每个页 ...

随机推荐

  1. python tcp .demo

    client: # -*- coding: utf- -*- import socket s=socket.socket(socket.AF_INET,socket.SOCK_STREAM) s.co ...

  2. 使用外网访问阿里云服务器ZooKeeper

    参考网址: zookeeper单机/集群安装详解 使用外网访问阿里云服务器ZooKeeper 阿里云服务管理控制台 1. 阿里云ECS安装zookeeper 环境:我安装的是zookeeper3.4. ...

  3. 使用Qpaint在图片上写文字

    开发过程中需要实现在图片上叠加文字,可以采用Qpaint在图片上写文字,然后将图片显示在上面.再将Qlabel加到Qwidget中.效果如下 //创建对象,加载图片 QPixmap pix; pix. ...

  4. 牛客OI周赛6-提高组 B 践踏

    践踏 思路: 如果k不为0, 那么就是对k取模意义下的区间更新, 单点查询 否则, 就是普通的区间更新, 单点查询 代码: #pragma GCC optimize(2) #pragma GCC op ...

  5. AtCoder Beginner Contest 113 D Number of Amidakuji

    Number of Amidakuji 思路:dp dp[i][j]表示经过(i, j) 这个点的方案数 然后一层一层地转移, 对于某一层, 用二进制枚举这一层的连接情况, 判断连接是否符合题意, 然 ...

  6. lua --- Module

    首先需要明白,一般情况下,我们的定义的lua模块的文件与模块名(其实就是table的名字)是一致的,当然,不一致代码也是可以编译的(亲测),之所以这样,本人认为是为了实际项目中管理的方便.以下是定义模 ...

  7. Spring Boot入门第四天:使用Thymeleaf模板引擎

    原文链接 关于Thymeleaf的优点,我只说一条:它就是html页面啊,直接可以用浏览器打开.受够了JSP的同学可以尝试一下. 1.在pom.xml文件中添加依赖: <!--<depen ...

  8. 20165327 学习基础和C语言基础调查

    学习基础和C语言基础调查 一.关于技能 1. 你有什么技能比大多人(超过90%以上)更好? 根据数据来看,应该是短跑(几次测速50米平均时间6.5s),上学期的体测中短跑这项成绩在班上排前面,我们这个 ...

  9. 全站从http升级到https(WordPress博客)

    最近几年HTTPS取代HTTP已经成为大趋势,HTTP是超文本传输协议,信息是明文传输的,而HTTPS是安全超文本传输协议,需要证书和提供安全连接,换句话说,HTTPS是嵌套了SSL加密的HTTP连接 ...

  10. wdcp环境redis的位置