VsCode中使用Emmet神器快速编写HTML代码

1
根组件下面包含了很多的子组件

组件就是控制屏幕的某一个部分，某一个区域


组件是可以相互包含的
组件是定义在类里面的，类里面有属性和方法

注解会标记一个class是component

模板决定了组件长得什么样子

style是风格什么样子

开始做顶部的tabBar
把原来的代码都删除掉


emmet
emmet的语法：
https://docs.emmet.io/

先写上这三个


写css：

这样就横过来显示，不是竖着显示了

上下为0 左右为5px

四个是上右下左，是对称的，所以可以写成 0 5 这种形式

这样之间就有了间隔

把文字下面的斜划线去掉

左右和上面都没有贴合

还是没有很好的贴合的，主要是由于它外部产生的
 
在最外层的styles.css内去写css代码。这个是全局的

现在就全完的贴合了

ngFor

使用ngFor循环的形式

这就要求tabs是一个数组
在ts内定义属性，这是个数组

ngFor循环出来的菜单

ngFor是一个指令

回顾

组件就是控制屏幕的某块区域的视图
class通过属性和方法与视图交互


html的内容可以这么写，这是内联的写法

ant design的例子都是内联的写法
https://ng.ant.design/components/grid/zh

通过chrome的插件Augury看组件Tree

这里可以查看依赖注入的顺序

2-3 【初识组件】顶部 TabBar的更多相关文章

  1. Vue2.0 【第二季】第6节 Component 初识组件

    目录 Vue2.0 [第二季]第6节 Component 初识组件 第6节 Component 初识组件 一.全局化注册组件 二.局部注册组件局部 三.组件和指令的区别 Vue2.0 [第二季]第6节 ...

  2. uni-app 顶部tabbar切换

    完成样式 项目地址:https://gitee.com/jielov/uni-app-tabbar 顶部tabbar代码 <!--顶部导航栏--> <view class=" ...

  3. 【Flutter学习】基本组件之TabBar顶部导航

    一,概述 TabBar,是材料设计(Material design)中很常用的一种横向标签页.在Android原生开发中,我们常用ViewPage或者一些常用的标签页开源库,来实现并行界面的横向滑动展 ...

  4. vue 初识组件

    Vue.component("greeting",{ template: `<p>{{ name }}大家好 <button v-on:click="c ...

  5. Component 初识组件

    component组件是Vue学习的重点.重点.重点,重要的事情说三遍.所以你必须学好Vue component.其实组件就是制作自定义的标签,这些标签在HTML中是没有的.比如:<diy> ...

  6. vux tabbar 组件

    1.App.vue <!-- 入口文件 --> <template> <div id="app"> <!-- 视图层 --> < ...

  7. svelte组件：Svelte3自定义Navbar+Tabbr组件|svelte自定义插件

    基于Svelte3自定义组件Navbar+Tabbar沉浸式导航条|底部凸起菜单栏 Svelte 一种全新的构建用户界面的框架.当下热门的 Vue 和 React 在浏览器中需要做大量的工作,而 Sv ...

  8. Vue基础（环境配置、内部指令、全局API、选项、内置组件）

    1.环境配置 安装VsCode 安装包管理工具:直接下载 NodeJS 进行安装即可,NodeJS自带 Npm 包管理工具,下载地址:https://nodejs.org/en/download/安装 ...

  9. 08: vue组件

    1.1 初识组件 1.什么是组件 1. Html中有组件,是一段可以被复用的结构代码 2. Css中有组件,是一段可以被复用的样式 3. Js中有组件,是一段可以被复用的功能 4. Vue中也有组件, ...

随机推荐

  1. Linux无法被远程登录；用户的关机， 重启，注销，新增用户，删除用户

    不能使用xshell连接到我的Linux服务器 通过再windows的cmd中ping了我的Linux地址,发现网络不通. 查看百度发现是因为网络没有选桥接模式,然后选完桥接模式告诉我: 然后发现没有 ...

  2. Linux操作系统故障排除之Grub信息被删除

    Linux操作系统故障排除之Grub信息被删除 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. [root@yinzhengjie ~]# hexdump -C /dev/sda - ...

  3. Centos7安装配置Nginx_笔记

    从Nginx官方网站下载稳定的主要分支版本.然后解压开来. 在Linux中需要使用编译工具编译安装Nginx. 首先安装“Development Tools”工具,包含了所有编译Nginx所需的依赖工 ...

  4. C++（四十七） — 文件输入、输出流

     1.文件输入.输出流 由于文件设备并不像显示器屏幕与键盘那样是标准默认设备,不能像cout那样预先定义的全局对象,所以我们必须自己定义一个该类的对象. ifstream类,它是从istream类派生 ...

  5. P1197 [JSOI2008]星球大战[并查集+图论]

    题目来源:洛谷 题目描述 很久以前,在一个遥远的星系,一个黑暗的帝国靠着它的超级武器统治着整个星系. 某一天,凭着一个偶然的机遇,一支反抗军摧毁了帝国的超级武器,并攻下了星系中几乎所有的星球.这些星球 ...

  6. 应用安全测试技术DAST、SAST、IAST对比分析【转】

    转自:https://blog.csdn.net/qq_29277155/article/details/92411079 一.全球面临软件安全危机 2010年,大型社交网站rockyou.com被曝 ...

  7. App版本更新接口的设计

    前段时间公司业务调整,新开了新的移动端的项目,所以和朋友聊到了“版本号”和“版本更新所需的数据表设计”. 一般来讲大部分的软件版本号分3段,比如 A.B.C A 表示大版本号,一般当软件整体重写,或出 ...

  8. Basic concepts of docker/kubernete/kata-container

    Kubereters An open-source system for automating deployment, scaling, and management of containerized ...

  9. S1_搭建分布式OpenStack集群_07 nova服务配置 (计算节点)

    一.服务安装(计算节点)安装软件:# yum install openstack-nova-compute -y 编辑/etc/nova/nova.conf文件并设置如下内容:# vim /etc/n ...

  10. S1_搭建分布式OpenStack集群_03 Mysql、MQ、Memcached、ETCD安装配置

    一.安装mysql(contorller)controller ~]# yum -y install mariadb mariadb-server python2-PyMySQL 配置my.cnf文件 ...