- 博客(27)
- 收藏
- 关注
RSS订阅原创 2021-07-19 react的基础知识
文章目录一、react概述二、react的基本使用1.react的安装2.react的使用三、react脚手架1.初始化项目2.启动项目3.在脚手架中使用react四、JSX1.createElement的问题2.JSX简介3.使用步骤4.注意5.嵌入js表达式6.条件渲染7.列表渲染8.样式处理一、react概述react是什么？react主要是用来编写HTML页面，或构建web应用从MVC角度来看，react仅仅是视图层（V），并非提供了完整的M和C的功能特点： 1. 声明式 r
2021-07-19 16:22:26
213
原创 2020-11-20 vue-router路由机制
目录基本路由动态路由编程式路由嵌套路由cnd在线导入<script src=“https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js”><script src=“https://cdn.bootcdn.net/ajax/libs/vue-router/3.4.3/vue-router.min.js”>基本路由在vue中进行路由的注册，在模板中通过router-view来接收路由组件<body> &
2020-11-20 16:27:56
214
原创 2020-11-19 Vue——插槽、动态组件、混入、自定义指令
插槽普通插槽插槽允许我们在调用子组件的时候为子组件传递模板<div id="app"> <test> <template>你好</template> </test> </div> <script> let test = { template:` <div>
2020-11-19 17:05:22
174
原创 2020-11-18 Vue的计算属性、监听及组件
计算属性computed:{ change(){ }}计算属性的作用：用来对data中的变量做相关的操作如果data中的变量不改变，那么计算属性就只会执行一次计算属性有缓存，如果data中的值改变，则重新执行，重新缓存计算属性的方法名就是属性名方法的优先级比计算属性高方法调用一次就执行一次<div id="app"> <div>原值{{msg}}</div> <div>表达式计算{{msg.spl
2020-11-18 19:14:22
143
原创 2020-11-17 Vue的语法、事件及表单
1、数据渲染基本数据渲染{{}}条件数据渲染循环数据渲染<div id="app"> <!-- 使用双大括号进行渲染 基本数据渲染 --> {{msg}} <!-- 条件数据渲染 --> <div v-if='isShow'>我是对的</div> <div v-else>我是错的</div> <!-- 循环渲染
2020-11-17 17:22:36
378
原创 2020-11-16 Vue的生命周期
Vue的生命周期beforeCreate 初始化之前，data和msg中的数据不可被使用created 数据初始化完成，data和msg中的数据已经初始化完成，可以进行访问使用，但是没有进行挂载brforeMount 挂载之前，判断当前的实例所绑定的模板是谁mounted 挂载完成beforeUpdate 更新之前updated 更新完成beforeDestroy 销毁之前destroyed 销毁完成<!DOCTYPE html><html lang="en">
2020-11-16 19:54:17
91
原创 2020-11-12 ES6中的Class（类）
文章目录方法继承super关键字方法在类中可以直接定义方法，实际上类的所有方法都定义在类的prototype属性上面。在类的 实例上面调用方法，其实就是调用原型上的方法class Point { constructor() { // ... } toString() { // ... } toValue() { // ... } }由于类的方法都定义在prototype对象上面，所以类的新方法可以添加在prototype对象上 面。Object.assign方法可以很方便地一次向
2020-11-12 19:01:36
81
原创 2020-11-12 Set和Map数据结构以及Promise
目录SetMapIteratorPromise实例方法基本用法Promise.all()Promise.race()GeneratorSet它类似于数组，但是成员的值都是唯一的，没有重复的值。Set本身是一个构造函数，用来生成 Set 数据结构。Set函数可以接受一个数组（或者具有 iterable 接口的其他数据结构）作为参数，用来初始化。// Set() 构造函数// set 是Set的一个实例对象// 可快速对数组进行去重let arr = [2,3,4,5,3,5,6,8]let s
2020-11-12 16:34:19
247
原创 2020-11-10 ES6对象、函数、数组的扩展
ES6对象、函数、数组的扩展文章目录ES6对象、函数、数组的扩展一、对象的扩展1.Object.is(value1,value2)2.Object.assign(target,o1,o2…)3.Object.keys()、Object.values()、Object.entries()二、函数的扩展1.rest参数2.箭头函数三、数组的扩展1.扩展运算符2.Array.from()3.Array.of()4.find()5.findIndex()6.fill()7.keys()、entries()、val
2020-11-10 17:04:21
109
原创 2020-11-09 ES6基础知识
let、const文章目录let、const一、let二、const三、解构1、数组的解构赋值2、对象的解构赋值3、字符串的解构赋值4、数值和布尔值解构赋值5、函数参数的解构赋值一、let声明变量变量只在当前的代码块有效{ let a = 10 var b = 20 console.log(a,b)}运行结果如下：当不在代码块内打印时{ let a = 10 var b = 20 // console.log(a,b)}con
2020-11-09 16:55:10
134
原创 2020-10-25 JavaScript—BOM—setInterval实现倒计时
setInterval实现倒计时文章目录setInterval实现倒计时效果一、html二、JavaScript部分获取当前时间倒计时修改倒计时效果在HTML中确定倒计时的初始值，中心部分进行倒计时，下方可获得当前时间，点击相应的倒计时框，弹出会话框，可获得当前倒计时的值，可进行修改，返回修改后的值，接着倒计时，效果如下图提示：以下是本篇文章正文内容，下面案例可供参考一、html分为三部分，标题、倒计时、底部当前时间CSS本文章省略，可按照个人喜好设计样式<!--header-
2020-10-25 11:58:56
400
原创 2020-10-21 JavaScript的学习（四）
函数文章目录函数1.函数介绍2.自定义函数3.函数的内部属性4.函数的调用5.函数的属性和方法6.函数的应用1.函数介绍函数允许我们封装一系列代码来完成特定任务。当想要完成某一任务时，只需要调用相应的代码即可。方法（method）一般为定义在对象中的函数。浏览器为我们提供了很多内置方法，我们不需要编写代码，只需要调用方法即可完成特定功能。var myArray = ['I', 'love', 'chocolate', 'frogs']; var madeAString = myArray.jo
2020-10-21 14:42:05
86
原创 2020-10-19 JavaScript的学习（三）
对象Object文章目录对象Object1.创建Object实例2.访问对象属性3.删除属性4.检测属性5.Object构造函数原型对象中的部分属性及方法6.对象序列化ECMA-262对象的定义：无序属性的集合，其属性可以包含基本值，对象，或者函数。可以将对象想象成散列表:键值对，其中值可以是数据或者函数。ECMAScript中的对象其实就是一组数据(属性)和功能(方法)的集合。1.创建Object实例使用构造函数创建，new Object()var person = new Object()
2020-10-19 14:55:30
145
2
原创 2020-10-16 JavaScript的学习（二）
操作符及类型转换文章目录操作符及类型转换一、操作符1.算术运算符2.一元运算符3.比较运算符4.逻辑运算符5.三目运算符二、类型转换1.其他数据类型转换为String2.其他数据类型转换为Boolean3.其他数据类型转换为Number一、操作符1.算术运算符OperatorNameExample+加3+2-减16-8*乘2*5/除16/2%取余16%32.一元运算符递增递减操作符 ++表示每次递增1，–表示每次递减1
2020-10-16 14:49:36
73
原创 2020-10-15 JavaScript的学习（一）
JavaScript快速入门文章目录JavaScript快速入门一、JavaScript简介1.定义2.特点3.使用JavaScript4.注释二、变量一、JavaScript简介1.定义JavaScript是一个编程语言，允许用户在浏览器页面上完成复杂的事情。浏览器页 面并不总是静态的，往往显示一些需要动态更新的内容，交互式地图，动画，以及视 频等。一个完整的JavaScript包括核心(ECMAScript)，应用程序编程接口即API (比如 DOM(Document Object Mode
2020-10-15 19:01:58
121
原创 2020-09-30 项目实践（五）
太平洋保险官网项目实践（五）文章目录太平洋保险官网项目实践（五）实现目标一、侧边栏1.html2.css二、底部1.html2.css实现目标今日实现目标：侧边栏及底部具体效果如下图：以下是本篇文章正文内容，下面案例可供参考一、侧边栏1.html侧边栏位于页面右侧，当滑动页面时，始终在页面右下角，滑动到底部，将固定在底部栏上方右侧。主要是用sticky粘滞布局，给元素固定位置，当元素到达设置的位置时，不随着页面的滚动发生变化，始终停留在设置的位置。 <div class
2020-10-12 19:12:03
700
原创 2020-09-29 项目实践（四）
太平洋保险官网项目实践（四）文章目录太平洋保险官网项目实践（四）实现目标一、第一部分——寻找贴心服务1.html2.css二、第二部分——咨询保险专家1.html2.css第三部分——为什么选择太平洋保险？1.html2.css实现目标今日实现目标：1.寻找贴心服务2.咨询保险专家3.为什么选择太平洋总共三部分，效果如下图所示：第一部分第二部分第三部分以下是本篇文章正文内容，下面案例可供参考一、第一部分——寻找贴心服务1.html此部分主要分为标题与内容，内容分为左中右三部分
2020-10-11 09:53:05
2578
1
原创 2020-09-28 项目实践（三）
太平洋保险官网项目实践（三）文章目录太平洋保险官网项目实践（三）实现目标一、第一部分1.大体布局（1）html（2）css2.上部分细节布局（1）html（2）css3.下部分细节布局（1）html（2）css二、第二部分1.大体布局（1）html（2）css2.内容细节布局（1）html（2）css实现目标今日实现目标：轮播图后第一二部分。具体效果如下图所示第一部分第二部分以下是本篇文章正文内容，下面案例可供参考一、第一部分1.大体布局（1）html第一部分主要分为上下两部分
2020-10-08 19:28:42
311
原创 2020-09-27 项目实践（二）
太平洋保险官网项目实践（二）文章目录太平洋保险官网项目实践（二）实现目标一、大体布局1.html2.css二、登录注册框细节布局1.html2.css三、轮播图细节实现目标今日实现目标：轮播图以及轮播图上注册登录框。具体效果如下图所示：以下是本篇文章正文内容，下面案例可供参考一、大体布局1.html轮播图部分所在div主要分为两个部分：轮播图以及轮播图上登录注册框。代码如下（示例）：<div class="lunbotu"> <!--注册登录框-->
2020-10-07 19:09:25
381
原创 2020-09-26 项目实践（一）
太平洋保险官网项目实践（一）文章目录太平洋保险官网项目实践（一）实现目标项目中的图标一、大体布局1.html2.css二、logo细节布局1.html2.css三、导航细节布局1.html2.css四、右侧搜索框及图标细节布局1.html2.css实现目标今日实现目标：首页导航栏以及导航栏的副标题，鼠标移动到标题上，副标题会显示，否则不会显示。具体效果如下图所示项目中的图标项目中的图标引用的是iconfont-阿里巴巴矢量图标库中的在线图标链接: iconfont-阿里巴巴矢量图标库.
2020-10-06 19:45:27
420
2
原创 2020-09-25 CSS3的学习4
CSS3第三天文章目录CSS3第三天布局一、默认文档流二、浮动布局（Floats）三、定位布局（ Positioning）1.静态定位（ Static positioning）2.相对定位 （ Relative positioning ）3.固定定位（Fixed positioning）4.绝对定位（Absolute positioning）5.粘性定位（ Sticky positioning ）布局1.掌握默认文档流2.掌握浮动布局3.掌握定位布局提示：以下是本篇文章正文内容，下面案例可
2020-10-05 18:52:12
68
原创 2020-09-24 CSS3的学习3
CSS3第三天文章目录CSS3第三天盒子一、盒子属性（ Box properties）二、盒子模型1.默认盒子模型——W3C盒子2.边框盒子模型——IE盒子三、盒子背景样式四、盒子边框样式五、表格样式盒子1.掌握盒子的特性2.掌握两种不同的盒子模型以下是本篇文章正文内容，下面案例可供参考一、盒子属性（ Box properties）示例：名称属性width&height用于设置内容区的宽高，该片 区域用于显示内容。盒子高度 默认为内容的高度。padd
2020-10-05 18:14:04
91
原创 2020-09-23 CSS3的学习2
CSS3第二天CSS3文本样式1.掌握CSS的常见字体样式规则2.掌握CSS的常见字体布局规则目录CSS3第二天CSS3文本样式一、字体样式1.color2.font-family3.font-style4.font-weight5.text-align6.text-transform7.text-decoration二、字体阴影text-shadow三、列表样式四、其它样式以下是本篇文章正文内容，下面案例可供参考一、字体样式1.colorcolor 为字体指定颜色代码如下（示例）： /
2020-09-23 19:43:53
599
原创 2020-09-22 CSS的学习1
CSS第一天前言CSS (Cascading Style Sheets) 层叠样式表，是一个用于修饰文档（可以是标记语言 HTML，也可以是XML）的语言，可以将文档以更优雅的形式呈现给用户。以下是本篇文章正文内容，下面案例可供参考一、CSS声明CSS语言的核心功能就是为特定的属性设定特定的值，CSS引擎通过计算出 声明的每个属性来显示元素。CSS的属性和值都是大小写敏感的。属性与值通过 “:”分隔开。并不是所有的值都适用于同一个属性，不同的属性有一系列不同的值。代码如下（示例）：将多个C
2020-09-22 19:12:54
174
原创 2020-09-22 HTML的学习3
HTML第三天文章目录HTML第三天一、HTML表单元素1.progress2.output3.datalist二、type属性扩展一、HTML表单元素1.progressprogress表示任务的完成情况，常用于进度条：max 定义进度元素所要求的任务的工作量，默认值为1value 定义已经完成的工作量，如果max值为1，该值必须是介于0~1之间的小 数。代码如下（示例）：<progress value="70" max="100">70%</progress>
2020-09-22 18:44:41
123
原创 2020-9-21 HTML的学习2
HTML第二天文章目录HTML第二天一、HTML标签——表格二、HTML5新增标签1.header2.nav3.artical4.section5.aside6.footer7.address8.figure& figcaption9.details一、HTML标签——表格caption <caption>表示表格的标题信息 colgroup 列分组 thead <thead>表示表头，包含了<tr>以及<td>tbody
2020-09-21 19:48:10
186
原创 2020-9-20 HTML的学习
HTML1文章目录HTML1学习目标一、什么是HTML？二、HTML文档（HTML document）三、HTML标签1、段落2、标题3、其他文本类型标签4、列表5、超链接6、图片总结学习目标1、什么是HTML2、HTML文档4、掌握常见的HTML标签提示：以下是本篇文章正文内容，下面案例可供参考一、什么是HTML？HTML是HyperText Markup Language(超文本标记语言)的简写，不是一种编程语言 ，而是一种标记语言，用于告诉浏览器如何构造页面。由一系列HTML元素组合
2020-09-21 19:13:59
439
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人