- 博客(669)
- 资源 (3)
- 收藏
- 关注
原创 vue3【详解】 vue3 比 vue2 快的原因
vue3使用的 Proxy 在处理属性的读取和写入时,比vue2使用的defineProperty 有更好的性能(速度加倍的同时,内存还能减半!
2024-04-19 11:32:22 903
原创 vue3【实用教程】侦听器 watch,自动侦听 watchEffect(),$watch,手动停止侦听器
侦听明确指定的状态变化执行回调。
2024-04-18 21:21:58 1170 1
原创 vue3【实用教程】v-model(含给 v-model 添加参数,绑定多个 v-model ,v-model 的内置修饰符,自定义 v-model 的修饰符等)
以为例:自动将第一个字母转为大写具体实现详见注释-- 选项式 API --> < script > export default {props : {modelValue : String , // 新增了名 modelModifiers 的 prop,用于获取自定义的修饰符 modelModifiers : {
2024-04-18 16:58:47 1580
原创 vue3【2024版】开发环境搭建(含官网和nvm下载切换最新版node,修改node下载源,创建项目,启动项目,安装vscode插件Vue - Official)
按安装导航,一直 next 即可。node -v。
2024-04-17 17:55:37 228
原创 v-for 要用 key,且不能是 index和 random 随机数
v-for 要用 key 的原因可详见 vue 原理中的其核心要领在于,diff 算法中通过 tag 和 key 来判断是否是同一个节点,使用 key 能减少渲染次数,提升渲染性能。
2024-04-15 14:53:11 626
原创 vue-router 原理【详解】hash模式 vs H5 history 模式
在不刷新页面的前提下,根据 URL 中的hash值,渲染对应的页面。
2024-04-14 11:56:56 299
原创 vue 原理【详解】MVVM、响应式、模板编译、虚拟节点 vDom、diff 算法
vue 的更新过程,是一种异步渲染,即并不是每一点 data 的改变都会立马触发视图更新, 而是会汇总 data 的修改,再一次性更新视图,这样可以减少 DOM 的操作次数,提高性能。vue 文件中支持指令、插值、JS 表达式,还能实现判断、循环,大大便捷了开发,但无法在浏览器中渲染,需要先将其转换成 JS 代码才行,这个转换的过程,即模板编译。vue 的响应式机制是在vue 实例初始化时建立的,即 data 函数中定义的变量,在页面初始化后,都具有响应式。1000 个节点,要计算1亿次,算法不可用!
2024-04-12 16:13:44 659
原创 vue 【详解】MVVM 理解
M —— Model 模型,即数据V —— View 视图,即DOM渲染VM —— ViewModel 视图模型,用于实现Model和View的通信,即数据改变驱动视图渲染,监听视图事件修改数据
2024-03-28 20:52:16 104
原创 vue2 插槽(默认插槽 slot 、具名插槽 v-slot 、作用域插槽 slot-scope -- 插槽传值 )
插槽:用于在子组件的指定位置插入指定内容,类似在电梯里挂的若干广告显示屏,可以给指定的位置传入指定的广告。
2024-03-22 16:42:47 422
原创 js 实现动画的两种方案对比:setTimeout vs RAF (requestAnimationFrame)
/ 4s 把宽度从 20px 变为 620px ,即增加 600px,每次需变化 600 px / (60帧/秒 *4秒) = 15px/帧。// 60帧/s 才能确保动画流畅, 即每 1000/60 = 16.7 ms 执行一次动画。// 得出最终动画效果为 每 16.7 ms , 宽度增加15px。// 时间需要自己控制。// 时间不用自己控制。
2024-03-21 11:31:49 345
原创 js【详解】ajax (含XMLHttpRequest、 同源策略、跨域、JSONP)
借助 script 标签 向目标服务器加载到 jsonp.js 文件,执行 callback 函数,因本地已定义了 callback 函数,便会触发本地 js 代码的执行,获取到 jsonp.js 文件中的数据,从而实现了跨域。服务器设置 http header,即服务器端将指定网址设置为白名单,允许它以指定的方法进行跨域访问。JSONP 实现跨域的过程:借助 script 标签没有同源策略限制的特点,向跨域的目标服务器加载到需要的数据。所有的跨域,都必须经过 server 端允许和配合。
2024-03-13 17:28:28 1048
原创 js【详解】事件
给 DOM 节点绑定事件推荐使用 addEventListener 函数第一个参数:事件名称第二个参数:事件处理函数(第一个参数为 event)第三个参数:true 采用捕获法来处理事件false 【推荐】采用冒泡法来处理事件let div1= document.getElementById('div1');div1.addEventListener('click', function(event){ alert('div1_clicked!');}, false);
2024-03-10 23:26:59 490
原创 js【详解】BOM
浏览器对象模型 (Browser obiect Mode 简称 BOM)浏览器对象即 window,调用window对象的属性和方法时,可以省略window。
2024-03-10 21:38:24 398
原创 js 获取浏览器相关的宽高尺寸
屏幕分辨率的高: window.screen.height屏幕分辨率的宽: window.screen.width屏幕可用工作区高度: window.screen.availHeight屏幕可用工作区宽度: window.screen.availWidth。
2024-03-10 20:57:40 389
原创 js【深度解析】代码的执行顺序
我们将每一句要执行的 js 代码当做一个任务,则 js 代码可以按照其执行方式的不同,按下图分类微任务:被放入微任务队列(micro task queue)中等待执行的代码因为Promise、async 、await 都是 ES6 语法定义的宏任务:被放入 Web APIs 中等待执行的代码因为 setTimeout 、setInterval 都是浏览器定义的。
2024-03-09 22:59:25 542
原创 js【详解】Promise
Promise 是一种异步编程的解决方案,本身是一个构造函数自带resolve,reject,all 等方法,其原型上还有then、catch等方法。
2024-03-09 10:43:57 1006
原创 js 【详解】异步
将只能嵌套的回调函数,变成了可串联的,更易阅读和维护!为了解决回调地狱的问题,诞生了 Promise。但回调函数实现异步的方式,容易形成。
2024-03-09 08:25:13 419
原创 js【详解】bind()、call()、apply()( 含手写 bind,手写 call,手写 apply )
必备知识点:js 【详解】函数中的 this 指向_js function this-CSDN博客。
2024-03-08 10:16:02 499
原创 vue2【详解】生命周期(含父子组件的生命周期顺序)
1——beforeCreate:在内存中创建出vue实例,数据观测 (data observer) 和 event/watcher 事件配置还没调用(data 和 methods 属性还没初始化)【执行数据观测 (data observer) 和 event/watcher 事件配置】2——created:实例已完成数据观测 (data observer),property 和方法的运算,watch/event 事件回调。
2024-03-08 06:57:59 1042
原创 webpack 和 babel 实用教程【前端必备】
开发环境的前端代码重在易于阅读和编写,生产环境的前端代码追求更快地运行,所以需要通过前端构建工具将开发环境的前端代码通过混淆压缩打包构建成生产环境的前端代码。webpack 是众多前端构建工具的一种,主要实现以下功能:压缩代码将JS、CSS代码混淆压缩,让代码体积更小,加载更快编译语法将 Less、Sass、ES6、TypeScript 等浏览器可能不兼容的语法编译成浏览器支持的语法,如使用Babel编译ES6语法。
2024-03-05 14:20:26 384
原创 git 常用命令【编程必备】
若代码有改动,会列出被修改的文件,新增的文件,删除的文件等文件变动的信息。代码拉取方式有 SSH 和 https 两种。指定提交的标识符可通过 git log 查看。将另一个分支的代码,合并到当前分支。查看指定文件的代码改动的具体内容。查看所有的代码改动的具体内容。同时会创建一条代码提交的记录。会展示每次代码提交的标识符。用于识别是谁提交的代码。
2024-03-05 09:54:58 347
原创 https【详解】与http的区别,对称加密,非对称加密,证书,解析流程图
https 同时使用了对称加密和非对称加密,之所以没有全部使用非对称加密,是因为非对称加密的运算更加复杂,成本更高。在传输过程中,若有中间人攻击,伪造了 keyA 和 keyB 与客户端交互,也会变得不安全,所以又增加了证书校验。免费的证书容易被伪造,不推荐使用,建议购买使用第三方(如阿里云)的付费证书。加密用 keyA ,解密需要用另一个密钥 keyB。加密和解密都用同一个 key。
2024-03-04 16:03:13 351
原创 http【详解】状态码,方法,接口设计 —— RestfuI API,头部 —— headers,缓存
使用场景:限定客户端必须带有指定的 Headers 信息才能访问服务器,否则视为非法访问// axios 中自定义 Headers 的方法headers:{'自定义的请求头key':'自定义的请求头的值'}第一次请求时,服务器返回资源和 Last-Modified后续请求,在请求头中会带上 If-Modified-Since (值为上次服务器返回的 Last-Modified 值)服务器将对比请求头中的 If-Modified-Since 值和服务器上资源的最后修改时间。
2024-03-04 15:09:34 1202
dragVerifyImgChip.vue
2020-06-30
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人