- 博客(31)
- 收藏
- 关注
RSS订阅原创 Vuex的模块化
为了让状态管理变得清晰，容易维护，适用于比较复杂的大型项目。可以拥有属于自己的state、mutation、action、getters、modules 互不影响。2、mutations:同步操作，修改state数据的唯一方法 第一个形参是state数据 第二个形参是外面传入的数据。3、actions:存储修改，异步操作 第一个参数表示上下文对象，第二个表示外部传入的数据。4、getters：类似于计算属性,不允许修改 ,对state数据进行包装加工处理。1、 state: 共享的数据。
2024-05-27 10:25:24
113
原创 Vue默认插槽、具名插槽、作用域插槽的定义及使用场景
【定义：默认插槽是将父组件的结构和数据插入子组件中，默认插槽只有一个插入位置，要插入的html结构和data数据必须在父组件中，不过css可以在子组件中】【定义：作用域插槽的data数据固定写在子组件中，数据的html结构根据父组件传入的html结构来决定】【定义：具名插槽和默认插槽类似，只是默认插槽只有一个插入位置，具名插槽可以有多个插入位置】【简述：将多个父组件的自定义html和data插入子组件的多个位置】【简述：将父组件的自定义html和data插入子组件的对应位置】【特点：父组件决定结构和数据】
2024-05-20 00:00:52
240
原创 跨级组件之间的数据传递
provide（注入名，注入值）provide（）函数可以接收2个参数，第1个参数是注入名，后代组件会通过注入名查找所需注入值，第2个参数值，值可以是任意类型，包括响应式数据，例如通过ref（）函数创建数据。对于父组件而言，如果想要为后代组件提供数据，需要使用provide（）函数，对于子组件而言，如果想要注入上层组件或整个应用提供数据，需要使用injection（）函数。在不使用set up 语法糖的情况下，provide（）函数必须在组件的set up （）函数中调用。一、provide（）函数。
2024-05-13 10:27:32
157
原创 全局事件总线和消息订阅与发布
1、它需要安装 pubsub，我们打开 VScode 的控制台，输入 npm i pubsub-js，进行安装。在传数据和接收数据的组件中都要通过 import pubsub from ‘pubsub-js’ 引入这个文件。1.一种组件间通信的方式，适用于任意组件间通信。
2024-05-06 00:18:57
231
原创 vue组件化编程
模块定义：模块即向外提供特定功能的js程序，一般一个模块就是一个js文件。当应用中的功能都是多组件的方式来编写的，那这个应用就是一个组件化的应用。当应用中的js都以模块来编写的,那这个应用就是一个模块化的应用。局部：将所有功能写在一个组件中是没有意义的所以要分开写。模块作用: 复用js,简化js的编写,提高js运行效率。组件中的js也可以拆分成多个js，实现js的模块化。将一个大的js拆分成多个小的js以实现模块化、将应用按功能点拆分，一个功能就是一个组件。组建的编写需要分成3步：创建组件、注册组件。
2024-04-29 08:22:31
267
2
原创 Vue的生命周期
挂载前/后：在挂载前，vue实例的el和data都初始化了，但还是挂载前的虚拟dom节点，data.message还没替换。vue 的虚拟 dom 机制会重新构建虚拟 dom 与上一次的虚拟dom 树利用 diff 算法进行对比之后重新渲染，一般不做什么事儿 可以访问数据和DOM，DOM已经渲染。当更新完成后，执行updated，数据已经更改完成，dom 也重新 render 完成，可以操作更新后的虚拟 dom。挂载数据，绑定事件等等，然后执行 created 函数 可以访问到数据，但访问不到DOM。
2024-04-21 23:27:08
359
原创 常用的事件修饰符
4、self(只有event.target是当前操作的元素才触发事件)9、passive（事件的默认行为立即执行，无需等待事件回调执行完毕）8、.native（监听组件根元素的原生事件）1、.prevent(默认的行为阻止了)3、.capture（使用事件捕获模式）7、.number（输入字符串转为数字）5、.once(只触发一次)6、.trim（过滤空格）2、.stop（冒泡）
2024-04-14 23:45:39
153
原创 vue自定义指令的总结以及应用的场景有哪些
Vue.directive第一个参数是指令的名字（不需要写上v-前缀），第二个参数可以是对象数据，也可以是一个指令函数。update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变。inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。2、设置一个v-lazy自定义指令完成图片懒加载。
2024-04-07 21:34:07
566
1
原创 Vue笔记四
5、.self阻止自身事件促发，但不会阻止冒泡,(间接有捕获模式) 给元素设置self后，点击当前设置的自身元素会触发，点击设置self的子类，会跳过设置了self的元素。4、.capture捕获模式 ，先触发带有该修饰符的元素，多个该修饰符，则由外而内触发打乱冒泡顺序（即可以理解为给元素添加一个监听器，当元素发生冒泡时，2、v-model.number可以将字符串转换为有效数字 “1”==1。注：通常使用v-model绑定表单v-model=“”,2.不同点：v-text文本，v-html标签。
2024-03-31 15:31:41
178
原创 vue笔记三
2、v-leave-to [这是一个时间点】是动画离开之后，离开的终止状态，此时元素动画已经结束。3.优缺点：少次的显示隐藏推荐使用v-if，减少内存的消耗多次的显示隐藏推荐使用v-show。v-else,v-cloak,v-once，v-pre不需要带值。2.不同点：v-if存在或不存在，v-show展示或不展示。v-if和v-for在vue2或vue3中都不要同时使用，4、v-leave-active出场时段。在vue2中v-for比v-if优先级高。在vue3中v-if比v-for优先级高。
2024-03-23 14:29:44
242
原创 Vue的笔记二
1.使用v-bind:属性名 == :属性名。（1）v-on:事件 == @事件。3.methods处理的函数方法。注：事件名称一定不要加on。
2024-03-15 22:43:39
145
原创 Vue笔记一
Vue是一套用来动态构建用户界面的渐进式JavaScript框架。需要引入Vue包 -------------------{{}}插值语法：可以读取到data里面的所有属性。注：容器名称尽量使用id绑定唯一值。容器，app容器名称。
2024-03-08 23:29:10
127
原创 ES6笔记六
请使用express创建服务，端口号为81，需解决跨域问题，需托管静态文件名称为es6，创建一个get接口，接口名称为/login，接口中需要验证账号为admin密码123456,验证成功返回登录成功页面路径http://127.0.0:81/es6/day01.html，否则登录失败访问http://127.0.0:81/es6/day02.html，使用jq中ajax调取服务，需要验证输入不能为空。
2024-01-07 20:07:45
354
1
原创 nodejs笔记六
express.static()托管静态资源,尽量添加前缀名称,默认访问XX.html。npm i nodemon@3.0.0 -g 安装自动重启服务 全局。2、req.query 对象，可以访问到客户端URL 中携带的查询参数。npm i nodemon -g 安装自动重启服务 全局。3.app.use(cors())配置中间件。1、res.send()向客户端发送内容。nodemon 文件名 启动服务。解决跨域问题使用cors中间件。
2024-01-01 20:57:26
315
原创 nodejs笔记五
安装第三方模块使用简写形式npm i 包名称 moment moment@2.22.2npm install 包名称安装包的版本含义第1位数字：大版本第2位数字：功能版本第3位数字：Bug修复版本npm init -y创建一个package.json配置文件npm i读取package.json中dependencies安装所有的第三方模块作者名称项目版本号项目类型。
2023-12-25 10:17:38
19
原创 nodejs笔记四
charset=utf-8”)解决中文乱码。3.为服务器实例绑定 request 事件。4.启动服务器实例的 .listen()req获取调用接口的地址和方式等信息。res.end()向客户端发送内容。注：只要修改了代码，就需要重启服务。__dirname获取到当前目录。2.创建web服务实例。ctrl+c停止服务。1.导入http模块。
2023-12-24 21:12:14
30
1
原创 nodejs笔记三
path.join() 方法，用来将多个路径片段拼接成一个完整的路径字符串。path.basename() 方法，用来从路径字符串中，将文件名解析出来。path.extname()可以获取路径中的扩展名部分。path 必选参数，表示一个路径的字符串。path 必选参数，表示一个路径的字符串。ext 可选参数，表示文件扩展名。返回: 表示路径中的最后一部分。返回: 返回得到的扩展名字符串。paths 路径片段的序列。
2023-12-22 09:25:22
17
原创 nodejs笔记二
1、fs.readFile(“路径”,“格式utf8”,function(err,user){}) 方法，用来读取指定文件中的内容。2、fs.writeFile(“路径”,“内容”,“格式”,function(err){}) 方法，用来向指定的文件中写入内容。现在：前端—h5+c3+es5+es6+vue+nodejs+微信小程序+Element-ui。参数1：必选参数，需要指定一个文件路径的字符串，表示文件的存放路径。参数4：必选参数，文件写入完成后的回调函数。参数1：必选参数，字符串，表示文件的路径。
2023-12-18 08:22:59
20
原创 前端background笔记
由它们的中心定义：background-image: radial-gradient(形状 大小 at position, 颜色, …（2）background-image: linear-gradient(角度deg, 颜色, 颜色, …（1）background-image: linear-gradient(方向, 颜色, 颜色, …大小：farthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角。（2）repeat-X ,repeat-Y 根据X和Y轴重复。
2023-12-10 23:03:51
90
1
原创 nodejs笔记一
2、请使用jq通过get和post调用接口http://index.com数据并接收，get和post传id=99。一、请写出导入导出的所有方式。
2023-12-03 23:04:40
19
1
原创 ES6笔记
之后的每一个初始化的i值，都是上一次迭代的i的结果，因此在同步for代码执行完后，再执行setTimeout，会在当前局部作用域下，找到之前保存的初始化的i变量值。var i = 1，首先是不会形成局部作用域的，而且会将i变量的声明提升至for循环体的外面，这里会挂载到window对象下，同步逻辑代码for循环执行完后 ，再执行 setTimeout异步代码，此时在setTimeout异步里面，存在变量i，但没有声明，所以会向父级作用域链查找，找到了window.i = 10++;类似于数组，但不是数组。
2023-11-27 08:30:20
65
1
原创 ES6笔记5
2、异步：不进入主线程、而进入"任务队列"（task queue）的任务，只有"任务队列"通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。5.执行栈中所有同步任务执行完毕，此时JS引擎线程空闲，系统会读取任务队列，将可运行的异步任务回调事件添加到执行栈中，开始执行。1、同步任务：在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务。1、可选，map 函数，用于对每个元素进行处理，放入数组的是处理后的元素。1、查找数组中符合条件的元素,若有多个符合条件的元素，则返回第一个元素。
2023-11-19 23:21:29
19
原创 ES6笔记3
Map.size 返回 Map 中元素的数量，而 Object 的键值对个数只能手动计算。1、Map 对象保存键值对。4、 entries() 返回 Map 对象中键/值对的数组。6、 values() 返回 Map 对象中值的数组。1、 new Map() 创建新的 Map 对象。5、 keys() 返回 Map 对象中键的数组。2、set() 为 Map 对象中的键设置值。3、 get() 获取 Map 对象中键的值。2、Map 对象记得键的原始插入顺序。2、 map仅支持new Map（）。
2023-11-05 21:26:52
25
原创 ES6笔记2
2、Symbol.for() 类似单例模式，首先会在全局搜索被登记的 Symbol 中是否有该字符串参数作为名称的 Symbol 值，如果有即返回该 Symbol 值，若没有则新建并返回一个以该字符串参数为名称的 Symbol 值，并登记在全局环境中供搜索。3、Symbol.keyFor() 返回一个已登记的 Symbol 类型值的 key ，用来检测该字符串参数作为名称的 Symbol 值是否已被登记。1、 Object.keys() 静态方法返回一个由给定对象自身的可枚举的字符串键属性名组成的数组。
2023-10-30 16:40:58
23
1
原创 ES6笔记1
5、padStart(总长度,“填充的字符串”)：返回新的字符串，表示用参数字符串从头部（左侧）补全原字符串。6、padEnd(总长度,“填充的字符串”)：返回新的字符串，表示用参数字符串从尾部（右侧）补全原字符串。4、repeat(number)：返回新的字符串，表示将字符串重复指定次数返回。2、startsWith()：返回布尔值，判断参数字符串是否在原字符串的头部。3、endsWith()：返回布尔值，判断参数字符串是否在原字符串的尾部。1、includes()：返回布尔值，判断是否找到参数字符串。
2023-10-22 15:51:51
29
1
原创 前端笔记4
11、 backwards 动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。这些都是 from 关键帧中的值（当 animation-direction 为 “normal” 或 “alternate” 时）或 to 关键帧中的值（当 animation-direction 为 “reverse” 或 “alternate-reverse” 时）。9、alternate-reverse 动画在奇数次（1、3、5…）反向播放，在偶数次（2、4、6…
2023-10-15 16:39:03
21
1
原创 前端笔记3
1、animation: 选择器的关键名称 动画时间 运动曲线 开始的时间 播放次数 ，是否反复播放 是否运用最后一帧动画的样式 是否暂停或播放。8、animation-fill-mode 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。3、transition-timing-function 指定transition效果的转速曲线。6、animation-iteration-count 定义动画的播放次数。6、ease-in 规定以慢速开始的过渡效果。
2023-10-04 00:04:27
22
1
原创 前端HTML5
6、 flex-direction代表的值有：row|row-reverse|column|column-reverse。1、flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性。（2)、closest-corner ： 指定径向渐变的半径长度为从圆心到离圆心最近的角。（1）、closest-side ：指定径向渐变的半径长度为从圆心到离圆心最近的边。
2023-09-23 22:50:11
22
1
原创 HTML5笔记一
6、保存数据：sessionStorage.setItem(key,value);8、删除单个数据：sessionStorage.removeItem(key);10、得到某个索引的key：sessionStorage.key(index);1、保存数据：localStorage.setItem(key,value);3、删除单个数据：localStorage.removeItem(key);5、得到某个索引的key：localStorage.key(index);2、controls视频的播放控件。
2023-09-17 00:01:14
21
1
原创 JavaScript笔记
特殊值：0，null,undefined,"",NaN转换后为false。删除的数组的值 与 delete(删除的数组的值)删除数组值，空间保留。获取属性中name元素，数组集合，如果获取一个元素，需要添加下标。是单行注释，快捷键ctrl+/,取消注释再来一次ctrl+/获取class元素，数组集合，如果获取一个元素，需要添加下标。(起始下标,结束下标)，截取字符串，[起始下标,结束下标)获取选择器元素,数组集合，如果获取一个元素，需要添加下标。获取标签元素,数组集合，如果获取一个元素，需要添加下标。
2023-09-09 22:19:18
28
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人