HansonJohn-优快云博客

原创 lnmp快速搭建wordpress

出于安全考虑，建议设置一个不同于admin的名称。因为与默认用户名称admin相比，该名称更难破解。请勿重复使用现有密码，并确保将密码保存在安全的位置。为避免安装版本不同造成冲突，请执行以下命令移除已安装的MariaDB.执行以下命令，打开 default.conf 文件。若返回结果为空，则说明未预先安装，则执行下一步。执行以下命令，设置Nginx为开机自启动。按Esc，输入:wq，保存文件并返回。按Esc，输入:wq，保存文件并返回。按i切换至编辑模式，写入以下内容。显示结果，则说明环境配置成功。

2024-05-17 10:20:40 732

原创 v-model原理

例如应用在输入框上，就是value属性和input事件的合写。作用域插槽：定义slot插槽的同时是可以传值的。给插槽上可以绑定数据，将来使用组件时可以用。场景：封装弹框类的基础组件，visible属性true显示false隐藏。作用：利用ref和$refs可以用于获取dom元素，或组件实例。特点：prop属性名，可以自定义，非固定为value。本质：就是：属性名和@update：属性名合写。作用：可以实现子组件与父组件数据的双向绑定。视图变，数据跟着变：@input。数据变，视图跟着变：value。

2024-01-21 09:06:41 459

原创 vue指令集

计算属性会对计算出来的结果缓存，再次使用直接读取缓存，依赖项变化了，会自动重新计算-->并再次缓存。1.作用：给表单元素使用，双向数据绑定 --> 可以快速获取或设置表单元素内容。1.作用：动态的设置html的标签属性 --> src url title。2.语法：v-if="表达式" 表达式值true显示，false隐藏。作为方法，需要调用-->this.方法名() @事件名="方法名"2.语法：v-else v-else-if="表达式"v-on：事件名 = "methods中的函数名"

2024-01-13 19:20:19 469

原创包和git

概念：访问权限的令牌，本质上是一串字符串创建：正确登录后，由后端签发并返回作用：判断是否有登录状态等，控制访问权限注意：前端只能判断token有无，而后端才能判断token的有效性。

2024-01-12 08:36:18 417

原创 axios和promise

概念：JavaScript有一个基于事件循环的并发模型，事件循环负责执行代码、收集和处理事件以及执行队列中的子任务。概念：在async函数内，使用await关键字取代then函数，等待获取Promise对象成功状态的结果值。定义：执行代码和收集异步任务的模型，在调用栈空闲，反复调用任务队列里回调函数的执行机制，就叫事件循环。细节：then()回调函数中的返回值，会影响新生成的Promise对象最终状态和结果。接口：使用AJAX和服务器通讯时，使用的URL，请求方法，以及参数。promise本身是同步的。

2024-01-02 15:14:12 599

原创正则表达式

正则表达式是用于匹配字符串中字符组合的模式。在JavaScript中，正则表达式也是对象通常用来查找、替换那些符合正则表达式的文本，许多语言都支持正则表达式。

2023-12-29 15:06:59 470

原创本地存储分类

这是因为JavaScript这门脚本语言诞生的使命所致--JavaScript是为处理页面中用户的交互，以及操作DOM而诞生的。应该先进行添加，之后再删除。这样所导致的问题是：如果JS执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。像document、alert、console.log()这些都是window的属性，基本BOM的属性和方法都是window的。history的数据类型是对象，主要管理历史记录，该对象与浏览器地址栏的操作相对应，如前进、后退、历史记录等。

2023-12-10 22:52:01 382

原创页面加载事件

当初始的HTML文档被完全加载和解析完成之后，DOMContentLoaded事件被触发，而无需等待样式表、图像等完全加载。必须使用removeEventListener(事件类型，事件处理函数，获取捕获或者冒泡阶段)语法：addEventListener(事件类型，事件处理函数，是否使用捕获)环境对象：指的是函数内部特殊的变量this，它代表着当前函数运行时所处的环境。获取元素的自身宽高、包含元素自身设置的宽高、padding、border。注意：获取的是可视宽高，如果盒子是隐藏的，获取的结果是0。

2023-12-05 21:23:55 442

原创操作元素内容

DOM(Docuent Object Model--文档对象模型)是用来呈现以及与任意HTML或XML文档交互的API白话文：DOM是浏览器提供的一套专门用来操作网页内容的功能DOM作用开发网页内容特效和实现用户交互标准属性：标准天生自带的属性比如class id title等，可以直接使用点语法操作比如：disabled、checked、selected自定义属性：在html5中推出来了专门的data-自定义属性在标签上一律以data-开头在DOM对象上一律以dataset对象方式获取。

2023-11-30 22:00:40 416

原创内置对象的介绍

声明对象，并添加了若干属性后，可以使用.获得对象中属性对应的值，我称之为属性访问。JavaScript内部提供的对象，包含各种属性和方法给开发者调用。介绍：Math对象是JavaScript提供一个“数学”对象。对象（object）：JavaScript里的一种数据类型。对象里面是无序的键值对，没有规律.不像数组里面有规律的下标。可以理解为是一种无序的数据集合，注意数组是有序的数据集合。对象没有像数组一样的length属性，所以无法确定长度。语法：对象名.属性=新值。语法：对象名.属性=新值。

2023-11-27 21:38:52 402

原创函数的使用

函数体是函数的构成部分，它负责将相同或相似代码“包裹”起来，直到函数调用时函数体内的代码才会被执行。函数可以把具有相同或相似逻辑的代码“包裹”起来，通过函数调用执行这些被“包裹”的代码逻辑，这么做的优势是有利于精简代码方便复用。通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。return后面代码不会再被执行，会立即结束当前函数，所以return后面的数据不要换行写。作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。

2023-11-24 22:36:11 428 1

原创数组的基本使用

删除数组中数据：arr.pop() arr.shift() arr.splice(操作的下标，删除的个数)arr.unshift(新增的内容)方法将一个或多个元素添加到数组的开头，并返回该数组的新长度。数组添加新的数据：arr.push(新增的内容) arr.unshift(新增的内容)好处：把声明起始值、循环条件、变化值写到一起，让人一目了然，它是最常使用的循环形式。数组.push()方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度。长度：数组中数据的个数，通过数组的length属性获得。

2023-11-24 21:16:23 431 1

原创运算符和语句

while大括号里代码执行完毕后不会跳出，而是继续回到小括号里判断条件是否满足，若满足又执行大括号里的代码，然后再回到小括号判断条件，直到括号内条件不满足，即跳出。循环：重复执行一些操作，while：在....期间，所以while循环就是在满足条件期间，重复执行某些代码。continue 退出本次循环，一般用于排除或者跳过某一个选项的时候，可以使用continue。break 退出整个循环，一般用于结果已经得到，后续的循环不需要的时候可以使用。若不满足则向下判断条件2，满足条件2执行代码2，其它不执行。

2023-11-11 21:47:28 95 1

原创变量、数组、模板

编写程序时过度依靠系统内部的隐式转换是不严禁的，因为隐式转换规律并不清晰，大多是靠经验总结的规律。输出和输入也可理解为人和计算机的交互，用户通过键盘、鼠标等向计算机输入信息，计算机处理后再展示结果给用户，这便是一次输入和输出的过程。let即关键字（let：允许、许可、让、要），所谓关键字是系统提供的专门用来声明（定义）变量的词语。换言之，有括号和没有括号，得到的结果是一样的，所以我们直接使用运算符的写法。计算机中的编号从0开始，所以小明的编号为0，小刚的编号为1，以此类推。

2023-11-07 22:13:21 95

原创字体图标-移动端

iconfont类：基本样式，包含字体的使用等。灵活性：灵活的修改样式，例如：尺寸、颜色等。轻量级：体积小、渲染快、降低服务器请求次数。调用图标对应的类名，必须调用2个类名。字体图标展示的是图标，本质是字体。icon-xxx：图标对应的类名。兼容性：几乎兼容所有主流浏览器。处理简单的、颜色单一的图片。

2023-11-01 22:47:04 108 1

原创媒体查询与less

Less是一个CSS预处理器，Less文件后缀是.less。扩充了CSS语言，使CSS具备一定的逻辑性、计算能力注意：浏览器不识到Less代码，目前阶段，网页要引入对应的CSS文件VSCode插件：Easy LESS,保存less文件后自动生成对应的CSS文件。

2023-10-22 17:57:09 395 1

原创动画-animation

空间：是从坐标轴角度定义的X、Y和Z三条坐标轴构成了一个立体空间，Z轴位置与视线方向相同。动画：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）属性值：flat:子级处于平面中，perserve-3d:子级处于3D空间。左手握住旋转轴，拇指指向正值方向，其它四个手指弯曲方向为旋转正值方向。作用：指定了观察者与Z=0平面的距离，为元素添加透视效果。作用：设置元素的子元素是位于3D空间中还是平面中。属性:(添加给父级，取值范围800-1200)transform:rotateZ(值);

2023-10-22 14:14:53 105 1

原创平面转换-transform

transform:translate(X轴移动距离，Y轴移动距离);方位名词(left、top、right、bottom、center)transform-origin:水平原点位置垂直原点位置；概念：改变盒子在平面内的形态（位移、旋转、缩放、倾斜）渐变是多个颜色逐渐变化的效果，一般用于设置盒子背景。作用：为元素添加动态效果，一般与过渡配合使用。圆心位置取值：像素单位数值/百分比/方位名词。默认情况下，转换原点是盒子中心点。2.取值为正，顺时针旋转。3.取值为负，逆时针旋转。半径可以是2条，则为椭圆。

2023-10-18 22:30:54 125

原创 flex弹性布局

Flex布局也叫弹性布局，是浏览器提倡的布局模型，非常适合结构化布局，提供了强大的空间分布和对齐能力。场景：浮动元素会脱标，如果父级没有高度，子级无法撑开父级高度（可能导致页面布局错乱）align-items：当前弹性容器内所有弹性盒子的侧轴对齐方式（给弹性容器设置）align-self：单独控制某个弹性盒子的侧轴对齐方式（给弹性盒子设置）弹性盒子可以自动挤压或拉伸，默认情况下，所有弹性盒子都在一行显示。属性值：整数数字，表示占用父级剩余尺寸的份数。作用：控制弹性盒子的主轴方向的尺寸。

2023-10-11 23:27:01 309

原创盒子模型类

必须设置content：” “属性，用来设置伪元素的内容，如果没有内容，则引号留空即可。场景：行内元素添加margin和padding，无法改变元素垂直位置。内边距 -- padding（出现在内容与盒子边缘之间）场景：父子级的标签，子级的添加上外边距会产生塌陷问题。作用：创建虚拟元素（伪元素），用来摆放装饰性的内容。场景：垂直排列的兄弟元素，上下margin会合并。作用：根据元素的结构关系查找多个元素。作用：设置内容与盒子边缘之间的距离。作用：根据元素的结构关系查找元素。

2023-10-11 20:42:33 165

原创选择器的使用

选择器写法：选择器1，选择器2，...,选择器N{css属性}，选择器之间用，隔开。优先级：也叫权重，当一个标签使用了多种选择器时，基于不同种类的选择器的匹配规则。选择器写法：父选择器子选择器{css属性}，父子选择器之间用空格隔开。选择器写法：选择器1选择器2{css属性}，选择器之间连写，没有任何符号。选择器写法：父选择器>子选择器{css属性},父子选择器之间用>隔开。作用：布局网页的时候，根据标签的显示模式选择合适的标签摆放内容。相同的属性会覆盖：后面的css属性覆盖前面的css属性。

2023-10-10 21:57:47 111 1

原创 css属性

层叠样式表，是一种样式表语言，用来描述HTML文档的呈现（美化内容）。书写位置：title标签下方添加style双标签，style标签里面书写css代码。

2023-10-10 21:54:56 49 1

原创列表、表单、表格

标签：select嵌套option，select是下拉菜单整体，option是下拉菜单的每一项。标签：dl嵌套dt和dd，dl是定义列表，dt是定义列表的标题，dd是定义列表的描述/详情。表格结构标签：用表格结构标签把内容划分区域，让表格结构更清晰，语义更清晰。注意事项：ul标签里面只能包裹li标签，li标签里面可以包裹任何内容。注意事项：ol标签里面只能包裹li标签，li标签里面可以包裹任何内容。标签：ul嵌套li，ul是无序列表，li是列表条目。标签：ol嵌套li，ol是有序列表，li是列表条目。

2023-10-10 14:33:01 79 1

HansonJohn的博客