前端
文章平均质量分 84
星如雨グッ!(๑•̀ㅂ•́)و✧
这个作者很懒,什么都没留下…
展开
-
前端学习之路(6) npm详解
首先在一个空的文件夹下使用 npm init 初始化生成一个 package.json 文件,打开对里面的内容进行添加,如:下载 jQuery 和 bootstrap 的包文件使用命令进行安装即可。这个命令会识别刚刚自定义中需要安装的文件可以简写 为npm i。原创 2024-02-08 20:08:26 · 2127 阅读 · 0 评论 -
前端学习之路(5) vue样式穿透
vue的style中设置scoped属性后,组件实现样式私有化。但是该组件又使用的其他组件库时(vant,elementui,自定义等),该组件的style中的样式,优先级低,不生效,这个时候需要使用样式穿透(作用得更深)。原创 2024-02-03 17:32:58 · 1473 阅读 · 0 评论 -
前端学习之路(4) vue2和vue3的区别
作用域插槽:父组件模板的所有东西都会在父级作用域内编译;被激活:onActivated 被包含在中的组件,会多出两个生命周期钩子函数。切换:onDeactivated 比如从 A 组件,切换到 B 组件,A 组件消失时执行。销毁前:beforeDestroy -> onBeforeUnmount。更新前:beforeUpdate -> onBeforeUpdate。挂载前:beforeMount -> onBeforeMount。创建前:beforeCreate -> 使用setup()原创 2024-02-03 17:25:01 · 1129 阅读 · 0 评论 -
前端学习之路(3) JavaScript中的代理(Proxy)与反射(Reflect)
JavaScript中的Proxy与Reflect是ES6中引入的新特性,它们可以帮助我们更高效地控制对象。代理(Proxy)是一种设计模式,它允许我们在访问对象的同时,添加一些额外的操作。代理对象与被代理对象实现相同的接口,代理对象会接受并处理所有对被代理对象的访问请求。代理是对象通过一个代理对象来控制对原对象的读取、设置、调用及其他操作,并对这些操作进行预处理或附加操作,主要用于拦截对象反射(Reflection)是指程序可以在运行时获取、操作、修改它本身的状态或行为。原创 2024-02-03 17:18:33 · 1233 阅读 · 0 评论 -
前端学习之路(2) Vue3响应式模式设计原理
为什么要关系vue3的设计原理?了解vue3构建原理,将有助于开发者更快速上手Vue3;同时可以提高Vue调试技能,可以快速定位错误。原创 2024-02-03 16:58:53 · 674 阅读 · 0 评论 -
前端学习之路(1) Vue3核心源码解析源码目录结构
通过软件框架阅读源码可以对框架本身运行机制进行学习,更能了解框架的API设计、原理及流程、设计思路;我们要知其然,更知其所以然。Vue 3的源码相对于Vue 2版本有了较大程度的改变,采用Monorepo规范的目录结构,同时使用TypeScript作为开发语言(vue2在2022年4月底也更换TypeScript为开发语言 ),并添加了很多新的特性和优化。原创 2023-10-01 09:52:21 · 700 阅读 · 0 评论 -
JS defineProperty详解
Object.defineProperty():方法会在对象上直接定义个新的属性,或者修改现有的属性,并返回此对象。configurable:true|false 默认为false当值为true时属性可以被删除。writable:true|false 默认为false 当值为true时属性可以被修改。enumerable:true|false 该属性为true对象就可以枚举属性影响的有。object.keys 返回自身所有可枚举的属性的键名。in 遍历自身属性和可枚举的属性。原创 2023-10-01 09:21:52 · 541 阅读 · 0 评论 -
Vue3 reactive和ref详解
在大家使用vue3编写组件的时候,通常会把数据暴露到模板中使用:在我们修改响应式数据的值时,不会触发重新渲染再点击按钮之后,从控制台中可以看出数据已经改变,但是页面文字并没有做出相应的改变。因为扩展运算符(...)导致,响应式对象变成了一个普通对象。把一个普通对象暴露到模板中使用,是不会在渲染函数与响应式数据之间建立响应式联系的。return {...obj//等价于return {bar:'vue3'能否在副作用函数中,即使通过普通对象来访问属性值也能够建立响应式联系?原创 2023-10-01 09:09:47 · 3475 阅读 · 0 评论 -
Vue3父子组件数据传递
Vue2中,可以通过this来获取当前组件实例;Vue3中,在setup中无法通过this获取组件实例,console.log(this)打印出来的值是undefined。在Vue3中,getCurrentInstance()可以用来获取当前组件实例。可以看到,getCurrentInstance是一个function方法,getCurrentInstance()是一个对象,proxy也是一个对象。原创 2023-09-30 23:34:37 · 628 阅读 · 0 评论 -
CSRF攻击原理详解
CSRF定义: 跨站请求伪造(英语:Cross-site request forgery)是一种对网站的恶意利用,也被称为 one-click attack 或者 session riding,通常缩写为 CSRF 或者 XSRF, 是一种挟制用户在当前已登录的Web应用程序上执行非本意的操作的攻击方法。CSRF跨站点请求伪造(Cross—Site Request Forgery) 跟XSS攻击一样,存在巨大的危害性。原创 2023-09-17 09:34:38 · 483 阅读 · 0 评论 -
sessionStorage 、localStorage 和 cookie 之间的区别
都是保存在浏览器端,且同源的。原创 2023-09-17 09:15:18 · 197 阅读 · 0 评论 -
VUE3 Setup语法糖
通过defineProps指定当前 props 类型,获得上下文的props对象。</script>-- 或者 -->title: String, // 可以设置传来值的类型})</script>-- 或者 -->// 可以设置传来值的类型和默认值title: {})</script>-- 或者 -->title: [String,Number] // 可以设置传来值的多种类型})</script>-- 或者 --></script>原创 2023-08-26 08:42:53 · 656 阅读 · 0 评论 -
Pinia基础教程
Pinia 起始于 2019 年 11 月左右的一次实验,其目的是设计一个拥有组合式 API 的 Vue 状态管理库。从那时起,我们就倾向于同时支持 Vue 2 和 Vue 3,并且不强制要求开发者使用组合式 API,我们的初心至今没有改变。除了安装和 SSR 两章之外,其余章节中提到的 API 均支持 Vue 2 和 Vue 3。虽然本文档主要是面向 Vue 3 的用户,但在必要时会标注出 Vue 2 的内容,因此 Vue 2 和 Vue 3 的用户都可以阅读本文档。原创 2023-08-20 14:27:22 · 904 阅读 · 0 评论 -
SCSS的基本用法
声明变量的符号 $下面这张图左半部分是scss的语法,右半部分是编译后的css。(整篇文章皆是如此)原创 2023-08-13 16:43:19 · 1924 阅读 · 0 评论 -
VUE3组件
data() {return {count: 0</script><template>原创 2023-08-12 23:54:29 · 600 阅读 · 0 评论 -
JavaScript类
类是用于创建对象的模板。我们使用 class 关键字来创建一个类,类体在一对大括号 {} 中,我们可以在大括号 {} 中定义类成员的位置,如方法或构造函数。每个类中包含了一个特殊的方法 constructor(),它是类的构造函数,这种方法用于创建和初始化一个由 class 创建的对象。以上实例创建了一个类,名为 “Runoob”。类中初始化了两个属性: “name” 和 “url”。原创 2023-08-12 16:19:24 · 262 阅读 · 0 评论 -
JavaScript函数
JavaScript 使用关键字 function 定义函数。函数可以通过声明定义,也可以是一个表达式。原创 2023-08-12 15:49:28 · 177 阅读 · 0 评论 -
JavaScript 代码规范
所有的 JavaScript 项目适用同一种规范。原创 2023-08-12 15:32:08 · 270 阅读 · 0 评论 -
VUE3 动态路由
当定义像:userId这样的参数时,我们内部使用以下的正则([^/]+)(至少有一个字符不是斜杠)来从 URL 中提取参数。这很好用,除非你需要根据参数的内容来区分两个路由。想象一下,两个路由/:orderId和,两者会匹配完全相同的 URL,所以我们需要一种方法来区分它们。// 匹配 /o/3549// 匹配 /p/books但在某些情况下,我们并不想添加静态的/o/p部分。由于,orderId总是一个数字,而// /:orderId -> 仅匹配数字。原创 2023-08-12 15:10:07 · 815 阅读 · 0 评论 -
JS高阶特性
Array 对象用于在变量中存储多个值:第一个数组元素的索引值为 0,第二个索引值为 1,以此类推。更多有关 JavaScript Array 内容请参考。原创 2023-08-10 08:38:24 · 172 阅读 · 0 评论 -
如何防止CSRF攻击
CSRF(Cross-site request forgery)跨站请求伪造:攻击者诱导受害者进入第三方网站,在第三方网站中,向被攻击网站发送跨站请求。利用受害者在被攻击网站已经获取的注册凭证,绕过后台的用户验证,达到冒充用户对被攻击的网站执行某项操作的目的。受害者登录a.com,并保留了登录凭证(Cookie)。攻击者引诱受害者访问了b.com。b.com 向 a.com 发送了一个请求:a.com/act=xx。浏览器会默认携带a.com的Cookie。原创 2023-08-09 20:14:26 · 1912 阅读 · 0 评论 -
如何防止XSS攻击?
XSS 防范是后端 RD(研发人员)的责任,后端 RD 应该在所有用户提交数据的接口,对敏感字符进行转义,才能进行下一步操作。所有要插入到页面上的数据,都要通过一个敏感字符过滤函数的转义,过滤掉通用的敏感字符后,就可以插入到页面中。如果你还不能确定答案,那么可以带着这些问题向下看,我们将逐步拆解问题。在 HTML 中内嵌的文本中,恶意内容以 script 标签形成注入。在内联的 JavaScript 中,拼接的数据突破了原本的限制(字符串,变量,方法名等)。原创 2023-08-08 09:15:42 · 348 阅读 · 0 评论 -
VUE3 语法教程
刚开始学习 Vue,我们不推荐使用 vue-cli 命令行工具来创建项目,更简单的方式是直接在页面引入 vue.global.js 文件来测试学习。传递给 createApp 的选项用于配置根组件。在使用 mount() 挂载应用时,该组件被用作渲染的起点。一个简单的实例:createApp 的参数是根组件(HelloVueApp),在挂载应用时,该组件是渲染的起点。原创 2023-07-23 14:01:16 · 630 阅读 · 0 评论 -
TypeScript基础教程
语言层面:JavaScript和TypeScript都是ECMAScript(ECMA-262)的具体实现。执行环境层面:浏览器引擎和Node.js都能够直接运行JavaScript,但无法直接运行TypeScript。时序层面:TypeScript被真正执行前,会通过编译转换生成JavaScript,之后才能被解释执行。厂商层面:JavaScript由Netscape率先推出,现在主要由各大浏览器厂商实现。原创 2023-07-16 21:20:13 · 504 阅读 · 0 评论 -
AJAX基础教程
servlet页面代码String mess = "刘雨昕新歌未知计划上线啦!!!!html页面代码xhr.send();原创 2023-07-16 10:09:08 · 804 阅读 · 0 评论 -
JS基础教程
运算符也叫操作符,通过运算符可以对一个或多个值进行运算例如:typeof就是运算符,可以来获得一个值的类型。typeof a;可以帮助我们获得a的类型 它会将该值的类型以字符串的形式返回。原创 2023-07-15 21:11:16 · 1181 阅读 · 0 评论 -
CSS高级特性
CSS复合选择器:复合选择器是由两个或多个基础选择器通过不同的方式组合而成的1.1 标签指定式选择器:又称交集选择器,由两个选择器构成,其中第一个选择器为标记选择器,第二个为class选择器或id选择器。两个选择器之间不能有空格。1.2 后代选择器:后代选择器用来选择元素或元素组的后代,其写法就是把外层标记写在前面,内层标记写在后面,中间用空格分隔。原创 2023-07-15 18:10:39 · 851 阅读 · 0 评论 -
CSS基础特性
所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。下面的图片说明了盒子模型(Box Model):Margin(外边距) - 清除边框外的区域,外边距是透明的。Border(边框) - 围绕在内边距和内容外的边框。Padding(内边距) - 清除内容周围的区域,内边距是透明的。原创 2023-07-15 18:06:52 · 560 阅读 · 0 评论 -
HTML基础教程
<head></head><body><h1>这是标题 1</h1><h2>这是标题 2</h2><h3>这是标题 3</h3><h4>这是标题 4</h4><h5>这是标题 5</h5><h6>这是标题 6</h6></body><dt>项目 1</dt><dd>描述项目 1</dd><dt>项目 2</dt><dd>描述项目 2</dd>原创 2023-07-15 15:55:21 · 958 阅读 · 0 评论 -
CSS样式的三种引入方式及优先级
第一种行内式,样式只能对单个元素,且如果样式代码写了很多,标签会变得很长,代码不易阅读,不推荐使用;第二种内嵌式,把样式和页面接口分开,提高了代码的阅读性。但是,如果页面结构较复杂,css样式非常多,维护和开发会比较吃力。比如想看某个元素的样式,需要频繁的上下查看。页面结构不是很复杂,样式代码不是很多的情况下推荐使用。第三种外联式,支持外联多个css样式文件,是专业的引入方式,像浏览器搜到的一些网站,如CSDN官网,就是使用该方式。原创 2023-07-15 15:32:26 · 741 阅读 · 0 评论 -
CSS学习总结
基础知识CSS基础知识总结CSS 高级教程选择器的分组CSS选择器分为1.群组选择器 如:p, body, img, div{}2.兄弟选择器 如:p + p { color:#f00; }3.属性选择器 如: p[title] { color:#f00; }4.包含(后代)选择器 如:body ul li{}5.子元素选择器 如:div > p{}6.ID选择器 如:#myDiv{}7.类选择器 如:.class1{}8.伪元素选择器 如:E:first-l原创 2021-05-01 09:31:58 · 350 阅读 · 1 评论