自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(42)
  • 收藏
  • 关注

原创 Vue UI组件库

是一个插件,照着官方文档使用即可。还可以按需引入,整个体积太大。

2022-10-05 23:25:15 143

原创 vue-router——路由

展示的时候就是被激活,离开这个组件展示其他组件,这个组件就失活了。与vuex相同,vue2只能安装vue-router3版本。如果不写Include,那么展示的路由组件都会被缓存。前两个写在路由配置文件里的,这个写在组件里。

2022-10-05 21:01:36 205

原创 Vuex

多组件共享数据——全局事件总线: 多组件共享数据——vuex实现: 步骤: 1.由于学习的是vue2,所以vuex只能安装3,默认安装的是4,对应的是vue3

2022-10-05 00:10:35 181

原创 Vue中的ajax

引入 import axios from 'axios'

2022-10-04 14:51:42 289

原创 使用Vue脚手架

1. 所以把x放在vue的原型对象上2.没有$on,$off等 x就是$bus传: 收: 安装库发布消息: 订阅消息:如果是普通函数,this是undefine,所以要写成箭头函数,也可以把函数单独写在methods里

2022-10-02 15:53:34 129

原创 Vue组件化编程、使用脚手架

1.理解: 用来实现局部(特定)功能效果的代码集合(html/css/js/image....)1.理解: 向外提供特定功能的js程序, -般就是-一个js文件。组件化:分成好几个组件,每个组件有html,js,css....3.作用: 复用js,简化js的编写,提高js运行效率。3.作用: 复用编码,简化项目编码,提高运行效率。2.为什么: js 文件很多很复杂。2.为什么: 一个界面的功能很复杂。模块化:分成好几个js文件。

2022-09-29 22:31:07 127

原创 Vue基础4

生命周期。

2022-09-27 22:29:26 248

原创 Vue基础3

vue监视属性的原理收集表单内置指令。

2022-09-25 22:41:52 276

原创 Vue基础2

1.当监视属性变化时,回调函数自动调用,进行相关操作。1)new Vue时传入watch配置。2.监视属性必须存在,才能进行监视。2)通过vm.$watch监视。

2022-09-14 08:04:41 109

原创 Vue基础1

5.备注:1)计算属性最终会出现在vm上,直接读取使用即可 2)如果计算属性要被修改,那必须写set函数去响应修改,且set中要引起计算时依赖的数据发生改变。< input type =" text ” placeholder ="按下回车提示输入" @keyup . ctrl . y =" showInfo "双向绑定:单向绑定:

2022-09-11 21:08:15 146

原创 本地存储、正则表达式

本地存储 随着互联网的快速发展,基于网页的应用越来越普遍,同时也变的越来越复杂,为了满足各种各样的需求,会经常性在本地存储大量的数据,HTML5规范提出了相关解决方案。1、数据存储在用户浏览器中2、设置、读取方便、甚至页面刷新不丢失数据3、容量较大, sessionStorage 和 localStorage 约5M左右localStorage1、生命周期永久生效,除非手动删除否则关闭页面也会存在2、可以多窗口(页面)共享(同一浏览器可以共享)3、以键值对的形...

2022-08-07 05:19:51 249

原创 Window对象

BOM(浏览器对象模型)BOM是浏览器对象模型 window是浏览器内置中的全局对象,我们所学习的所有 Web APIs 的知识内容都是基于 window 对象实现的 window 对象下包含了 navigator 、 location 、 document 、 history 、 screen 5个属性,即所谓的ВОМ(浏览器对象模型) document 是实现 DOM 的基础,它其实是依附于 window 的属性。注:依附于 window 对象...

2022-08-06 22:35:45 416

原创 滚动、加载事件,元素大小和位置

滚动、加载事件滚动事件当页面进行滚动时触发的事件很多网页需要检测用户把页面滚动到某个区域后做一些处理,比如固定导航栏,比如返回顶部监听某个元素的内部滚动直接给某个元素加即可加载事件加载外部资源(如图片、外联 CSS 和 JavaScript 等)加载完毕时触发的事件有些时候需要等页面资源全部处理完了做一些事情当初始的 HTML 文档被完全加载和解析完成之后, DOMContentLoaded 事件被触发,而无需等待样式表、图像等完全加载元素大小和位置scr.

2022-08-05 10:36:36 230

原创 事件对象、事件流、事件委托

事件对象获取事件对象事件对象:对象里有触发时的相关信息,例如鼠标点击事件,对象里存储了鼠标点击在哪个位置事件流事件流:事件完整执行过程中的流动路径假设页面里有个 div ,当触发事件时,会经历两个阶段,分别是捕获阶段、冒泡阶段简单来说:捕获阶段是从父到子,冒泡阶段是从子到父事件冒泡概念:当一个元素的事件被触发时,同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒泡简单理解:当一个元素触发事件后,会依次向上调用所有父级元素的同名事件事..

2022-08-04 02:14:48 159

原创 节点操作、时间对象、重绘和回流

节点操作DOM节点DOM树里每一个内容都称之为节点节点类型元素节点:所有的标签比如 body 、 div ,html 是根节点属性节点:所有的属性比如 href文本节点:所有的文本其他查找节点1父节点查找子元素.parentNode2子节点查找childNodes :获得所有子节点、包括文本节点(空格、换行)、注释节点等children (重点):获得所有元素节点返回的还是一个伪数组父元素 .children3兄弟关系查找下一个兄弟节点next.

2022-07-29 22:15:18 228

原创 事件、高阶函数、环境对象

事件事件是在编程时系统内发生的动作或事情,比如用户点击一个按钮事件监听程序检测是否有事件发生,一旦有事件触发,就立即调用一个函数做出响应语法:元素.addEventListener('事件',要执行的函数)事件监听三要素:事件源:哪个 dom 元素被事件触发了,要获取 dom 元素事件:用什么方式触发,比如鼠标单击 click 、鼠标经过 mouseover 等事件调用的函数:要做什么事以前是这样写的:事件源. on 事件= function (){}事件类型

2022-07-28 10:58:53 96

原创 设置/修改DOM元素内容和属性

设置/修改DOM元素内容document.write()方法只能追加到body中元素innerText属性将文本内容添加/更新到任意标签位置文本中包含的标签不会被解析元素innerHTML属性将文本内容添加/更新到任意标签位置文本中包含的标签会被解析设置/修改元素属性设置修改元素常用属性最常见的属性比如src,href,title等语法:对象.属性=值设置/修改元素样式属性1通过style属性操作css语法:对象.style.样式属性=值

2022-07-27 20:36:47 1685

原创 获取DOM元素

WEB API基本认识使用js去操作html和浏览器分类:DOM(文档对象模型)BOM(浏览器对象模型)DOM是浏览器提供一套专门用来操作网页内容的功能DOM作用:开发网页特效,实现用户交互DOM树将html文档以树状结构直观表现出来,我们称之为文档树或者DOM树,直观的体现了标签和标签之间的关系DOM对象DOM对象:浏览器根据html标签生成的js对象所有的标签属性都可以在对象上面找到修改这个对象的属性会自动映射到标签身上DOM核心思想:把网页内容当作对象来处理

2022-07-26 22:32:18 279

原创 函数和对象

函数函数的声明function 函数名(){}函数的调用函数名()有返回值的函数函数内部只能出现一次return,return会立即结束当前函数,可以没有return,这种情况返回值默认为undefinedreturn返回多个值匿名函数声明let fn=function (){//函数体}调用fn()立即执行函数对象静态特征:例如年龄,身高,性别动态特征:唱,跳,rap对象声明:let 对象名={}let .

2022-07-24 00:19:49 71

原创 JavaScript基础3

==只要值一样就是true===值和数据类型一样才是true比较运算符字符串比较是比较的ASCLL码,从左到右依次比较NAN不等于任何值,包括它本身尽量不要比较小数,有精度问题不同数据类型的比较会发生隐式转换,最终会隐式转换成number再比较,所以一般采用===或者!==false:false 数字0 " null undefined逻辑运算符&&和||存在短路问题,左边的结果就能得到整个表达式的结果,没必要判断右边。运算结果一般是最后执行的表达...

2022-07-23 09:21:22 227

原创 JavaScript基础2

变量不是数据本身,仅仅只是一个存储数值的容器声明变量,一个变量只能声明一次,可以用不同的值来更新他,可以一次声明多个变量语法:let 变量名变量赋值 :变量名=值变量初始化: let age=18console.log(num1,num2) 输出num1 num2变量命名规则不能用关键字只能用下划线、字母、数字、$,数字不能作为开头字母严格区分大小写let和var的区别var有很多不合理的地方:可以先使用再声明可以重复声明是全局变量、有变量提升等各种不合理的地方数组声明语法:let arr = [数据

2022-07-05 22:57:54 127

原创 JavaScript基础1

js的书写位置1.内部用script标签包住,写在上面,与程序加载顺序有关alert('xxx') //警示框2.外部标签引入.js文件,标签之间不能写代码3.内联js的注释单行//多行/* */js的结束符;(英文的分号),可写可不写,因为回车也会被识别为结束符js的输入输出语法输出document.write('要输出的内容')向body内输出内容,如果输出的内容写的是标签,也会被解析成网页元素alert('要输出的内容')页面弹出警告对话框console.log('要......

2022-07-04 19:38:03 113

原创 CSS媒体查询

媒体查询能使页面在不同的终端设备下达到不同的效果,会根据设备的大小自动识别加载不同的样式,bootstrap里面也有这个功能设置meta标签媒体查询语法

2022-07-03 04:44:31 80

原创 CSS动画

动画是使元素从一种样式逐渐变为另一种样式的效果,可以改变任意多的样式任意多的次数,用百分比或者关键词from to来规定变化的时间@keyframes创建动画name为动画名称,自己可以随意更改percent为百分比,可以添加多个animation执行动画animation:name 等等...

2022-07-03 04:35:20 60

原创 弹性盒模型

老师的第七章的第二个PPT也有很详细提供一种有效的方式来对一个容器中的子元素进行排列、对齐和分配通过设置display属性值为flex将其定义为弹性容器容器设置display:flex;成为弹性盒,下面的属性也都是设置在这个弹性盒上的,而不是它的子盒子flex-direction:row||row-reverse||column等等设置弹性盒里面的子元素横向、从后往前的横向、纵向等待justify-content:flex-start||flex-end||center设置在垂直方向上靠上、中间、靠下摆放设

2022-07-03 03:45:16 87

原创 CSS高级技巧

精灵图针对背景图片使用,就是把很多小的图片整合到一张大图片中,减少浏览器请求次数,提高速度主要借助于背景位置来实现——background-position,一般情况下都是负值,因为坐标原点在盒子的左上角,而x轴右边是正,y轴下面是正,所以要把图片放到盒子里面,通常都是往上、左移动。字体图标本质是文字,样式比较简单,可以改变颜色大小等字体图标是一些网页比较常见的小图标,我们直接从网上下载即可http://icomoom.iohttp://www.iconfont.cn/然后引入到页面中(具体见pink ht

2022-07-03 01:43:48 105

原创 元素的显示与隐藏

本质:让一个元素在页面中隐藏或者显示出来display属性display:none;隐藏对象display:block;除了能转换为块级元素外,同时还有显示元素的意思display隐藏元素后,不再占有原来的位置

2022-07-02 00:47:00 64

原创 CSS定位

定位=定位模式+边偏移定位模式:static静态定位relative相对定位absolute绝对定位fixed固定定位边偏移:有top,bottom,left,right 例如:top : 80px(距离顶部80px)相对定位元素移动位置的时候,是相对于它原来的位置来说的语法:选择器 {position:relative;}没有脱标(脱离标准流)绝对定位元素移动位置的时候,是相对于它的祖先元素来说的语法:选择器 {position:absolute;}1.如果没有祖先元素或者祖先元素没有定位,则以浏览器为准

2022-07-01 23:24:56 121

原创 CSS浮动

pc端网页布局的三种方式:普通流,浮动,定位移动端的布局在后面会专门学习,就看后面模块的笔记叭,俺还没写float属性用于创建浮动框,将其移动到一边,直到左边缘或右边缘触及包含块或者是另一个浮动框边缘float: left || right || none(默认不浮动);浮动特性:1.浮动元素会脱离标准流,不再保留原先的位置,原先的位置会被标准流盒子占有2.浮动元素会一行内显示并且元素顶部对齐,放不下时另起一行顶端对齐3.任何元素都可以加浮动,浮动元素会自动具有行内块元素的特征4.如果块级盒子没有设置宽度,

2022-07-01 10:34:39 80

原创 CSS盒子模型

页面布局三大核心,盒子模型,浮动,定位magin是盒子与盒子之间的距离padding是内容和边框的距离border是边框content是盒子里面的内容border:border-width || borer-style || border-color分别设置边框粗细、样式、颜色border-top只设置上边框border-collapse:collapse;合并相邻的边框边框会让盒子变得更大padding-top:上内边距;padding-left:左内边距padding复合写法:padding:5px;1

2022-07-01 00:32:38 109

原创 CSS三大特性层叠、继承、优先级

层叠性样式冲突时,遵循就近原则继承性子标签会继承父标签里面的某些样式,如文本颜色,字号行高的继承font:12px/20px;字号12px,行高20px,也可不带单位,那就代表倍数优先级行内样式>id选择器>类选择器,伪类选择器>标签选择器>继承,*>外部样式外部样式不用style包裹...

2022-06-30 19:30:51 65

原创 CSS背景设置

垂直居中:文字行高=盒子高度背景颜色background-color:颜色|transparent(透明);背景图片background-image:none|url(url);背景平铺background-repeat:repeat|no-repeat|repeat-x|repeat-y;默认平铺,图片没有盒子大时,默认x,y方向上都把图片进行复制背景位置background-position:x y;x,y可以是方位名词top,bottom,left,center,right,也可以是精确单位百分数浮点

2022-06-30 19:06:13 67

原创 CSS元素显示模式

块元素独占一行高度、宽度、内外边距都可以调整行内元素一行可以显示多个元素高宽不能直接设置,无效行内元素只能容纳文本或者其他行内元素行内块元素同时具有块元素和行内元素的特点一行可以显示多个高度、宽度、内外边距都可以设置显示模式的转换转换为块级元素:display:block;转换为行内元素:display:inline;转换为行内块元素:display:inline-block;......

2022-06-30 07:17:26 79

原创 CSS复合选择器

后代选择器元素1 元素2{样式声明}选择元素1里面的所有元素2(后代元素),后代包括孙子子选择器元素1>元素2{样式声明}只能选择最近一级子元素,也就是只能选择亲儿子并集选择器选择多组标签,选择了元素1和元素2元素1,元素2{样式声明}伪类选择器最大的特点是冒号:链接伪类:a:link,选择所有未被访问的链接a:visited,选择所有已经被访问的链接a:hover,选择鼠标指针位于其上的链接a:active,选择鼠标按下但未抬起的链接顺序不能颠倒:focus伪类选择器用于选取获得焦点的表单元素input:

2022-06-30 07:02:28 62

原创 Emment语法

生成html标签生成css样式简写

2022-06-30 05:03:36 74

原创 css字体、文本属性以及引入方式

字体属性font-family:"宋体";设置多个字体用逗号隔开font-size:20px;字体大小,单位像素font-weight:bold;字体粗细,加粗,bold等价于700font-style:italic;斜体复合写法:font:style weight size/line-height family;不能随意更换顺序,必须有style和size文本属性color:red;可以是16进制的,rgb(255,0,0)text-align:center/left/right;水平居中对齐/左对齐/右

2022-06-30 01:13:40 147

原创 CSS基础选择器

标签选择器把同一标签名的选择出来类选择器把同一个类名的选择出来,类class p既是red类又是big类,中间用空格隔开id选择器

2022-06-30 00:40:39 88

原创 html基础知识2

表格标签表示的是一行,表示的是每行里面的单元格通常表的第一行是表头,例如:姓名,年龄等,此时,单元格变成,里面的文字会加粗居中显示表格结构标签表格头部,表格主体合并单元格rowspan="合并单元格个数"colspan="合并单元格个数"列表标签无序列表默认为小黑点有序列表自定义列表对名词进行解释表单收集用户信息,姓名,电话等input输入表单元素type属性 name属性:i......

2022-06-29 21:32:30 96

原创 html基础知识1

html是超文本标记语言web标准:结构(html),表现(css),行为(js)vscode创建html:修改格式为html,感叹号就可以快速创建ctrl加+;ctrl加-;分别放大和缩小文档类型声明,告诉浏览器使用的是html5版本来显示网页:lang定义文档显示语言;en定义语言为英语,zh-CN是中文防止乱码标题标签:我是一级标签:一共有6个,加了标题的文字会变粗,字号也依次变...

2022-06-29 18:16:40 153

原创 第三章 继承

属性继承与方法继承构造方法继承继承的概念与实现继承的概念:如果类B具有类A的全部属性和方法,而且又具有自己特有的属性和方法,则类A为一般类,类B为特殊类;被继承的类称为父类,继承类称为子类继承的格式:子类可以添加新的成员变量和方法,也可以隐藏或覆盖父类的成员变量和方法修饰符同类的声明,public 缺省 final final修饰的类不能被继承一个子类只有唯一一个父类,一个父类可以有很多子类,类的继承具有传递性属性的继承和扩展子类不用重复定义父类的属性,而且同样是可以使用的,这样可以降低工作量属性隐藏

2022-06-29 01:01:58 63

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除