Ewall1106/mall（请选择分支17） 1、基础语法 （1）v-for语法 https://cn.vuejs.org/v2/guide/list.html 我们用 v-for 指令根据一组数组的选项列表进行渲染...语法 (双大括号) 的文本插值： Message: {{ msg }} （3）父子组件之间的传值 https://cn.vuejs.org/v2/guide/components-props.html...父组件通过prop给子组件下发数据，子组件通过事件给父组件发送信息。 ? vue官网 具体我们在项目中动手实现简单的传值。...父组件传值 :是v-bind的简写形式 ② 子组件接收数据 子组件什么接收数据呢？...分类模块数据渲染 （4）推荐模块 这是除了使用前面提到的列表渲染外，就是使用Mustache语法 (双大括号) 的文本插值了。 ?
1. template 主要是组件的引用，大体页面布局 style 主要是组件的CSS样式引用 script 主要就是js的调用，weex的声明周期在此实现 ''' module.exports...Weex盒模型 width {length}：总宽度 height {length}：总高度 padding {length}：内边距，内容和边框之间的距离，具体为padding-left {length...}，padding-right {length}，padding-top {length}，padding-bottom {length} margin {length}：外边距，元素和元素之间的空白距离...Weex 盒模型的 box-sizing 默认为 border-box，即盒子的宽高包含内容、内边距和边框的宽度，不包含外边距的宽度。...为元素设置 position 后，可通过 top、right、bottom、left 四个属性设置元素坐标。 position {string},设置定位类型。
属性 描述 list-style 在一个声明中设置所有的列表属性 list-style-image 将图像设置为列表项标记 list-style-position 设置列表项标记的放置位置 inside...将列表样式放入content中 outside 默认，列表样式不在content中，一般在psdding内 list-style-type 设置列表项标记的类型 复合写法 list-style...在一个声明中设置所有外边距属性 margin-top 设置元素的上外边距 margin-right 设置元素的右外边距 margin-bottom 设置元素的下外边距 margin-left 设置元素的左外边距...设置元素的下内边距 padding-left 设置元素的左内边距 ---- CSS 定位属性（Positioning） 属性 描述 position 规定元素的定位类型 bottom 设置定位元素下外边距边界与其包含块下边界之间的偏移...right 设置定位元素右外边距边界与其包含块右边界之间的偏移 left 设置定位元素左外边距边界与其包含块左边界之间的偏移 top 设置定位元素上外边距边界与其包含块上边界之间的偏移 overflow
而这里要介绍的是管理后台里面的各个组件之间的状态关系。 为啥需要状态？因为组件划分的非常原子化（细腻），所以造成了很多的组件，那么组件之间就需要一种“通讯方式”，这个就是状态了。...动态 tab 点击一下左面的菜单，创建一个新的tab，然后加载对应的组件，一般是列表页面（组件），也可以是其他页面（组件）。...列表的管理类 我们可以为列表的状态写一个状态的管理类。 这个类是在单独的 js 文件里面，并不需要像 Vuex 那样去设置 action 或者 module。...定义列表数据的容器 列表数据并没有在状态里面定义，而是在管理类里面定义的，因为主要列表组件才需要这个列表数据，其他的组件并不关心列表数据。...文件结构 基础功能搭建好了之后，剩下的就简单了，建立组件设置模板、控件、组件和使用状态即可。 总体结构如下： ? 列表状态的使用 基础工作做好之后我们来看看，在各个组件里面是如何使用状态的。
Flutter组件基础——Container Container是容器组件，类似于H5中的标签，亦或者iOS中的UIView，是布局的基础控件。 的边距 margin：Container距父视图的边距 decoration：装饰 子视图对齐方式-alignment class MyApp extends StatelessWidget { @...的边距-padding padding设置的是子视图，距Container的边距，两种设置方式，通常有两种设置方式，EdgeInsets.all常用于设置所有边距都一致；EdgeInsets.fromLTRB...用于设置指定边距（LTRB对应的Left、Top、Right、Bottom）。...-常用组件
1margin-bottom设置元素的下外边距。1margin-left设置元素的左外边距。1margin-right设置元素的右外边距。1margin-top设置元素的上外边距。...1padding-right设置元素的右内边距。1padding-top设置元素的上内边距。1 定位 元素描述版本bottom设置定位元素下外边距边界与其包含块下边界之间的偏移。...1left设置定位元素左外边距边界与其包含块左边界之间的偏移。2overflowoverflow该属性作用在block型元素上。...2positionposition该属性设置元素的定位方式， 且在动画特效脚本化时效果很好。1right设置定位元素右外边距边界与其包含块右边界之间的偏移。...2top设置定位元素的上外边距边界与其包含块上边界之间的偏移。2vertical-align设置元素的垂直对齐方式。
，在此我们只需要设置当前博文头部行的高度为包裹、背景色为透明即可： 由于头部标题本身上内边距是有一定距离的，在此设置这个行的上内边距以及距离顶部的一段距离，这样才可以使上部分像有一个隔断的颜色...，当然你也可以设置边距样式达到同样的效果： 接着设置内边距： 此时页面效果如下： 接着往这个行中添加一个行命名为标题，同样设置高度为包裹背景色为透明： 由于标题还距离左右两侧有一定的边距...，并且接下来的所有内容都距离左右有一定边距，此时直接设置父容器的左右内边距是最方便的方法： 直接设置主要内容行的内边距： 接着往标题行中添加文本，设置字体大小以及文本组件的宽度为100%：...此时页面效果如下： 如果想尾巴弄一个远程标记，只需要直接添加一个文本，设置小一点字号和背景颜色即可： 此时效果如下： 若想使当前原创标记有一点宽度，直接设置这个文本的内边距即可...设置完毕后在左行中添加一个文本用于记录时间： 此时页面效果如下： 但此时我们的时间和点赞区域应该有一定的内边距，设置他们的父容器上下内边距： 此时页面显示如下： 接着在右按钮中添加一个按钮
3、其他浮动元素padding：间隙(设定间隙的宽度)margin：边距(用来设定边距的宽度)五、边框style：样式 (如：虚线等等)width：宽度color：颜色六、列表list-style-type...：列表样式类型 (用来设定列表项标记(list-item marker)的类型)list-style-image：列表样式图片 (用来设定列表样式图片标记的地址)list-style-position：...列表样式位置 (用来设定列表样式标记的位置)七、定位position：位置 width：宽度height：高度visibility：规定元素是否可见 (即使不可见，但仍占用空间，建议使用display来创建不占页面空间的元素...)Z-index：设置元素的堆叠顺序 (该属性设置一个定位元素沿z轴的位置，z轴定义为垂直延伸到显示区的轴。...视觉效果：cursor 规定要显示的光标的类型(鼠标放在指定位置鼠标的形状)filter注：请尽量少的使用分页属性，并且避免在表格、浮动元素、带有边框的元素中使用分页属性。
列表属性作用： 设置不同的列表项标记问有序列表 设置不同的列表项为无序列表 设置列表项标记为图像 列表 HTML有两种类型的列表： 无序列表 有序列表 使用CSS可以列出进一步的样式...vertical-align:bottom; } 表格填充 如果在标的内容中控制空格之间的边框，应使用td和th元素的填充属性： td { padding:15px; } 表格颜色 下面的例子指定边框的颜色...CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。... 这是一个指定边距大小的段落。... 这是一个指定边距大小的段落。
先打开我们创建的自定义应用，在代码区点击新建，创建一个数据表查询图片数据表选择分类，方法选择查询列表图片2 欢迎语搭建变量定义好之后就要考虑组件搭建，页面的话我们头部添加一个背景图，中间部分用图标加文字的形式展示想添加一个普通容器作为背景图片设置高度为...250px，背景为图片背景图片在添加一个普通容器用来放置我们的欢迎语，高度设置为149px图片继续添加一个普通容器，用来显示文本，设置40px的内边距图片里边添加两个文本组件图片修改文本组件的内容，设置...12px的内边距，设置第一个文本组件的文本格式为H4图片3 分类导航搭建选中最外层的普通容器，添加一个普通容器来放置我们的分类信息图片设置一定的背景色和圆角图片继续添加一个普通容器，宽设置为94%，外边距为...，数据源选择分类，模板选择图文列表图片先精简一下组件，只保留图片和文本组件图片然后将边框的样式去掉图片然后给普通容器绑定背景色图片图片现在组件之间有点挤，设置一点下外边距图片4 搭建底部导航首页部分我们需要有一个底部导航栏...，添加一个tab栏组件，并设置好标签列表图片总结本篇带着大家搭建了一下首页，主要需要掌握页面的布局和数据列表组件的设置。
Button按钮用法 背景可设置 : Button按钮组件可以使用android:background属性设置按钮组件的背景颜色, 图片; 1....下册的线条, 那么默认右边和下侧会有一定边距; 设定右边和下边距完全显示 : 这里为了显示效果明显, 设置完全显示; 拉入 draw9patch.bat 编辑器, 开始编辑 : (3) 设置内容显示区域...="fill_parent" android:text="没有设置右边距和下边距没有设置右边距和下边距没有设置右边距和下边距没有设置右边距和下边距" android:background...ToggleButton组件 组件介绍 : 该组件外形与按钮相似, 该按钮组件的底部有一个带颜色线条, 当checked属性为true的时候, 该线条显示颜色, checked属性为false的时候,...-- 最小宽度 : android:switchMinWidth, 设置开关的最小宽度; -- 设置空白 : android:switchPadding, 设置开关 与 文本 之间的空白; -- 文本样式
border-color： 用来指定边框的颜色，同样可以分别指定四个边的边框，规则和border -width一样，border-color也可以省略不写，如果省略了则自动使用color的颜色值...) 内容区和边框之间的距离是内边距 一共有四个方向的内边距: padding-top padding-right padding - bottom padding- left ...兄弟元素： 兄弟元素间的相邻垂直外边距会取两者之间的较大值(两者都是正值) 特殊情况: 如果相邻的外边距一正一负，则取两者的和。 如果相邻的外边距都是负值，则取两者中绝对值较大的。...兄弟元素之间的外边距的重叠，对于开发是有利的，所以我们不需要进行处理。...如果将三个值都设置为auto,则外边距都是0，宽度最大。 如果将两个外边距设置为auto,宽度固定值，则会将外边距设置为相同的值。
注意padding或margin值=左边图片的宽度+二者之间的间距 如果想要图片和文案是垂直居中的不太好实现 不过张大神说，这种左右结构的布局使用浮动，是对浮动的一种滥用（大概是这么个意思，也有可能我对其有曲解...三、margin负边距 - 圣杯布局 这种写法很特别，我甚至还没研究透他的原理。是从慕课网张大神的课程中学到的。 他的特殊之处在于，这种适用于图片在右边的情况，如下图： ?...;以实现垂直居中 图片固宽元素不需要特殊设置，宽高即可 流体文案设置flex:1;自动分配剩余空间。...设置一个宽度即可 二者间距使用任何一个td设置左或右边距即可。...) 两列都设置display:table-cell;[w3c:此元素会作为一个表格单元格显示（类似td 和 th）] 别忘了两列之间的间隙，我比较喜欢用文字的左padding隔开。
概述 通过边框的样式设置，给元素增加更丰富的外观 边框的设置包含以下内容: 边框的类型 边框的尺寸 边框的前景背景 圆角边框 列表 元素 描述 border border 属性是规定各种单独的边界属性的简写属性...border-image-outset border-image-outset属性规定边框图像可超出边框盒的大小。...单个值，设置所有的边框；两个值，分别设置水平和垂直的边距。...若 border-image-width 大于已指定的 border-width 则将向内部扩展。 border-radius border-radius 该属性用作规定边框圆角。...box-shadow box-shadow 该属性是用逗号分割列表来描述一个或多个阴影效果，几乎可用到任何元素。若同时在元素上设置了border-radius，阴影依然有圆角的效果。
1.0 ; 设置调节透明度的组件 : child 字段设置要调整透明度的组件 ; // 修改透明度组件 Opacity( opacity: 透明度值, child: 要调整透明度的组件...---- Padding 组件 : 主要作用是设置组件的内边距 ; class Padding extends SingleChildRenderObjectWidget { const Padding...= null), super(key: key, child: child); } Padding 组件用法 : 设置四个内边距 : padding 字段设置内边距 , EdgeInsetsGeometry...类型 ; 设置内边距作用的组件 : child 字段设置内边距作用的组件 , Widget 类型 ; Padding( // 设置内边距 padding: 内边距 ( EdgeInsetsGeometry...类型 ), // 内边距作用组件 child: 内边距作用组件 ( Widget 类型 ), ), 代码示例 : Padding( // 设置内边距 5 padding: EdgeInsets.all
❞ 创建轮播图 轮播图是我们常见的一种表现形式，通常，图片之间要做到无缝衔接循环需要花一些功夫，而小程序提供的组件就已经可以实现。可以说省去了开发者不少的时间。...20rpx，margin-right右边距也是20rpx，border-radius设置了圆角矩形的半径为30rpx，最后，为了让view所包含的swiper也能有圆角效果，我们还需要将overflow...wx:key 的值以两种形式提供 ❝1 字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。...我们注意到，除了使用margin-top，这个用来设定定边距的属性之外，我们还设置了height的值，也就是轮播组件的高度。这里有一个小公式。用来根据屏幕宽度动态计算轮播组件的高度。...这是组件生命周期的一个函数，当在组件实例进入页面节点树时就会执行，在我们的实例中，我们正是利用这个函数给我们的组件的顶边距赋值的。让我们看看最后的效果图吧 ?
组件的 setState 设置状态的方法 , 修改当前选中索引 // 之后 BottomNavigationBar 组件会自动更新当前选中的选项卡 setState...null; } } 运行效果展示 : 二、TextField 组件 ---- TextField 组件构造函数的可选参数 : 下面代码中的可选参数就是 TextField 组件可以设置的参数选项...decoration: InputDecoration( // 设置内容边距, 左右边距为 10, 上下边距为 0...组件的 setState 设置状态的方法 , 修改当前选中索引 // 之后 BottomNavigationBar 组件会自动更新当前选中的选项卡 setState...( // 设置内容边距, 左右边距为 10, 上下边距为 0 contentPadding: EdgeInsets.fromLTRB
这个Demo，或许看起来平平无奇，但它深深凹印着VUE的基础篇章： props emit 绘制了一条神秘的密码，实现了父子组件间的暗号交流 开启了slot插槽的大门，使得组件灵活性，复用性更高 ⭐⭐⭐⭐...⭐ 全局自定义指令的封装 使用$nextTick演示了如何优雅的应对异步DOM更新，感觉就像是有了掌控时间的超能力 巧用v-model，简洁地优化了父子组件之间的通信 ⭐⭐⭐⭐⭐ 触发事件的事件源event...、样式文件等 |- logo.png 项目的Logo图片 -components 存放所有的Vue组件 |- MyTable.vue 一个自定义的Vue表格组件 |- MyTag.vue 一个自定义的...的配置文件，用于代码质量检查和静态代码分析 -.gitignore Git版本控制系统忽略的文件和目录列表 -babel.config.js Babel的配置文件，用于转译ES6+代码到ES5 -package.json...包含了项目的元信息和依赖包列表 -README.md 项目说明文档 -vue.config.js Vue CLI项目的配置文件，可以进行各种自定义配置 -yarn.lock Yarn依赖包的锁定文件，
(image-b9d374-1600438374210)] 内边距（padding） 内容区和边框之间的距离是内边距 一共有四个方向的内边距： padding-top padding-right padding-bottom... 2.6 盒子模型 外边距的折叠 垂直外边距的重叠（折叠）：相邻的垂直方向外边距会发生重叠现象 兄弟元素 兄弟元素间的相邻垂直外边距会取两者之间的较大值...（两者都是正值） 特殊情况： 如果相邻的外边距一正一负，则取两者的和 如果相邻的外边距都是负值，则取两者中绝对值较大的 兄弟元素之间的外边距的重叠，对于开发是有利的，所以我们不需要进行处理...（折叠） - 相邻的垂直方向外边距会发生重叠现象 - 兄弟元素 - 兄弟元素间的相邻垂直外边距会取两者之间的较大值...如果相邻的外边距都是负值，则取两者中绝对值较大的 - 兄弟元素之间的外边距的重叠，对于开发是有利的，所以我们不需要进行处理
3 border-image 设置或检索对象的边框样式使用图像来填充。 3 border-image-outset 规定边框图像超过边框的量。...设置列表项标记的放置位置 1 list-style-type 设置列表项标记的类型 1 17....定位（Positioning） 属性 属性 描述 CSS bottom 设置定位元素下外边距边界与其包含块下边界之间的偏移 2 clear 规定元素的哪一侧不允许其他浮动元素 1 clip...剪裁绝对定位元素 2 cursor 规定要显示的光标的类型（形状） 2 display 规定元素应该生成的框的类型 1 float 规定框是否应该浮动 1 left 设置定位元素左外边距边界与其包含块左边界之间的偏移...2 overflow 规定当内容溢出元素框时发生的事情 2 position 规定元素的定位类型 2 right 设置定位元素右外边距边界与其包含块右边界之间的偏移 2 top 设置定位元素的上外边距边界与其包含块上边界之间的偏移
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
