随笔分类 - 软件开发
摘要:小结: 1. 商品列表的实现封装了 2 个组件:标签组件 和 表格组件 2. 封装用到的核心技术点: (1)props父传子 $emit子传父 v-model (2)$nextTick 自定义指令 (3)插槽:具名插槽,作用域插槽 具体代码: 0. main.js import Vue from '
阅读全文
摘要:页面开发思路: 分析页面,按模块拆分组件,搭架子(局部或全局注册) (给组件名添加如"Xtx-"的前缀,方便辨认的同时也能避免名称重复) 根据设计图,编写组件html结构css样式(已准备好) 拆分封装通用小组件(局部或全局注册) 将来 → 通过js动态渲染,实现功能 操作技巧 1. 一次选择多行:
阅读全文
摘要:需求 & 思路分析 1.基本渲染 - 立刻发送请求获取数据 created - 拿到数据,存到data的响应式数据中 - 结合数据,进行渲染 v-for - 消费统计 —> 计算属性 2.添加功能 - 收集表单数据 v-model,使用指令修饰符处理数据 - 给添加按钮注册点击事件,对输入的内容做非
阅读全文
摘要:一、成绩案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport"
阅读全文
摘要:案例1-tab栏的active效果-静态结构 点击查看代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <me
阅读全文
摘要:功能总结: ① 列表渲染:v-for key 的设置 {{ }} 插值表达式 ② 删除功能:v-on 调用传参 filter 过滤 覆盖修改原数组 ③ 添加功能:v-model 绑定 unshift 修改原数组添加 ④ 底部统计 和 清空 (1)数组.length累计长度 (2)覆盖数组清空列表 (
阅读全文
摘要:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document<
阅读全文
摘要:一、TypeScript 课程分段目录 1. 必备类型 2. 类型推断 3. 类型注解 4. 类型断言 5. 基础类型和联合类型 6. 数组、元组、枚举等 7. 函数 8. 接口 9. 类型别名 10. 泛型
阅读全文
摘要:tips 小技巧:去除字符串左右的空格 trim() 方法 一、随机点名 点击查看素材的代码 <!-- CSS --> <style> * { margin: 0; padding: 0; } h2 { text-align: center; } .box { width: 600px; margi
阅读全文
摘要:一、用户倒计时效果 <body> <textarea name="" id="" cols="30" rows="10"> 用户注册协议 欢迎注册成为京东用户!在您注册过程中,您需要完成我们的注册流程并通过点击同意的形式在线签署以下协议,请您务必仔细阅读、充分理解协议中的条款内容后再点击同意(尤其是
阅读全文
摘要:Day6课程-1 课程内容 一、课程介绍 1.学习内容 定位、CSS高级技巧(及两个案例)、修饰属性 2.CSS精灵 案例练习 案例1: 案例2:轮播图 二、定位 (相对定位,绝对定位和固定) ○ 作用:灵活地改变盒子在网页中的位置(可以让两个标签压在一起显示,例如案例2里轮播图左右的箭头/下方的圆
阅读全文
摘要:Day5课程 “学成在线”网页制作-2 代码 HTML 部分 (跟着 黑马的课程 ,自己试着写的代码) <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="w
阅读全文
摘要:Day5课程 “学成在线”网页制作-1 准备工作、思路 一、准备工作 (一)项目目录 网站根目录是指存放网站的第一层文件夹,内部包含当前网站的所有素材,包含 HTML、CSS、图片、JavaScript等等。 ○ study ● images 文件夹:存放固定使用的图片素材,例如:logo、样式修饰
阅读全文
摘要:Day4课程 综合案例练习 emmet写有规律的数字:$,例如:ul>li{$}*4
阅读全文
摘要:Day4课程 2-Flex布局 ○ Flex布局也叫弹性布局,是浏览器提倡的布局模型,非常适合结构化布局,提供了强大的空间分布和对齐能力。 ○ Flex模型不会产生浮动布局中脱标现象,布局网页更简单、更灵活。 左右排列、上下排列都是结构化布局。 组成 ○ 设置方式:给父元素设置 display: f
阅读全文
摘要:Day4课程 1-课程介绍 + 标准流、浮动 标准流、浮动、flex布局 标准流 也叫文档流。指的是标签在页面中 默认的 排布规律,例如:块元素独占一行,行内元素可以一行显示多个。 ☆ 今日课程目的:让块级显示模式的盒子在一行内显示(两种选择:浮动(了解)、flex布局) 浮动(了解) 总结: ○
阅读全文
摘要:Day3 综合案例练习 CSS 书写顺序: 1.盒子模型属性 2.文字样式 3.圆角、阴影等修饰属性 (先整体再局部) 用像素大厨分析网页。 准备工作: 清除默认样式,并启动盒子大小的内减模式 * { /* 最基础:清除默认页面样式部分 + 启动内减模式 */ margin: 0; padding:
阅读全文
摘要:Day3 3-CSS其余操作 1.清除默认样式 两种方式,推荐方法一 /* 方法一:京东的通配符选择器*/ * { margin: 0; padding: 0; } /* 方法二:淘宝的并集选择器,其中包括一些已经淘汰的标签选择器 */ (一堆的并集选择器) { margin: 0; padding
阅读全文
摘要:Day3 2-盒子模型(重点) 组成 ○ 作用:布局网页,摆放盒子和内容 ○ 重要组成部分: ● 内容区域 - width & height ● 内边距 - padding/padding-方位名词 多值写法:(从最上开始,顺时针赋值,如果当前方向没有数值,则取值与对侧相同) ○ 一个值:上下左右
阅读全文
摘要:Day2课程 5-显示模式 显示模式:标签(元素)的显示方式 验证 分三步走: 1. 写两个相同的标签,在浏览器中查看是否在一行内显示(是否 独占一行) 2. 看默认宽高是多少(宽高尺寸 是否 由内容展开) 3. 加宽高,看是否生效 1.块级元素 ○ 独占一行 ○ 宽度默认是父级的100% ○ 添加
阅读全文

浙公网安备 33010602011771号