- 博客(95)
- 收藏
- 关注
RSS订阅原创 vue-router学习(四) --- 动态添加路由
我们一般使用都是后台会返回一个路由表前端通过调接口拿到后处理(后端处理路由)。比如不同权限显示不同的路由。主要使用的方法就是。
2023-10-31 21:52:18
953
原创 vue-router学习(二) --- 常用功能
使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。/a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样。命名视图可以在同一级（同一个组件）中展示更多的路由视图，而不是嵌套显示。只是路径后的参数)，上述例子中的 query 并不属于这种情况。的值过长，或者路由嵌套很深，会显的很乱维护也比较麻烦。因此，你可以根据自己的需要，不断地嵌套视图。属性，为了方便路由的跳转，如果单纯的通过。
2023-10-31 17:22:25
176
原创 vue-router学习(一) --- 基础使用
在src目录下面新建router 文件 然后在router 文件夹下面新建 index.ts。否则会有兼容问题报错。
2023-10-31 16:46:42
185
原创 vue3学习（十五）--- Pinia状态管理器
Pinia官网地址点这里Pinia.js 有如下特点：这样就引入成功了，状态管理器使用要单独配置文件。然后在用到的页面中引入，注意：引入和使用是分开的使用defineStore定义仓库，传唯一id。变量名称命名为use…是可组合项之间的约定，以使其使用习惯。唯一的id。类似于的模块的功能，这样更加的方便。State 箭头函数 返回一个对象 在对象里面定义值getters类似计算属性actions里面可以定义同步和异步页面使用引入对应的名称，然后执行。state1. 直接修
2023-10-30 22:18:28
461
原创 vue3学习（十四）--- vue3中css新特性
主要是用于修改很多vue常用的组件库（element, vant, AntDesigin），虽然配好了样式但是还是需要更改其他的样式就需要用到样式穿透。原因就是Scoped 搞的鬼 他在进行PostCss转化的时候把元素选择器默认放在了最后。上面提到第三条的规则 因为当前组件标签是没有这个属性标签的，所以无法修改样式。渲染出来的内容，因为它们被认为是父组件所持有并传递进来的。使用场景：在使用插槽组件的时候写样式，默认不会影响。转译实现的），达到样式私有化模块化的目的。对于使用了自定义注入名称的。
2023-10-27 14:53:24
1323
原创 vue3学习（十三）---全局定义事件及编写vue插件
之前我们使用vue2的时候使用会将loading、toast、axios等定义为全局属性方便后期使用。Vue3没有prototype属性，使用来绑定属性和事件。声明文件要写，不然TS无法正确类型 推导return `$${return ` $ ${ str } ` } } 声明文件 不然 TS 无法正确类型 推导。
2023-10-26 17:27:24
1013
原创 vue3学习（十二）--- 自定义指令
必须以的形式来命名本地自定义指令，以使得它们可以直接在模板中使用。<template>show">开关{{show}} ----- {{title}}</button>console.log("初始化====>");},// 在元素上做些操作console.log("初始化一次=======>");},console.log("初始化========>");},console.log("更新之前");},console.log("更新结束");},
2023-10-26 16:19:55
378
原创 vue3学习（十一）--- v-model
添加到组件v-model的修饰符将通过 modelModifiers prop 提供给组件。在下面的示例中，我们创建了一个组件，其中包含默认为空对象的 modelModifiers prop父组件<template>show">开关{{show}} ----- {{title}}</button>这里添加修饰符const title = ref('我是标题')</script><style></style>title?: string,默认写法: {
2023-10-18 15:26:54
309
原创 vue3学习（十）--- 依赖注入Provide 和 Inject
Mitt是一个体积极小的第三方消息发布/订阅式JavaScript库，React、Vue均可以使用。注意：你如果传递普通的值是不具有响应式的 需要通过ref reactive 添加响应式。如果不让后代组件修改数据可以在传递数据的时候加上readonly限制。这个原理其实是运用了JS设计模式之发布订阅模式，通过一个中间件来处理。的数据或方法，而在任何后代组件中，我们都可以使用。可以在祖先组件中指定我们想要提供给。main.ts 初始化。A组件派发（emit）
2023-10-17 17:07:54
362
原创 vue3学习（九）--- keep-alive缓存组件
有时候我们不希望组件被重新渲染影响使用体验；或者处于性能考虑，避免多次重复渲染降低性能。而是希望组件可以缓存下来,维持当前的状态。这时候就需要用到keep-alive组件。keep-alive接下来看一下keep-aliveonMountedkeep-alive。
2023-10-17 16:47:58
1040
原创 vue3学习（七）--- Teleport传送组件
Teleport>是一个内置组件，它可以将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去。Teleport是一种能够将我们的模板渲染至指定DOM节点，不受父级等属性影响，但data、prop数据依旧能够共用的技术。主要解决的问题 因为Teleport节点挂载在其他指定的DOM节点下，完全不受父级style样式影响。
2023-10-16 17:23:46
257
原创 vue3学习（六）--- 插槽slot
插槽就是：子组件中的提供给父组件使用的一个占位符，用表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的标签。
2023-10-16 15:12:09
226
原创 vue3学习（四）--- watch和watchEffect监听
由于是因为不是响应式数据才需要用函数返回的形式。第二种就是以数组的形式进行侦听，同样回调返回的结果也是以数组的形式展现的。立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行。里面属性时，由于不是响应式的原因直接侦听是没有效果的。对这种数据做了处理，用函数返回的形式对数据进行监听。这时候dom都已经更新完成了。就是在触发监听之前会调用一个函数可以处理你的逻辑。，只有在侦听源发生变化时才执行回调函数。，主要区别在于侦听器的更新时间，第一种就是可以分开创建多个。watch() 默认是。
2023-10-10 15:12:10
406
原创 vue3学习（三）--- computed计算属性
计算属性就是当依赖的属性的值发生变化的时候，才会触发他的更改，如果依赖的值，不发生变化的时候，使用的是缓存中的属性值。
2023-10-10 14:24:26
485
原创 vue3学习（二）--- ref和reactive
常用于es6的解构赋值操作，因为在对一个响应式对象直接解构时解构后的数据将不再有响应式，而使用toRefs和toRef 可以方便解决这一问题。接受一个内部值，返回一个响应式的、可更改的 ref 对象，此对象只有一个指向其内部值的属性 .value。在解构 reactive()得到对象的时候，将解构的数据变成响应式ref()类型.中定义数据默认不是响应式的数据，需要手动将数据转化为响应式的，这里就用到了。当然解构出来的数据依旧需要通过.value的形式来操作.属性的对象，只有对象的形式才能使用。
2023-10-09 16:58:24
776
原创 vue3学习（一）---新特性
patch flag 的强大之处在于，当你的 diff 算法走到 _createBlock 函数的时候，会忽略所有的静态节点，只对有标记的动态节点进行对比，而且在多层的嵌套下依然有效。尽管 JavaScript 做 Vdom 的对比已经非常的快，但是 patch flag 的出现还是让 Vue3 的 Vdom 的性能得到了很大的提升，尤其是在针对大组件的时候。我们发现创建动态 dom 元素的时候，Vdom 除了模拟出来了它的基本信息之外，还给它加了一个标记： 1 /* TEXT */
2023-10-09 16:57:49
710
原创 小程序webview与H5通信
文章目录官方介绍注意事项小程序内怎么调试web-view官方介绍https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html注意事项网页内iframe的域名也需要配置到域名白名单,webview只能加载配置过的域名(比如京东、天猫这种没配置的webview是无法显示的)每个页面只能有一个 web-view，web-view 会自动铺满整个页面，并覆盖其他组件,自定义顶部菜单，悬浮的都没用(cover-vie
2021-12-23 15:13:28
6615
原创 vue路由切换动画实现
第一种<template> <div id="app"> <transition :name="switchTransition"> <router-view/> </transition> <bar></bar> </div></template><script>// import Loading from '@/base/loadi
2021-04-14 13:46:07
5522
1
原创 清楚的理解module.exports与exports 和export与export default有什么区别
文章目录CommonJS模块规范exports 与 module.exportsES6模块规范export和export defaultexportexport default首先说明一下 CommonJS模块规范（node用的就是这个）是运行时加载，es6模块规范是编译时加载运行时加载 ---- 加载的时候引入对应的模块，整体引入，即使你只有几个函数，但也是整体模块都引入进来了编译时加载 ---- 编译的时候就知道需要引入模块中的那些函数，按需引入，在加载之前就已经确定好引入关系node
2021-04-08 16:50:58
519
原创 element-ui中el-table根据浏览器的缩放自适应宽度
最近有个pc端的项目，要求浏览器缩放的时候可以自适应宽度，但在使用element-ui中的el-table出现了点小问题，table-header、table-body的宽度是js动态计算的固定宽度在网上找了一些办法、包裹一层父元素并添加position:relative,子元素添加position:absolute;width:100%,亲测是可以达到自适应的效果的.但是！如果在table下面还需要编写页面，由于table的绝对定位，样式会乱.其实也简单，动态计算table的高度并赋值给父元素撑起
2020-10-21 16:15:53
18077
18
原创 如何给文件夹添加备注
目录首先将备注的选项显示出来显示出desktop.ini文件编辑desktop.ini文件开发过程中会使用很多英文来什么项目名称，但一旦项目多了的话很多相似的文件命名很容易混淆，给文件夹添加备注是一个很好的习惯，下面就说下我是如何来给文件夹进行备注的首先将备注的选项显示出来如图点击‘名称’----选择‘其他’—将备注勾选上–点击确定这时就出现备注的选项，但是是空值并没有编辑它的地方显示出desktop.ini文件desktop.ini文件是系统文件可以控制一些文件的属性信息首先 选择
2020-09-29 11:27:58
11513
1
原创 css相关面试知识点
1、盒子水平垂直居中的方案2、盒模型3、经典布局-圣杯布局4、经典布局-双飞翼布局5、使用css，让元素div消失在视野中6、z-index的工作原理及适用范围7、css 移动端自适应一个正方形8、如何做到rem自适应9、positon都有哪些属性？10、如何清除浮动11、什么是BFC 、哪些地方用到了BFC1、盒子水平垂直居中的方案这种需求在我项目中是非常常见的，刚开始的话我只用的xxxx，然后后期随着新技术xx的兴起，参考了一些资料，我开始用xxxx，虽然兼容性一般但确实也.
2020-06-16 11:09:55
368
原创 防抖和节流
防抖和节流是性能优化方面常用到的处理手段防抖原理事件相应函数在一段时间后才执行，如果在这段时间内再次调用，则重新计算执行时间，如果在一定时间没有重复执行就会执行相应函数应用场景scroll事件滚动触发搜索框查询表单验证按钮提交事件浏览器缩放 resize事件案例在我们实现搜索框查询数据的时候，每次键入都会去频繁请求数据，很多网络资源请求其实都是无意义的，我们可以利用防抖的方式进行处理：<input type="text" id="inf"><script&.
2020-06-03 09:34:11
211
原创 函数柯里化
如果想实现add(1)(2),执行的结果返回1+2,通常的方式是:function add(a){ return function(b){ return a+b; }}如果需要实现多个函数调用传参的话比如add(1)(2)(3)(4)....,那么按照上面的方式实现起来会很麻烦，这里就引入了函数柯里化的概念函数柯里化通过把一个多参函数转换成一系列嵌套的函数，每个函数依次接受一个参数，这就是函数柯里化。如果实现add(1)(2)(3)(4)....var add = func
2020-06-03 09:19:38
183
原创 输入 URL 到页面渲染的整个流程
一次完整的HTTP事务流程域名解析，浏览器根据 DNS 服务器得到域名的 IP 地址发起TCP三次握手建立TCP连接后向这个 IP 的机器发送 HTTP 请求服务器收到、处理并返回 HTTP 请求，浏览器得到HTML代码浏览器解析HTML代码，渲染页面DNS解析域名DNS 的作用就是通过域名查询到具体的 IP。因为 IP 存在数字和英文的组合（IPv6），很不利于人类记忆，所以就出现了域名。你可以把域名看成是某个 IP 的别名，DNS 就是去查询这个别名的真正名称是什么。在 TCP
2020-05-29 15:48:19
586
原创 网络协议相关---UDP和TCP
思考：UDP 与 TCP 的区别是什么？网络分层协议OSI七层模型OSI七层协议模型主要是：应用层（Application）、表示层（Presentation）、会话层（Session）、传输层（Transport）、网络层（Network）、数据链路层（Data Link）、物理层（Physical）。TCP/IP四层模型TCP/IP是一个四层的体系结构，主要包括：应用层、传输层、网际层和网络接口层。从实质上讲，只有上边三层，网络接口层没有什么具体的内容。五层体系结构五层体系结构包括：.
2020-05-29 14:52:53
326
原创 浏览器相关---安全防范
XSSCSRF点击劫持中间人攻击XSS思考：什么是 XSS 攻击？如何防范 XSS 攻击？什么是 CSP？XSS 简单点来说，就是攻击者想尽一切办法将可以执行的代码注入到网页中XSS 可以分为多种类型，但是总体上我认为分为两类：持久型和非持久型。持久型持久型也就是攻击的代码被服务端写入进数据库中，这种攻击危害性很大，因为如果网站访问量很大的话，就会导致大量正常访问页面的用户都受到攻击。举个例子，对于评论功能来说，就得防范持久型 XSS 攻击，因为我可以在评论中输入以下内容这.
2020-05-29 14:51:38
269
原创 浏览器相关--- 浏览器渲染原理
DOM树的形成CSSOM树的形成渲染树阻塞渲染重绘和回流浏览器渲染原理导读： 我们知道执行 JS 有一个 JS 引擎，那么执行渲染也有一个渲染引擎。同样，渲染引擎在不同的浏览器中也不是都相同的。比如在 Firefox 中叫做 Gecko，在 Chrome 和 Safari 中都是基于 WebKit 开发的。在这主要说下关于 WebKit 的这部分渲染引擎内容。浏览器接收到 HTML 文件并转换为 DOM 树当我们打开一个网页时，浏览器都会去请求对应的 HTML 文件。虽然平时我们写代.
2020-05-29 14:51:17
400
原创 浏览器相关 --- 浏览器缓存机制
浏览器缓存机制缓存可以说是性能优化中简单高效的一种优化方式了，它可以显著减少网络传输所带来的损耗。对于一个数据请求来说，可以分为发起网络请求、后端处理、浏览器响应三个步骤。浏览器缓存可以帮助我们在第一和第三步骤中优化性能。比如说直接使用缓存而不发起请求，或者发起了请求但后端存储的数据和前端一致，那么就没有必要再将数据回传回来，这样就减少了响应数据。接下来的内容中我们将通过以下几个部分来探讨浏览器缓存机制：缓存位置缓存策略实际场景应用缓存策略缓存位置从缓存位置上来说分为四种，并且各自有
2020-05-29 14:50:46
276
原创 js理解---webApi相关
BOMDOMBOMBOM（浏览器对象模型）是浏览器本身的一些信息的设置和获取，例如获取浏览器的宽度、高度，设置让浏览器跳转到哪个地址。window - - - 表示浏览器中打开的窗口navigator - - - 包含有关浏览器的信息screen - - - 包含有关客户端显示屏幕的信息location - - - 包含有关当前 URL 的信息history - - - 包含用户（在浏览器窗口中）访问过的 URL这些对象就是一堆非常简单粗暴的 API,可以去 MDN 或者 w3s.
2020-05-28 17:56:36
450
原创 js理解---数组相关
哪些方法改变原有数组，哪些方法返回新的数组哪些方法改变原有数组，哪些方法返回新的数组改变原数组：push()pop()shift()unshift()sort()reverse()splice()不改变原数组slice()concat()join()forEach()filter()map()find()findIndex()every()some()reduce()sort()描述sort() 方法用原地算法对数组的元素进行排序，并返回数组（.
2020-05-27 09:20:36
398
1
原创 js理解---Object对象常用方法
Obejct.assgin()Obejct.create()Object.defineProperty()Object.defineProperties()Object.keys()Object.values()Object.entries()Obejct.assgin()描述Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。语法Object.assign(target, ...sources)案例 const .
2020-05-21 13:55:12
882
原创 js理解---eventloop
进程和线程相信大家经常会听到 JS 是单线程执行的，但是你是否疑惑过什么是线程？讲到线程，那么肯定也得说一下进程。本质上来说，两个名词都是 CPU 工作时间片的一个描述。进程描述了 CPU 在运行指令及加载和保存上下文所需的时间，放在应用上来说就代表了一个程序。线程是进程中的更小单位，描述了执行一段指令所需的时间。(进程相当于一个程序，线程是更小的单位，描述了执行一段指令所需要的时间)把这些概念拿到浏览器中来说，当你打开一个 Tab 页时，其实就是创建了一个进程，一个进程中可以有多个线程，比如渲染
2020-05-12 18:15:10
216
1
原创 js理解---异步编程
并发（concurrency）和并行（parallelism）区别并发与并行的区别？并发是宏观概念，我分别有任务 A 和任务 B，在一段时间内通过任务间的切换完成了这两个任务，这种情况就可以称之为并发。并行是微观概念，假设 CPU 中存在两个核心，那么我就可以同时完成任务 A、B。同时完成多个任务的情况就可以称之为并行。回调函数什么是回调函数？回调函数有什么缺点？如何解决回调地狱问题？ajax(url, () => { // 处理逻辑})但是回调函数有一个致命的弱
2020-05-12 18:14:35
241
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人