- 博客(67)
- 收藏
- 关注
原创 Vue响应式数据原理
理解:1、核心点:Object.defineProperty 2、默认vue在初始化数据时,会给data中的属性使用Object.defineProperty重新定义,当页面取到对应属性时。会进行依赖收集(收集当前组件的watcher)如果属性发生变化会通知相关依赖进行更新操作...
2022-02-09 21:25:09
442
原创 Vue的MVVM原理
MVC:传统的MVC是指用户的操作会调用服务器接口,服务器将处理结果返回给前端Model,然后页面进行重新渲染。MVVM:MVVM模型则是指ViewModel通过Data Bindings绑定数据来监听数据的变化,从而更新页面的DOM,ViewModel还通过DOM Listeners来监听DOM的变化从而去改变Model。...
2022-02-09 20:12:22
753
原创 http深入
一、http常用请求头 协议头 说明 Accept 可接受的响应内容类型(Content-Types)。 Accept-Charset 可接受的字符集 Accept-Encoding 可接受的响应内容的编码方式。 Accept-Language 可接受的响应内容语言列表。 Accept-Da
2021-12-30 11:33:08
1751
转载 响应式布局的常用解决方案对比
一、px和视口在静态网页中,我们经常用像素(px)作为单位,来描述一个元素的宽高以及定位信息。在pc端,通常认为css中,1px所表示的真实长度是固定的。在静态网页中,我们经常用像素(px)作为单位,来描述一个元素的宽高以及定位信息。在pc端,通常认为css中,1px所表示的真实长度是固定的。那么,px真的是一个设备无关,跟长度单位米和分米一样是固定大小的吗?答案是否定的,下面图1.1和图1.2分别表示pc端下和移动端下的显示...
2021-12-28 11:29:16
390
原创 VUE基础
一、目录解析目录/文件 说明 build 项目构建(webpack)相关代码 config 配置目录,包括端口号等。我们初学可以使用默认的。 node_modules npm 加载的项目依赖模块 src 这里是我们要开发的目录,基本上要做的事情都在这个目录里。里面包含了几个目录及文件: assets: 放置一些图片,如logo等。 components: 目录里面放了一个组件文件,可以不用。 App.vue: 项目入口文件,我
2021-12-23 21:38:13
147
原创 CSS重点问题及偏僻问题
一、a1.link:连接平常的状态2.visited:连接被访问过之后3.hover:鼠标放到连接上的时候4.active:连接被按下的时候正确顺序:“爱恨原则”(LoVe/HAte),即四种伪类的首字母:LVHA。再重复一遍正确的顺序:a:link、a:visited、a:hover、a:active .二、关于link与@import的区别区别1:link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务;@import属于CSS范畴,只能加载CSS。...
2021-12-23 11:24:40
116
原创 React
一、React 特点 1.声明式设计−React采用声明范式,可以轻松描述应用。 2.高效−React通过对DOM的模拟,最大限度地减少与DOM的交互。 3.灵活−React可以与已知的库或框架很好地配合。 4.JSX− JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ,但我们建议使用它。 5.组件− 通过 React 构建组件,使得代码更加容易得到复用,能够很好的应用在大项目的开发中。 6.单向响应的数据流...
2021-12-21 11:33:38
446
原创 CSS设计
一、什么是响应式网页设计响应式 web 设计会让您的网页在所有设备上看起来都不错。响应式 web 设计仅使用 HTML 和 CSS。响应式 web 设计并不是程序或 JavaScript。二、什么是视口视口(viewport)是用户在网页上的可见区域。视口随设备而异,在移动电话上会比在计算机屏幕上更小。在平板电脑和手机之前,网页仅设计为用于计算机屏幕,并且网页拥有静态设计和固定大小是很常见的。然后,当我们开始使用平板电脑和手机上网时,固定大小的网页太大了,无法适应视口。为了解
2021-12-20 21:56:13
199
原创 CSS高级
一、CSS border-radius 属性CSSborder-radius属性定义元素角的半径。提示:您可以使用此属性为元素添加圆角!提示:border-radius属性实际上是以下属性的简写属性:border-top-left-radius border-top-right-radius border-bottom-right-radius border-bottom-left-radius二、CSS border-radius - 指定每个角border-radiu...
2021-12-20 11:20:41
174
原创 CSS进阶
一、position: staticHTML 元素默认情况下的定位方式为 static(静态)。静态定位的元素不受 top、bottom、left 和 right 属性的影响。position: static; 的元素不会以任何特殊方式定位;它始终根据页面的正常流进行定位。二、position: relativeposition: relative;的元素相对于其正常位置进行定位。设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正常位置进行调.
2021-12-16 21:28:13
175
原创 CSS 样式
一、CSS 边框样式border-style属性指定要显示的边框类型。允许以下值:dotted- 定义点线边框 dashed- 定义虚线边框 solid- 定义实线边框 double- 定义双边框 groove- 定义 3D 坡口边框。效果取决于 border-color 值 ridge- 定义 3D 脊线边框。效果取决于 border-color 值 inset- 定义 3D inset 边框。效果取决于 border-color 值 outset- 定义 3D...
2021-12-16 20:29:13
205
原创 CSS 选择器
一、CSS 元素选择器元素选择器根据元素名称来选择 HTML 元素。二、CSS id 选择器id 选择器使用 HTML 元素的 id 属性来选择特定元素。元素的 id 在页面中是唯一的,因此 id 选择器用于选择一个唯一的元素!要选择具有特定 id 的元素,请写一个井号(#),后跟该元素的 id。三、CSS 类选择器类选择器选择有特定 class 属性的 HTML 元素。如需选择拥有特定 class 的元素,请写一个句点(.)字符,后面跟类名。注意:类名不能以数字开头!.
2021-12-15 21:58:17
121
原创 JS JSON
一、交换数据当数据在浏览器与服务器之间进行交换时,这些数据只能是文本。JSON 属于文本,并且我们能够把任何 JavaScript 对象转换为 JSON,然后将 JSON 发送到服务器。我们也能把从服务器接收到的任何 JSON 转换为 JavaScript 对象。以这样的方式,我们能够把数据作为 JavaScript 对象来处理,无需复杂的解析和转译。二、什么是 JSONJSON 指的是 JavaScript 对象标记法...
2021-12-15 16:02:46
960
原创 JS AJAX
一、AJAX 是开发者的梦想,因为您能够不刷新页面更新网页 在页面加载后从服务器请求数据 在页面加载后从服务器接收数据 在后台向服务器发送数据二、什么是 AJAXAJAX =AsynchronousJavaScriptAndXML.AJAX 并非编程语言。AJAX 仅仅组合了:浏览器内建的 XMLHttpRequest 对象(从 web 服务器请求数据) JavaScript 和 HTML DOM(显示或使用数据)Ajax 是一个令人误导的名称。Ajax 应用程序可能...
2021-12-14 21:52:43
141
原创 JS Web API
一、约束验证 DOM 方法属性 描述 checkValidity() 如果 input 元素包含有效数据,则返回 true。 setCustomValidity() 设置 input 元素的 validationMessage 属性。 二、约束验证 DOM 属性属性 描述 validity 包含与输入元素有效性相关的布尔属性。 validationMessage 包含当有效性为 false 时浏览器将显示的消息。 willValidate
2021-12-13 22:45:07
876
原创 JS Browser BOM
一、Window 对象所有浏览器都支持window对象。它代表浏览器的窗口。所有全局 JavaScript 对象,函数和变量自动成为 window 对象的成员。全局变量是 window 对象的属性。全局函数是 window 对象的方法。二、窗口尺寸两个属性可用用于确定浏览器窗口的尺寸。这两个属性都以像素返回尺寸:window.innerHeight - 浏览器窗口的内高度(以像素计) window.inne...
2021-12-13 21:02:10
668
原创 JavaScript HTML DOM
一、对象的 HTML DOM 树通过这个对象模型,JavaScript 获得创建动态 HTML 的所有力量:JavaScript 能改变页面中的所有 HTML 元素 JavaScript 能改变页面中的所有 HTML 属性 JavaScript 能改变页面中的所有 CSS 样式 JavaScript 能删除已有的 HTML 元素和属性 JavaScript 能添加新的 HTML 元素和属性 JavaScript 能对页面中所有已有的 HTML 事件作出反应 JavaScript 能在
2021-12-09 22:21:01
337
原创 JS Async
一、JavaScript 回调回调是作为参数传递给另一个函数的函数。当您将函数作为参数传递时,请记住不要使用括号。二、等待超时在使用 JavaScript 函数setTimeout()时,可以指定超时时执行的回调函数。当您将函数作为参数传递时,请记住不要使用括号。三、等待间隔:在使用 JavaScript 函数setInterval()时,可以指定每个间隔执行的回调函数。四、JavaScript Promise 对象JavaScript Promise 对象包含...
2021-12-09 20:42:27
646
原创 JavaScript函数
一、函数参数函数参数(parameter)指的是在函数定义中列出的名称。函数参数(argument)指的是传递到函数或由函数接收到的真实值。规则:JavaScript 函数定义不会为参数(parameter)规定数据类型。JavaScript 函数不会对所传递的参数(argument)实行类型检查。JavaScript 函数不会检查所接收参数...
2021-12-09 10:46:19
179
原创 JavaScript对象
一、管理对象// 以现有对象为原型创建对象Object.create()// 添加或更改对象属性Object.defineProperty(object, property, descriptor)// 添加或更改对象属性Object.defineProperties(object, descriptors)// 访问属性Object.getOwnPropertyDescriptor(object, property)// 以数组返回所有属性Object.getOwnProp
2021-12-07 15:45:09
139
原创 ECMAScript 2016~2018
一、JavaScript 字符串填充ECMAScript 2017 添加了两个 String 方法:padStart和padEnd,以支持在字符串的开头和结尾进行填充。二、JavaScript 对象条目ECMAScript 2017 向对象添加了新的Object.entries方法。三、JavaScript 对象值Object.values类似Object.entries,但返回对象值的单维数组四、JavaScript 异...
2021-12-06 10:38:50
129
原创 JavaScript ES6
一、 JavaScript letlet 语句允许您使用块作用域声明变量。二、JavaScript constconst语句允许您声明常量(具有常量值的 JavaScript 变量)。常量类似于let变量,但不能更改值。三、指数运算符取幂运算符(**)将第一个操作数提升到第二个操作数的幂。x ** y的结果与Math.pow(x,y)相同。四、默认参数值ES6允...
2021-12-04 17:32:24
144
原创 JavaScript ES5
一、"use strict" 指令“use strict” 定义 JavaScript 代码应该以“严格模式”执行。例如,使用严格模式,不能使用未声明的变量。您可以在所有程序中使用严格模式。它可以帮助您编写更清晰的代码,例如阻止您使用未声明的变量。“use strict” 只是一个字符串表达式。旧浏览器如果不理解它们就不会抛出错误。二、String.trim()String.trim()删除字符串两端的...
2021-12-04 15:43:38
662
原创 JavaScript 性能
一、减少循环中的活动编程经常会用到循环。循环每迭代一次,循环中的每条语句,包括for语句,都会被执行。能够放在循环之外的语句或赋值会使循环运行得更快。二、减少 DOM 访问与其他 JavaScript 相比,访问 HTML DOM 非常缓慢。假如您期望访问某个 DOM 元素若干次,那么只访问一次,并把它作为本地变量来使用。三、缩减 DOM 规模请尽量保持 HTML DOM 中较...
2021-12-02 21:32:56
143
原创 JavaScript 注意事项
一、避免全局变量请尽量少地使用全局变量。它包括所有的数据类型、对象和函数。全局变量和函数可被其他脚本覆盖。请使用局部变量替代,并学习如何使用闭包。二、始终声明局部变量所有在函数中使用的变量应该被声明为局部变量。局部变量必须通过var关键词来声明,否则它们将变成全局变量。严格模式不允许未声明的变量。三、在顶部声明一项好的编码习惯是把所有声明放在每段脚本或函...
2021-12-02 21:11:05
368
原创 JavaScript this 关键词
一、this 是什么?JavaScriptthis关键词指的是它所属的对象。它拥有不同的值,具体取决于它的使用位置:在方法中,this指的是所有者对象。 单独的情况下,this指的是全局对象。 在函数中,this指的是全局对象。 在函数中,严格模式下,this是 undefined。 在事件中,this指的是接收事件的元素。像call()和apply()这样的方法可以将 this 引用到任何对象。二、方法中的 this在对象方法中,this...
2021-12-02 19:47:00
104
原创 JavaScript 错误 - Throw 和 Try to Catch
一、JavaScript try 和 catchtry语句允许您定义一个代码块,以便在执行时检测错误。catch语句允许你定义一个要执行的代码块,如果 try 代码块中发生错误。JavaScript 语句try和catch成对出现。二、JavaScript 抛出错误当发生错误时,JavaScript 通常会停止并产生错误消息。技术术语是这样描述的:JavaScript 将抛出异常(抛出错误)。...
2021-12-02 11:28:27
679
原创 JavaScript 正则表达式
一、使用字符串方法 search() 来处理字符串search()方法也接受字符串作为搜索参数。字符串参数将被转换为正则表达式二、使用字符串方法 replace() 处理字符串replace()也接受字符串作为搜索参数三、正则表达式修饰符修饰符可用于大小写不敏感的更全局的搜素:修饰符 描述 i 执行对大小写不敏感的匹配。 g 执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)。 m 执行多行匹配。 四、正则表达式模式..
2021-12-01 22:25:17
451
原创 JavaScript 数学
一、Math.round()Math.round(x)的返回值是 x 四舍五入为最接近的整数。二、Math.pow()Math.pow(x, y)的返回值是 x 的 y 次幂。三、Math.sqrt()Math.sqrt(x)返回 x 的平方根。四、Math.abs()Math.abs(x)返回 x 的绝对(正)值。五、Math.ceil()Math.ceil(x)的返回值是 x上...
2021-12-01 21:50:24
416
原创 JavaScript 日期
一、new Date()new Date()用当前日期和时间创建新的日期对象二、new Date(year, month, ...)new Date(year, month, ...)用指定日期和时间创建新的日期对象。7个数字分别指定年、月、日、小时、分钟、秒和毫秒(按此顺序)。注释:JavaScript 从 0 到 11 计算月份。一月是 0。十二月是11。6个数字指定年、月、日...
2021-12-01 21:16:11
13154
原创 JavaScript 数组
把数组转换为字符串JavaScript 方法toString()把数组转换为数组值(逗号分隔)的字符串。join()方法也可将所有数组元素结合为一个字符串。它的行为类似 toString(),但是您还可以规定分隔符。位移元素位移与弹出等同,但处理首个元素而不是最后一个。shift()方法会删除首个数组元素,并把所有其他元素“位移”到更低的索引。shift()方法返回被“位移出”的字符串。unshift()方法(在开头)向数组添加新元素,并“反向位移”旧元素。u...
2021-11-30 22:27:08
171
原创 JavaScript 数字
一、JavaScript 数值始终是 64 位的浮点数与许多其他编程语言不同,JavaScript 不会定义不同类型的数,比如整数、短的、长的、浮点的等等。JavaScript 数值始终以双精度浮点数来存储,根据国际 IEEE 754 标准。此格式用 64 位存储数值,其中 0 到 51 存储数字(片段),52 到 62 存储指数,63 位存储符号:值(aka Fraction/Mantissa) 指数 符号 52 bits(0 - 51) 11 bits (52 -
2021-11-30 11:26:44
355
原创 JavaScript 字符串方法
一、字符串长度length属性返回字符串的长度二、查找字符串中的字符串indexOf()方法返回字符串中指定文本首次出现的索引(位置)JavaScript 从零计算位置。0 是字符串中的第一个位置,1 是第二个,2 是第三个 ...lastIndexOf()方法返回指定文本在字符串中最后一次出现的索引如果未找到文本,indexOf()和lastIndexOf()均返回 -1。两种方法都接受作为检索起始位置的第二个参数。三、检索字符串中的字符串search...
2021-11-29 21:57:05
271
原创 JavaScript重点问题及偏僻问题
一、Undefined 与 Null 的区别Undefined与null的值相等,但类型不相等。二、原始数据与复杂数据原始数据值是一种没有额外属性和方法的单一简单数据值。typeof运算符可返回以下原始类型之一:string number boolean undefinedtypeof运算符可返回以下两种类型之一:function objecttypeof运算符把对象、数组或null返回object。typeof运算符不会把函数返回...
2021-11-29 21:26:39
259
原创 JavaScript Let、var和Const
一、ECMAScript 2015ES2015 引入了两个重要的 JavaScript 新关键词:let和const。这两个关键字在 JavaScript 中提供了块作用域(Block Scope)变量(和常量)。在 ES2015 之前,JavaScript 只有两种类型的作用域:全局作用域和函数作用域。全局作用域全局(在函数之外)声明的变量拥有全局作用域。全局变量可以在 JavaScript 程序中的任何位置访问。函数作用域...
2021-11-20 20:40:52
1595
原创 JavaScript 输出
一、JavaScript 显示方案JavaScript 能够以不同方式“显示”数据:使用window.alert()写入警告框 使用document.write()写入 HTML 输出 使用innerHTML写入 HTML 元素 使用console.log()写入浏览器控制台二、使用 innerHTML如需访问 HTML 元素,JavaScript 可使用document.getElementById(id)方法。id属性定义 H...
2021-11-19 09:17:51
204
原创 JavaScript 使用
一、<script> 标签在 HTML 中,JavaScript 代码必须位于<script>与</script>标签之间。注释:旧的 JavaScript 例子也许会使用type属性:<script type="text/javascript">。注释:type 属性不是必需的。JavaScript 是 HTML 中的默认脚本语言。二、JavaScript 函数和事件...
2021-11-17 20:52:08
476
原创 HTML5 地理定位
一、定位用户的位置HTML5 Geolocation API 用于获得用户的地理位置。鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的。二、浏览器支持Internet Explorer 9、Firefox、Chrome、Safari 以及 Opera 支持地理定位。注释:对于拥有 GPS 的设备,比如 iPhone,地理定位更加精确。三、HTML5 - 使用地理定位请使用 get...
2021-11-11 12:05:47
216
原创 HTML YouTube 视频
一、YouTube Video Id保存(或播放)视频时,YouTube 会显示一个 id(例如 ih1l6wb7LhU)。您可以使用这个 id,并在 HTML 代码中引用您的视频。二、在 HTML 中保费 YouTube 视频如需在网页上播放视频,请执行以下操作:将视频上传到 YouTube 记下视频 id 在您的网页中定义<iframe>元素 让src属性指向视频的 URL 使用width和height属性来规定播放...
2021-11-11 12:01:14
1103
原创 HTML5 简介
一、什么是 HTML5HTML5 是最新的 HTML 标准。HTML5 是专门为承载丰富的 web 内容而设计的,并且无需额外插件。HTML5 拥有新的语义、图形以及多媒体元素。HTML5 提供的新元素和新的 API 简化了 web 应用程序的搭建。HTML5 是跨平台的,被设计为在不同类型的硬件(PC、平板、手机、电视机等等)之上运行。注释:在下面的章节中,您将学到如何“帮助”老版本的浏览器处理 HTML5。二、HTML5 - 新的属性语法HTML5 标准允许 4 中不同的
2021-11-10 21:50:13
293
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人