- 博客(50)
- 收藏
- 关注
RSS订阅原创 Vue基础(三)
组件化开发思想现实组件化开发思想标准分治重用组合编程组件化开发思想组件化规范：Web ComponentsWeb Components是通过创建封装好功能的定制元素来解决上述问题Vue组件注册定义组件// 定义一个名为 button-counter 的新组件Vue.component('button-counter', { data: function () { return { count: 0 } }, template: '
2021-09-11 15:24:44
234
原创 Vue基础(二)
Vue常用特性概览表单操作自定义指令计算属性侦听器过滤器生命周期基于Vue表单操作input:单行文本textarea:多行文本select:下拉多选radio:单选框checkbox:多选框<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="
2021-09-09 23:41:07
204
原创 Deepin安装node npm cnpm nodemon vue-cli
node.jsnode官网： https://nodejs.org/en/，并将下载好的node压缩包解压并改名为node解锁文件夹使用sudo chmod -R 777 文件夹的命令解锁usr下的local文件夹将node文件夹至local目录创建node及npm软连接实现全局调用将下列代码在终端输入即可,软连接一行一行输入验证即可sudo ln -s /usr/local/node/bin/node /usr/local/bin/sudo ln -s /usr/local/no
2021-08-29 19:29:09
509
原创 Vue基础(一)
Vue概述Vue诞生渐进式javascript框架Vue是渐进式javascript框架声明式渲染—>组件系统---->客户端路由—>集中式状态管理---->项目构建Vue的优点易用：熟悉HTML CSS JavaScript知识 即可快速上手Vue灵活：库与框架之间来回切换高效:20KB运行大小 超快虚拟DOM...
2021-08-20 17:08:12
287
1
原创 javascript高级(五)
ES6变量提升特性增加了程序运行时的不可预测性语法过于松散，实现相同的功能，不同的人可能会写出不同的代码let之块级作用域let声明的关键字具有块级作用域，所谓的块级作用域便是一个{}<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>let声明的变量具有块级作用域</title></head>
2021-08-16 21:00:04
179
1
原创 javascript高级(四)
正则表达式正则表达式是一个对象，主要是用于匹配字符串中字符组合的模式。正则表达式的特点可过滤页面内容的一些敏感词替换符合某个模式的文本从字符串获取我们想要的特定部分。创建正则表达式在javascript中，可以通过两种方式创建正则表达式test()是正则表达式对象的方法，用来检验字符串是否符合该规则，返回值为true或者false.注意：正则表达式不需要加引号，不管是字符串或值型通过RegExp对象的方式 创建正则表达式var 变量名 = new RegExp(/表达式
2021-08-14 22:21:02
399
1
原创 javascript高级(三)
函数创建函数的三种方式1.function声明的普通函数（命名函数）2.函数表达式（匿名函数）3.new Function()var fn =new Function(‘参数1’,‘参数2’,…,'函数体）;Function()里面的参数都是字符串格式所有的函数都是Fnction的实例对象函数也属于对象<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8
2021-08-14 02:19:33
182
原创 javascript高级(二)
创建对象的三种方式ES6前 ，对象不是基于类创建的，而是用一种称为构建函数的特殊函数来定义对象和它们的特征。通过new关键字创建对象通过字面量创建对象通过构造函数创建对象<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <
2021-08-12 23:45:25
468
原创 javascript高级(一)
面向过程及面向思想面向过程面向过程就是分析出问题所需要的步骤，然后用函数把这些步骤一个个的实现，使用时依次调用即可。面向思想面向过程就是把事务分成一个个对象，由对象之间分工与合作。面向对象的特点抽取对象中公共的属性与行为封装成一个类（模板）对类进行实例化，获取类的对象对象是一组无序的相关属性与方法的集合，所有的事物都可以是一个对象。例如字符串 数字 等等。属性：对象的特征，在对象中用属性来表示（名词）方法：对象的行为，在对象中用方法来表示（动词类在ES6的过程中
2021-08-11 17:18:26
130
原创 JQuery(三)
JQuery事件处理之普通注册JQuery提供方便的事件注册机制，但有以下优缺点。优点:操作简单，且不用担心事件覆盖等问题缺点：不能解绑事件，且不能实现事件委托<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta
2021-08-09 17:09:58
201
原创 JQuery(二)
JQuery属性操作元素固定属性值prop()所谓的元素的固定属性就是元素自带的属性，如a链接中的href属性获取属性语法prop("属性")设置属性语法prop("属性","属性值")元素自定义属性值attr()用户自己给元素设置的属性，称为自定义属性获取属性语法attr("属性") //类似原生getAttribute()设置属性语法attr("属性","属性值") //类似原生setAttribute()注意:该方法也可以直接获取自定义属性数据缓存data
2021-07-30 21:46:07
324
1
原创 JQuery(一)
jQueryJQuery：即javascript库。对原生的js代码进行封装，我们可以直接快速而高效的使用封装好的功能常见的JavaScript 库：jQuery、Prototype、YUI、Dojo、Ext JS、移动端的zepto等官网地址：https://jquery.com/jQuery的优点轻量级。核心文件几十kb，不会影响页面加载速度。跨浏览器兼容，基本兼容了现在主流的浏览器链式编程、隐式迭代。对事件、样式、动画支持，大大简化了DOM操作。支持插件扩
2021-07-12 16:39:55
208
原创 Web APIs(七)
移动端之轮播图功能自动播放轮播图手指拖动播放轮播图步骤1.利用定时器自动播放图片2.等过渡完成之后 再去判断 监听过渡完成的事件3.去掉ol下的li的current类 并为当前li添加current类4.手指滑动轮播图触摸元素touchstart:获取手指初始坐标。 手指触摸时 停止定时器移动手指touchmove:计算手指的滑动距离 并且移动盒子手指离开 根据距离去判断播放上一张与下一张如果移动距离小于50px 则回弹手指离开时 取消定时器html文件 <
2021-07-08 13:59:52
290
原创 Web APIs(六)
缓慢动画的原理匀速动画=盒子当前的位置+固定的值缓慢动画=盒子当前的位置+变化的值思路核心算法：（目标值-当前的位置）/n 作为每次移动的步长停止的条件：让盒子当前的位置等于目标的位置，就停止定时器<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>缓慢动画的原理</title> <style&g
2021-07-03 22:53:08
119
1
原创 Web APIs(五)
offsetoffset：偏移量 使用offset系列的相关属性可以动态得到该元素的位置（偏移），大小等等1.获得元素距离定位父元素的位置2.获得元素自身的大小（宽度及高度）注意：返回的数值不带单位<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta content="width=device-width, user-scalable=
2021-06-30 16:15:24
107
1
原创 Web APIs(四)
键盘事件onkeyup:键盘按键按下被松开时触发onkeydown:键盘按键被按下时触发onkeypress:键盘按键被按下时触发（不识别ctrl shift功能键）三个键盘事件的执行顺序：onkeydown----onkeypress—onkeyup<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-C
2021-06-10 11:41:32
129
原创 Web APIs(三)
节点节点操作删除节点node.remobeChild(child)node.removeChild()方法是从DOM中删除一个子节点，返回被删除的节点点击按钮 删除ul中的li<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
2021-06-03 23:56:46
127
原创 Web APIs(二)
排它思想如果有同一组数据，我们想要为某一个元素单独设置样式，需要使用for循环的排它思想思路如下清除所有元素的样式单独为当前元素设置样式顺序不能颠倒this是指当前事件的调用者。排它思想之习题一点击当前按钮，背景色变为紫色<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatib
2021-06-03 11:02:57
104
原创 Web APIs(一)
JS的组成Web APIs与javascript基础的区别Web APIs是javascript基础的应用，大量使用javascript基础做页面交互效果API与Web APIs的区别API是提供给程序员的一种工具，会使用即可Web API是浏览器提供的一套操作浏览器功能与页面元素的API(DOM与BOM)Web API一般都有输入与输出（函数的传参与返回值）针对浏览器做交互效果DOMDOM:文档对象模型，提供访问与操作网页内容的接口与方法，通过DOM,可以改变网页结构的外观与样
2021-05-31 17:24:19
486
原创 javascript基础知识之作用域(六)
JavaScript作用域何为作用域呢？简单而言，就是标识符在某个范围起作用与效果，提高程序可靠性，减少命名冲突。javascript作用域全局作用域局部作用域全局作用域标识符处于整个script脚本或单独的js文件中，便叫做全局作用域 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Co
2021-05-28 20:26:26
272
4
原创 javascript基础知识之函数（五）
函数Js函数的定义：封装了一段可重复执行调用的代码块目的：可以让大量代码重复使用函数的体验函数之求和函数名的命名是动词，而变量名的命名是名词<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="v
2021-05-21 19:38:38
289
1
原创 javascript基础知识之数组(四)
数组数组是一组数据的集合，数组中的每个数据被称为元素，数组可以存放任意类型的元素，是将一组数据存放在单个变量下的优雅方式.如何创建数组使用new关键字创建数组使用数组字面量的方式创建数组数组中的每个数组元素之间用逗号相隔new关键字之创建数组var 数组名 = new Array();<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <
2021-05-20 14:31:01
330
2
原创 javascript基础知识之循环（三）
js中的循环语句for循环while循环do while循环何为循环 在程序中，反复被执行的语句叫做循环体，循环体是否能被重复执行，取决于循环的终止条件，由循环体及循环的终止条件组成的语句叫做循环语句循环的目的可以重复执行某些代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compat
2021-05-19 22:45:21
1334
11
原创 javascript基础知识之流程控制语句（二）
运算符运算符也被称为操作符，用来实现赋值，比较及执行算数运算等功能的符号javascript常见的运算符算数运算符比较运算符逻辑运算符赋值运算符递增与递减运算符算数运算符算数使用的符号 比较两个变量或值的算术运算<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible"
2021-05-18 17:42:07
180
1
原创 javascript基础知识之变量(一)
编程何为编程，计算机为解决某个问题而使用某种程序设计语言编写的代码，并最终得到结果的过程。计算机程序可以通过计算机语言的一系列指令集合来控制计算机注意：任何能够执行代码的设备都被称为计算机，例如：ATM 手机 智能机器人等等计算机语言计算机语言是人类与计算机之间通讯的语言，是人类与计算机之间传递信息的媒介。计算机语言：机器语言 汇编语言 高级语言计算机最终识别的是二进制语言，二进制语言是由0和1组成机器语言机器语言是由二进制组成的 二进制语言泛指0和1汇
2021-05-17 17:16:36
329
1
原创 移动端基础之bootstrap(四)
响应式原理使用媒体查询针对于不同宽度的设备进行样式和布局的设置，从而适应不同的设备设备的划分小于768的为超小屏幕（手机）768~992之间的为小屏设备（平板）992~1200的中等屏幕（桌面显示器）大于1200的大屏设备（大桌面显示器）注意：响应式需要一个父级元素作为容器，配合子级元素来实现更多效果父容器版心尺寸划分超小屏幕（手机，小于 768px）：设置宽度为 100%小屏幕（平板，大于等于 768px）：设置宽度为 750px中等屏幕（桌面显示器，大于等于 992px
2021-05-14 16:12:22
1027
原创 移动端基础之less适配布局(三)
rem与emrem与em皆是相对单位 rem是根据html字体的大小而进行改变 em是根据父元素字体的大小而进行改变rem的作用:根据html字体的大小 而整体控制页面元素的大小<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
2021-05-10 19:26:28
666
原创 移动端基础之flex布局(二)
传统布局与flex布局的比较传统布局兼容性好布局繁琐局限性，不能在移动端很好的布局flex布局操作方便，布局及其简单pc端支持情况较差IE11以下的版本 仅部分支持注意事项pc端页面布局 建议使用传统布局pc端页面布局 如不考虑兼容性 可使用flex布局flex布局原理flex:弹性布局，用来为盒装模型提供最大的灵活性，任何一个容器都可以指定为flex布局采用flex布局的元素，被称为容器，它的所有子元素会自动成为容器成员，称为flex项目注意事项
2021-05-07 23:19:03
270
1
原创 移动端基础之流式布局(一)
浏览器现状PC端常见浏览器：360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器。移动端常见浏览器：UC浏览器，QQ浏览器，欧朋浏览器，百度手机浏览器，360安全浏览器，谷歌浏览器等等总结：兼容移动端主流浏览器，只需要处理webkit内核即可手机屏幕的现状移动端设备屏幕尺寸非常多，碎屏化非常严重，常用单位是px常见移动端屏幕尺寸移动端调试方法总结移动端浏览器主要针对于webkit内核即可常见的移动端主要针对于移动端开发移动端碎屏化非常严
2021-05-07 23:17:52
337
原创 HTML5+CSS3(三)
三维坐标系简称立体坐标系 比二维坐标系多一个Z轴3D位移3D位移在2D位移的基础上多一个可移动的Z轴transform: translate3d(x,y,z);<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>3D位移</title> <style> * {
2021-04-30 17:25:38
150
1
原创 HTML5+CSS3(二)
2Dtransformtransform(转换)是css3新增的属性 可以实现元素的旋转 位移 缩放等效果二维坐标系二维坐标系:平面坐标系2D转换是改变元素在二维平面上形状和位置的一种技术translate（位移）注意事项所谓的位移 是元素沿着x轴和Y轴移动位置不会影响到其它元素的位置对行内元素无效<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"
2021-04-30 11:01:24
148
原创 HTML5+CSS3(一)
HTML5HTML5作为html的第五次重大修改，作为新的HTML语言，具有新的元素，新的属性及行为。广义的HTML5=HTML5+css+javascript HTML5具有兼容性，但具有发展趋势。HTML5新增语义化标签header:头部标签nav:导航标签article:内容标签section:块级标签aside:侧边栏标签footer：脚部标签注意事项新增语义化标签可以使用多次IE9以下的版本具有兼容性问题，需要转换成块级元素<!DOCTYPE htm
2021-04-28 16:19:09
320
原创 品优购
项目之前期准备开发工具: Webstrom + photoshop+ 谷歌浏览器技术栈:HTML + CSS项目之目标能够引入ico图标掌握网站优化的三大标签掌握css的字体图标掌握css属性的书写顺序代码规范HTML规范DOCTYPE 声明<!DOCTYPE html>HTML5标准模板...
2021-04-26 18:35:20
1283
原创 CSS小技巧(八)
Chrome工具f12ctrl+shift+l检查Chrome结构布局1号为html结构2号为css样式3号为行数Chrome调试数据上箭头 数值增大下箭头 数据变小子元素的宽度允许大于父元素在某些情况下 子元素的宽度可以大于父元素的宽度ul的宽度大于版心的宽度 且不受影响css常见的错误css单词书写错误css无显示html 结构不匹配(重要)中文的冒号少写花括号...
2021-04-06 12:41:16
596
原创 CSS高级技巧(七)
元素的显示与隐藏元素在页面中 显示与隐藏display显示（隐藏）显示与隐藏display:none(隐藏)display:block（显示）特点先隐藏元素元素且不占位置<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, init
2021-04-06 12:37:42
188
原创 CSS定位及圆角矩形（六）
三种布局机制的上下顺序标准流 + 浮动 + 定位定位定位：将盒子定在某一个位置，自由的漂浮其它盒子上面定位=定位模式+边偏移边偏移定位模式选择器 {position:属性值}staticstatic:静态定位 静态定位是定位模式中的默认属性，没有边偏移，在网布布局中几乎不用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <m
2021-04-02 18:31:29
259
1
原创 CSS项目之学成网(五)
目标了解单页面制作的流程掌握css的初始化语句掌握css属性的书写顺序准备学成网之psd开发工具=PhotoShop(切图)+Vs Code+谷歌浏览器项目的文件夹css文件夹 存放样式表。images文件夹：存放图像index:首页的内容。...
2021-03-31 19:34:49
169
原创 CSS布局模式之浮动 (四)
CSS布局的三种模式标准流按照元素的默认显示模式进行排列，故称为标准流浮动主要用于多个块级盒子在同一行显示定位主要把盒子定位到浏览器的某个位置 后面会经常用到定位行内块元素和浮动的区别行内块元素可以让元素在同一行显示，但是中间有空隙，而浮动却恰恰解决这个问题float(浮动)设置浮动属性的元素会脱离标准流浮动的作用能让多个块级盒子在同一行显示可以实现盒子的左右对齐浮动最早是用来实现图片环绕效果 选择器 {float: 属性值;}float之浮
2021-03-27 19:34:25
189
原创 CSS盒子模型（三）
css盒子模型网页布局的关键点：盒子盒子模型组成部分盒子的组成margin(外边距)border(边框)padding(内边距)content(内容)borderborder-width:边框的宽度border-style:边框的样式 默认值：none(无样式) solid(实线) dashed(虚线) dotted(点线)border-color:边框的颜色简写方式 border:border-width border-style border-color
2021-03-27 19:33:54
203
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人