- 博客(59)
- 收藏
- 关注
RSS订阅原创 笔记20250515
git pull origin xxx 拉取远程。git checkout -b xxx 新建。git branch -D xxx 删除。
2025-05-15 11:18:42
107
原创 css实现垂直居中的方法
第一种方法：组合使用display：table-cell和vertical-align、text-align，使父元素内的所有行内元素水平垂直居中（内部div设置display：inline-block即可）这在子元素不确定宽度和高度时，特别适用哦咳咳，敲黑板划重点啦：与其他一些display属性类似，table-cell同样会被其他一些css属性破坏，例如float，position：absolute，所以在使用display：table-cell时，尽量不要使用float或者position:absol
2025-04-18 20:43:03
1001
原创 什么是BFC？BFC有什么作用？
什么是BFC?BFC全称是Block Formatting Context，意思就是块级格式化上下文。你可以把BFC看做一个容器，容器里边的元素不会影响到容器外部的元素。
2025-04-18 20:41:03
740
原创 http和websocket协议区别
一种双向通信协议，在建立连接后，WebSocket服务器和Browser/UA都能主动的向对方发送或接收数据，就像Socket一样，不同的是WebSocket是一种建立在Web基础上的一种简单模拟Socket的协议；WebSocket在建立握手连接时，数据是通过http协议传输的，“GET/chat HTTP/1.1”，这里面用到的只是http协议一些简单的字段。socket是对TCP/IP协议的封装，本身并不是协议，而是一个调用接口(API)，通过Socket，我们才能使用TCP/IP。
2025-04-15 20:27:32
368
原创 js事件中的冒泡和捕捉
当有很多盒子嵌套并且多层盒子都存在事件的时候，我们就必须要思考一个问题——这些事件的发生顺序。JS中用事件冒泡和事件捕获来处理事件流中事件发生顺序，在用addEventListener方法添加事件监听的时候，第三个参数用来控制是冒泡事件还是捕获事件（false为冒泡，true为捕获，默认值为false）。
2025-04-15 20:09:41
220
原创 什么是跨域问题以及其解决方案
在前端领域中，跨域是指浏览器允许向服务器发送跨域请求，从而克服Ajax只能同源使用的限制。同源策略是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。
2025-04-15 19:45:32
679
原创 对promise的认识
JS中用于处理异步操作的编程模式。一个Promise是一个代理，它代表一个创建Promise时不一定已知的值。它允许我们将处理的程序与异步操作的最终成功值或失败值原因想关联起来。这使得异步方法可以像同步方法一样返回值：异步方法不会立即返回最终值，而是返回一个Promise，以便在将来的某个时间点提供该值。
2025-04-15 19:39:32
403
原创 虚拟dom工作原理以及渲染过程
Vue.js通过编译将模版转换成渲染函数(render)，执行渲染函数就可以得到一个虚拟节点树(虚拟DOM)，虚拟节点树(虚拟DOM)提供虚拟节点vnode和对新旧两个vnode进行比对并根据比对结果（patch对象记录差异更新视图）进行DOM操作来更新视图，达到减少对DOM的目的，从而减少浏览器的开销，提高渲染速度，改善用户体验。
2025-04-10 20:57:33
754
原创 深拷贝、浅拷贝的方法
/这个方法可以，只不过function和undefined这种情况下无法复制。函数库lodash，也有提供_.cloneDeep用来做深拷贝6.接下来我们就以下面这个obj1对象为例子，进行深浅拷贝的演示。1.写一个递归(推荐，比较完美的解决方案)封装一个DeepClone的深拷贝函数。4.JSON转换方法。
2025-04-10 20:39:50
366
原创 闭包的理解
在上面的代码示例中，a函数定义了一个名为aa的变量和一个名为b的函数，b函数引用了aa变量，因此JavaScript引擎会保留a函数的作用域链，b函数可以访问a函数的执行上下文，b函数内用到了外部函数a的变量aa，在a函数调用结束后该函数执行上下文会销毁，但会保留一部分留在内存中供b函数使用，这就形成了闭包。闭包也存在着一个潜在的问题，由于闭包会引用外部函数的变量，但是这些变量在外部函数执行完毕后没有被释放，那么这些变量会一直存在于内存中，总的内存大小不变，但是可用内存空间变小了。
2025-04-10 20:15:31
923
原创 防抖和节流的区别
防抖触发高频率事件时n秒后只会执行一次，如果n秒内再次触发，则会重新计算。 简单概括：每次触发时都会取消之前的延时调用。 2.节流(thorttle): 高频事件触发，每次触发事件时设置一个延迟调用方法，并且取消之前延时 调用的方法。 简单概括：每次触发事件时都会判断是否等待执行的延时函数。 二.区别： 区别：降低回调执行频率，节省计算资源。 防抖和节流本质是不一样的。防抖是将多次执行变为最后一次执行，节流是将 多次执行变成每隔一段事件执行 函数防抖一
2024-09-25 22:01:41
260
原创 vue 组件绑定自定义事件
在，子组件中，我们是可以 给 button 绑定 click 事件的，因为 原生button 标签，本来就有 click 事件，这里只是巧妙利用了，子传父的一个思想，用 $emit 暴露出去一个自定义事件，父监听，，子组件触发了点击事件，同时，父也会监听到。在vue 项目开发中，常常为了，节省代码、高效利用，会封装自定义组件，封装自定义组件，传值就是 prop ，那绑定事件呢？假设，前提：d-button 没有绑定事件，父组件是这样写的，你点把，把 button 按钮，点 烂，都不会 有输出结果。
2024-05-06 22:08:04
493
原创 Vue中的mixin(混入)
Vue.js官方解释：混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。如果多个组件有很多相同的功能，那么就可以把这些相同的功能抽离出来写成一个混入对象，如有需要直接引入使用混入即可，引入后混入中在data中定义的数据，methods中定义的方法等都会成为组件中自己的数据和方法，相当于将混入对象中的数据、方法等合并到组件身上，可以减少代码的冗余。
2024-05-06 22:04:05
850
原创 vue中props详解
看一下官方文档：组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。父组件的数据需要通过 prop 才能下发到子组件中。也就是props是子组件访问父组件数据的唯一接口。详细一点解释就是：一个组件可以直接在模板里面渲染data里面的数据（双大括号）。子组件不能直接在模板里面渲染父元素的数据。如果子组件想要引用父元素的数据，那么就在prop里面声明一个变量（比如a），这个变量就可以引用父元素的数据。
2024-05-06 22:01:38
1161
原创 vue3中标签的ref属性
通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面跟着小编一起来学习学习吧。生命周期（部分），正如官方所说的一样，一开始不必先理解，不过随这你的学习与。进行修改，修改后的值也是响应式的，并且修改后会触发相关的副作用。：被用来给元素或子组件注册引用信息，引用信息将会注册在父组件的$，引用指向的就是DOM 元素如果用在子组件上，引用就指向组件实例。refs.fruit 的值应该是一个数组，数组中放的DOM元素。refs.fruit 的值应该是一个数组，数组中放的DOM元素。
2024-05-06 21:59:32
6523
1
原创 render函数
通常我们都会把我们的页面结构逻辑都写在 template 中，然后再通过vue将我们的代码转换成虚拟DOM，相比于真实DOM，虚拟DOM是通过js代码处理的，所以消耗的性能相对较小，当然大部分情况下使用 template 创建我们的HTML是可以的，但是在有些场景下，我们真的需要通Javascript的完全编程的能力来完成时，就可以用到 render函数，比之 template 更接近编译器。render函数即渲染函数，它是个函数，render返回的参数是Vnode（即虚拟节点，也就是我们要渲染的节点）
2024-05-06 21:55:38
1741
原创 VueComponent构造函数
App.vue里data里面的值是父组件的值，然后在使用组件的地方，使用绑定方式，左侧是自定义的名字，右侧是我们data里面的数据，如果不用v-bind，那么就是一个字符串。新建一个Header.vue ，Footer.vue子组件，然后还是使用之前的方式，在App.vue里引入组件，然后注册组件，最后使用组件这样一个顺序。组件传值就是把父组件的值传递给子组件，所以父组件必须有值，左侧是自定义的名称，右侧是实际的值使用v-bind: 绑定的就是data里面的值。一般使用的是局部组件，使用方式是，
2024-05-06 21:51:41
484
原创 Vue-组件嵌套、组件CSS样式、多组件嵌套、组件传值、传值和传引用、多个单文件组件路由的使用
App.vue里data里面的值是父组件的值，然后在使用组件的地方，使用绑定方式，左侧是自定义的名字，右侧是我们data里面的数据，如果不用v-bind，那么就是一个字符串。新建一个Header.vue ，Footer.vue子组件，然后还是使用之前的方式，在App.vue里引入组件，然后注册组件，最后使用组件这样一个顺序。组件传值就是把父组件的值传递给子组件，所以父组件必须有值，左侧是自定义的名称，右侧是实际的值使用v-bind: 绑定的就是data里面的值。一般使用的是局部组件，使用方式是，
2024-05-06 21:48:40
1318
原创 vue的组件化编程
注意：此处的data使用的是函数式返回（不是对象式）：因为多次一使用同一个组件，当后使用组件部分改变data中数据，前面组件使用组件的数据也会改变。components：{'组件名','...'} :注册组件（在Vue实例中使用此配置项）：局部注册。只需要使用组件标签就会创建组件实例=vc实例（使用两次组件标签就会实例化两次vc）// 2. 全局注册组件(组件名字，组件在哪)：可以使用在任何vue绑定的模板中。组件标签：使用组件（将组件标签写在容器中，可以写多个组件标签=复用）
2024-05-06 21:46:04
718
原创 Vue生命周期函数
6、这个绿框中内容表示Vue开始编辑模板，把Vue代码中的那些指令进行执行，最终，在内存中生成一个编译好的最终的模板字符串对象，然后把这个字符串对象，渲染为内存中的DOM，此时，只是在内存中渲染好了模板，并没有把模板挂载到真正的页面中去。13、这一步，先根据data中最新的数据，在内存中，重新渲染出一份最新的内存DOM树，当内存DOM树被更新之后，会把最新的的内存DOM树，重新渲染到真实的页面当中，这时，就完成数据从data（Model层）->view（视图层）的更新。在这一步，实例仍然完全可用。
2024-04-24 21:34:20
627
原创 vue自定义指令
在Vue中，诸如v-if、v-for、v-on等等被称之为内置指令，它们都是以v-开头的，我们无需注册即可在全局使用它们，内置指令提供了极大的方便给我们，比如v-for指令可以让我们快速循环出很多dom元素。因为vue3可以有多个根节点，当有一个根节点时使用指令没有问题，如果有多个根节点使用指令回报错，建议多个根节点可以在组件内部使用指令。arg：传递给指令的参数 (如果有的话)。在 vue 中提供了一些对于页面和数据更为方便的输出，这些操作就叫做指令，以 v-xxx 表示，比如 html 页面中的属性。
2024-04-24 21:31:50
1029
原创 v-once、v-clock、v-pre
v-once指令只渲染元素和组件一次，随后的渲染，如果使用了此指令的元素、组件及其所有子节点，则都会当作静态内容并跳过。这个特性可以用于优化更新性能。bodyhtml在浏览器中运行的效果如图所示:运行上面的示例代码，当打开浏览器页面时，DOM元素中的{{message}}渲染了message属性的值，当使用v-model绑定的输入框再次改变message属性的值时，添加了v-once指令的标签则没有发生任何变化。
2024-04-24 21:28:34
410
原创 v-html指令
v-html指令为Vue.js开发者提供了一种便捷的方式来处理动态生成的HTML内容。然而，在使用v-html时，务必注意安全性问题，以防止潜在的XSS攻击。通过合理使用v-html指令，开发者能够更灵活地应对各种富文本和富媒体的场景，提升用户体验和开发效率。
2024-04-24 21:24:54
867
原创 Vue的v-text指令
可以使用这个v-model实现这个数据的绑定，但是在有些输入框中，还需要一些其他的指令搭配这个v-model指令结合使用。这种方式的输入框，是可以直接通过这个v-model获取到值的。因为v-model默认就是收集输入框的value值data:{userInfo:{account:‘’,possword:‘’}}和上面的type类型不一样，因为上面的text类型有输入的value，而这种类型的数据没有输入值，只有单选值，因此需要在这个标签内部加上这个va
2024-04-18 20:42:10
401
原创 vue收集表单数据
可以使用这个v-model实现这个数据的绑定，但是在有些输入框中，还需要一些其他的指令搭配这个v-model指令结合使用。这种方式的输入框，是可以直接通过这个v-model获取到值的。因为v-model默认就是收集输入框的value值data:{userInfo:{account:‘’,possword:‘’}}和上面的type类型不一样，因为上面的text类型有输入的value，而这种类型的数据没有输入值，只有单选值，因此需要在这个标签内部加上这个va
2024-04-18 20:39:19
1327
原创 Vue列表渲染
有时，我们想要显示一个数组经过过滤或排序后的版本，而不实际变更或重置原始数据。在这种情况下，可以创建一个计算属性，来返回过滤或排序后的数组。2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一。Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。变更方法，顾名思义，会变更调用了这些方法的原始数组。
2024-04-11 21:59:19
1170
原创 Vue.js条件渲染指令v-if及v-show
是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当的销毁和重建，v-if也是惰性的，如果在初始渲染时条件为假，则什么都不做，直到第一次变为真时，才会开始渲染条件块。可以看出v-if隐藏的内部元素不会被显示，Vue.js不会尝试生成对应的html代码，而v-show是通过css的display：none来控制的。一般来说，v-if每次插入或者移除元素时都必须生成元素内部的DOM树，因此具有更高的切换开销，而v-show有更高的初始渲染开销。值得注意的是，v-show。
2024-04-11 10:39:43
1020
原创 vue动态绑定style样式之动态添加style样式的多种写法
项目中会需要动态添加 style 行内样式，现指出常用的几种方式。注意:1、凡是有 - 的style属性名都要变成驼峰式，比如font-size要变成fontSize。2、除了绑定值，其他的属性名的值要用引号括起来，比如而不是fontSize:14px。
2024-04-10 21:14:51
1208
原创 vue动态绑定class的几种方法
3、当:class的表达式过长或逻辑复杂时，可以绑定一个计算属性，一般当条件多于两个时，都可以使用data或者computed。2、使用三元表达式，根据条件切换class（当数据isActive为真时，样式active才会被应用）2、对象中也可存在多个属性，动态切换class，：class 可以合class共存。
2024-04-10 21:12:24
1927
原创 vue中的watch与computed的区别
当 computed 属性的属性值是函数，那么默认会走get方法，函数的返回值就是属性的值；，因为箭头函数没有 this，它的 this 会继承它的父级函数，但是它的父级函数是 window，导致箭头函数的 this 指向 window，而不是 Vue 实例。上述代码中，当改变 obj 里属性的值时，打印 newVal 和 oldVal 的结果，发现他们是相等的。不过，deep 无法监听到数组的变动和对象的新增，参考 vue 数组变异，只有以响应式的方式触发才会被监听到——时，setter 会被调用，
2024-04-10 21:10:15
486
原创 vue的监视属性
比如下面这个场景，开发者要监测天气的变化，每次点击切换天气，就会变化，要求我们对不同的天气做出不同的处理。用于开启深度监视，多级结构中任何一个属性值发生变化，都能够检测到（内部的改变也能够通过外部监测到），监视多级结构中所有属性的变化。这里注意：本来所监视的属性都是字符串，需要带双引号，只不过单层的省略了双引号。在实际开发中，有时开发者需要根据某个属性的变化，做出相应的决策，因此。默认监视单层属性的改变，想实现监测多层结构需要使用。的值，进行监视到属性改变后的一些操作；监视多级结构中某个属性的变化。
2024-04-10 21:07:25
374
原创 Vue中的键盘事件
对于 type=checkbox 或 type=radio 的 input 元素，每当用户切换控件（通过触摸、鼠标或键盘）时，input 事件都应该触发。与 keyup 事件一起使用时，该按键必须在事件发出时处于按下状态。在contenteditable 和 designMode 的情况下，事件的 target 为当前正在编辑的宿主。属性替代，这个属性表示键盘上的物理键（与按键生成的字符相对），但是目前在一些浏览器中并未实现。代表着一个唯一标识的所按下的键的未修改值，它依据于一个系统和实现相关的数字代码。
2024-04-07 21:41:30
3048
原创 Vue 事件处理 -- 事件修饰符（prevent、stop、capture、self、once）
5.self：只有event.target是当前操作的元素时才触发事件；如果不使用Vue指令，那么怎么阻止事件冒泡呢？1.prevent：阻止默认事件（常用）；4.capture：使用事件的捕获模式；//阻止 vue 在启动时生成生产提示。3.once：事件只触发一次（常用）；-- 阻止默认事件（常用） -->2.stop：阻止事件冒泡（常用）；-- 引入Vue -->-- 准备好一个容器–>如果不加指令会怎么样？
2024-04-05 13:33:40
2081
原创 vue基本写法
Vue 允许创建可复用的组件，提高代码的可维护性和重用性。可以使用 Vue.component 方法定义组件，然后在模板中使用自定义标签引用组件。使用计算属性可以根据已有的数据计算出新的属性，而不是在模板中编写复杂的逻辑。这些是 Vue.js 的一些标准写法，涵盖了 Vue 实例、模板语法、组件、计算属性和属性监听等方面的用法。{}} 来输出变量的值，并通过指令 v-bind 绑定属性或 v-on 绑定事件。可以使用双大括号插值语法 {可以使用 watch 选项监听数据的变化，执行相应的操作。
2024-04-05 13:28:59
547
原创 js动画函数封装
回调函数原理：函数可以作为一个参数。将这个函数作为参数传到另一个函数里面，当那个函数执行完之后，再执行传进去的这个函数，这个过程就叫做回调。如果多个函数使用这个动画函数，每次都需要var声明定时器，因此可以给不同的元素使用不同的定时器。核心原理：利用JS是一门动态语言，可以很方便的给当前对象添加属性。缓动画就是让元素运动速度有所变化，最常见的就是让速度慢慢停下来。以1.1案例练习为例，封装动画函数。回调函数写的位置：定时器结束的位置。注意：函数需要传递2个参数，以1.5案例为基础的案例练习。
2024-03-23 14:47:09
344
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人