Cheny_Yang的博客

原创 vue2指令

在Vue 2中，自定义组件也可以使用v-model指令来实现双向绑定。默认情况下，v-model在组件上会利用名为value的 prop 和名为input的事件，但你可以通过设置组件的model选项来修改这些默认的 prop 和事件名。以下是如何在自定义组件中使用v-model在组件内声明一个 prop通常，这个 prop 被命名为value，这样它可以与v-model的默认行为相匹配。在组件内触发一个事件当需要通知父组件更新数据时，你应该在组件内部触发一个名为input。

原创 vue2生命周期

Vue实例的生命周期指的是从创建、初始化、挂载、更新到销毁的整个过程。每个阶段都有相应的生命周期钩子函数，可以让开发者在不同的阶段执行自定义的逻辑。created$elrendermounted$elupdateddestroyed提供了一个视觉化的方式来理解这些阶段和钩子函数。显示了实例从创建到销毁的整个流程，以及在这个过程中可以利用的钩子函数。生命周期图包括两条路径：一条是从创建到挂载的路径，另一条是从更新到销毁的路径。Vue实例的生命周期及其钩子函数对编写可靠和高效的Vue应用至关重要。

原创 vue2插件

在Vue.js中，插件是一种用来为Vue添加全局级别功能的扩展。它们可以用来添加一些全局方法或属性、添加全局资源如指令/过滤器/过渡等、通过全局混入来添加一些组件选项、添加Vue实例方法，或者提供一些库或工具的封装，使其在Vue上下文中更易于使用。$router$route要创建一个Vue插件，你需要定义一个具有install方法的对象。这个install方法将会在插件被注册时调用，接收Vue构造函数作为第一个参数，以及一个可选的选项对象作为第二个参数。然后，你可以在Vue应用程序中通过调用。

原创 vue2插槽概要

在子组件中，你可以通过。

原创 vue2动画

在Vue.js 2中，动画和过渡是通过和组件来实现的。

原创 mixins

【代码】mixins。

原创 Promise实现

【代码】Promise实现。

原创 PromiseA+规范

微任务队列在JavaScript事件循环的当前任务结束后、下一个任务开始前执行。5.1 promise状态变成 fulfilled 后，所有的 onFulfilled 回调都需要按照then的顺序执行, 也就是按照注册顺序执行(所以在实现的时候需要一个数组来存放多个onFulfilled的回调)5.2 promise状态变成 rejected 后，所有的 onRejected 回调都需要按照then的顺序执行, 也就是按照注册顺序执行(所以在实现的时候需要一个数组来存放多个onRejected的回调)

原创 Promise概要

什么是Promise，以及它解决了什么问题？PromisePromise的三种状态是什么？Promise如何创建一个新的Promise？创建一个新的Promise对象通常使用构造函数resolve和reject。

原创 事件冒泡、事件捕获、事件委托

解释事件冒泡和事件捕获的概念。事件冒泡和事件捕获是DOM事件传播的两个阶段。当一个事件发生在DOM中的某个元素上时，它可以在父元素之间传播。事件捕获阶段从根节点开始，逐级向下直到触发事件的元素；事件冒泡阶段则从事件触发的元素开始，逐级向上直到根节点。如何使用JavaScript中的方法来注册事件处理程序，并说明如何指定事件是在冒泡阶段还是捕获阶段触发。在JavaScript中，方法用于在DOM元素上注册事件处理程序。它接受三个参数：事件类型、事件处理函数和一个可选的布尔值。如果这个布尔值为true。

原创 节流和防抖

是一种控制函数在一段连续操作完成后只执行一次的技术。每当事件被触发时，它会重新开始计时，直到操作停止了指定的时间()，确保函数在这段时间内只执行一次。如果在等待时间内再次触发事件，则不会执行函数，直到等待时间结束。如果不使用节流或防抖，可能会因为处理大量事件而导致应用变慢，甚至在某些情况下导致浏览器崩溃。可以防止函数过于频繁地执行，这有助于避免不必要的计算和重绘，从而节省资源并提高应用性能。解释为什么在某些情况下不使用节流或防抖可能会导致问题。描述或编写节流和防抖函数的实现代码。)之后，函数才会执行。

原创 css选择器

div<div>.class#idA BA > BA + BA ~ B[attr]:hover:active:focus:target:checked:disabled:not()::before::after:has()在CSS规则中，最右边的选择器被称为关键选择器（Key Selector），也就是实际应用样式时直接作用于目标元素的选择器。在浏览器解析CSS规则时，它会从右向左读取选择器，因为这样可以更快地确定规则是否适用于当前元素。因此，关键选择器的性能对整个选择器链的匹配效率有很大影响。

原创 行内元素、块级元素和行内块元素

块级元素（block-level elements）独占一行，可以设置宽度和高度，其宽度默认为父元素的100%，高度由内容决定。行内块元素（inline-block elements）结合了行内元素和块级元素的特性，它们不会独占一行，但可以设置宽度和高度。行内元素（inline elements）通常用于文本内容，不会开始新的布局块，它们不会独占一行，其宽度和高度由内容决定。行内元素的默认行为，例如不会开始新行，宽度和高度由内容决定。，在文本流中保持行内的特性，同时拥有块级元素的一些布局特性。

原创 display grid 概要

然而，一些旧版本的浏览器，如IE11，对Grid的支持是基于旧版本的规范，可能需要特殊处理。对于不支持Grid的浏览器，可以使用功能检测（如Modernizr）并提供一个回退布局，通常使用Flexbox或传统的浮动和定位技术。CSS Grid 布局是一个二维布局系统，允许开发者创建复杂的网格布局，这是一个在行和列上同时控制布局的方法。最佳实践包括使用命名网格线和区域以提高代码的可读性，以及使用最小化和适用的代码来创建所需的布局。是上述属性的简写形式，用于指定网格项在网格中的位置和跨越的列或行数。

转载 display flex 使用

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。行内元素也可以使用 Flex 布局。Webkit 内核的浏览器，必须加上-webkit前缀。注意，设为 Flex 布局以后，子元素的floatclear和属性将失效。

原创 display: flex 概要

什么是Flexbox？Flexbox是CSS的一种布局模式，它提供了一种更加有效的方式来布局、对齐和分配容器内项目的空间，即使它们的大小未知或者是动态的。Flexbox布局主要用于一维布局（即行或列）。Flexbox解决了哪些布局问题？Flexbox解决了传统布局技术（如浮动和定位）的一些问题，包括垂直居中、空间分配和源顺序独立于布局等问题。Flex容器和Flex项目是什么？Flex容器是使用或声明的元素，其直接子元素成为Flex项目。与的区别是什么？创建一个块级Flex容器，而。

原创 css外边距合并和BFC

外边距合并是一个CSS现象，当两个或多个垂直外边距相遇时，它们会合并成一个单一边距。这个单一外边距的大小是原来外边距中最大的那个。

原创 css盒模型

CSS盒模型是用于布局和设计网页的一种概念模型，它将每个HTML元素视为一个盒子，这个盒子包括四个不同的区域：内容（content）、内边距（padding）、边框（border）和外边距（margin）。: “在标准模式下，元素的宽度和高度只包括内容区域，不包括内边距、边框和外边距。: “在IE盒模型下，元素的宽度和高度包括内容、内边距和边框，但不包括外边距。时，元素的宽度和高度会以IE盒模型来计算”属性，我们可以控制元素的盒模型。

原创 微任务、宏任务、Event-Loop（nodejs篇）

原创 js正则替换ip地址

let reg = /https:\/\/.*\.[0-9]{1,4}(:[\w]+)?/g这个正则匹配的结果如下https://101.122.134.40:8860/aa.bb/aa/ee> https://10.162.123.40:8860https://101.122.134.40/aa.bb/aa/ee> https://101.122.134.40然后替换一下即可let str = 'https://101.122.134.40:8860/aa.bb/aa/ee

原创 Git教程

git笔记该笔记是参照廖雪峰大佬写的Git教程https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000/文章目录git笔记1、下载git2、自报家门3、创建版本库4、修改文件，查看状态，重新提交5、版本回退6、工作区和暂存区7、Git跟踪并管理的是修改，⽽⾮⽂件8、撤销修改、add之...

原创 小程序云开发实现上传图片功能

1、小程序上传图片功能实现需要注意以下几个点：（1）图片最多上传9张（默认）（2）上传后的图片会生成一个临时的地址，用过这个临时地址将图片上传到数据库（3）图片保存的位置是在云开发控制台的 本地存储中（4）图片只能是一张一张的上传（5）保存在本地存储中的图片不能重名（6）可以使用js中的new Date().getTime()返回一个毫秒值作为图片的名称，这个毫秒值是不会重复的（7）...

原创 阿里云CentOS 7.3 裸机搭建 Apache、MySql、PHP、Node环境、并绑定域名

阿里云CentOS 7.3 裸机搭建 Apache、MySql、PHP环境、并绑定域名文章目录阿里云CentOS 7.3 裸机搭建 Apache、MySql、PHP环境、并绑定域名1、使用SSH 远程连接服务器2、开放服务端口3、Apache环境搭建4、MySql环境搭建5、PHP环境搭建6、node环境搭建7、绑定域名先初始化阿里云，恢复至裸机，从头到尾安装一遍环境输入手机验证码，确认...

原创 阿里矢量图iconfont的使用方法

阿里矢量图iconfont的使用方法一般那些小的图标都是用矢量图来表示的，然后就能像操作字体的方法一样操作这些小图标了，很是方便。比较常用的是阿里提供的一些矢量图标，基本上所有的图标都涵盖了。链接地址：阿里矢量图标标库方法1，在线引用（一般是项目未完成时，用这种方法，好处是当想要增加新的图表时，只需要改变连接就行了，无需重新下载一遍）（1）先登录（2）随便选一个你喜欢的图标库，比如...

原创 mySql中，查询一串字符串里有几个'abc'

mySql中，查询一串字符串里有几个’abc’我在实习时候碰到过一个这样的需求，在表里有一串12位的字符串，全是数字0和1，如下：000011111111表示这个人一年中，前四个月没有缴费，后八个月缴费了。我的需求是想知道这个人一年总共缴费多少个月。在写sql语句时，有一个巧方法，利用替换字符串，计算长度，然后相除。select '000011111111' as years, (...