- 博客(28)
- 收藏
- 关注
RSS订阅原创 DOM事件响应链——捕获阶段、目标阶段、冒泡阶段
当我们点击按钮之后，事件处理函数执行，打印结果，但可以发现，外面两层的div的事件也执行了，且顺序是在button之后。但有时候其实希望点击一个子元素后就执行这个事件处理函数，祖先元素即使有事件也不要执行，这时候我们就可以阻止事件冒泡——调用事件对象的stopPropagation()方法。由图可以看出，当事件触发后，会先来到document对象，看其有没有绑定事件，有的话放在一边，然后到HTML，看有没有事件，然后是body，根据DOM树的层级往下走，这是。阻止冒泡是阻止原本要在冒泡阶段执行的事件。
2023-11-09 20:19:23
145
原创 前端CSS让子元素在父元素水平居中的方法
元素水平垂直居中的方式四、子绝父相——两个方向的偏移量和transform。二、子绝父相——四个方向的偏移量和margin。三、子绝父相——两个方向的偏移量和外边距。五、弹性布局和margin。一、弹性布局——容器属性。
2023-11-09 19:22:20
170
原创 React Router路由的使用
在react-router-dom中引入RouterProvider和createBrowserRouter，createBrowserRouter函数中是一个数组，数组的元素都是对象，里面保存的是路由信息，最重要的两个属性是path和element。路由后面直接问号拼接；在指定路由的渲染组件时，可以导入组件后，将组件作为element的值，这种情况在组件较多时性能不太好，因为用户可能只浏览了其中几个，但却全部组件都导入去运行了一遍，就做了无用功，这时候可以使用懒加载，根据路由情况进行导入。
2023-11-07 20:08:35
423
原创 React传值和插槽
在Vue中需要在props选项中进行属性注册或defineProps()中声明，在react中，使用函数组件时，通过打印函数的 实参数组（arguments）可以看到运行这个函数组件时传的参数，第一个参数保存的就是我们传的值，所以我们可以用形参变了来接收传的值，然后在组件中使用。React也有类似与Vue的插槽，在组件双标签内写标签，在函数组件中用一个形参接收变量，然后进行使用。如果使用组件时既进行传值又有插槽内容，那这个形参中就既保存属性值也保存插槽内容children。
2023-11-02 20:20:59
321
原创 Vue的路由（router）
就这样看来，RouterLink的功能与a标签是差不多的，但他们之间有个区别，a标签的跳转会刷新页面，但RouterLink的不会，可以观察顶部的标签页是否转动。点击注册中的routerlink切换到login组件，地址栏中有传的值，this对象中“ $route ”保存了路由信息，query对象中能获取到传的值。端口号后面的为路由地址，默认为一个斜杠，根据router中的js文件知道，一个斜杠对应的组件是LoginView组件，显示该组件的页面内容。RouterLink是用于路由导航的组件。
2023-10-17 20:19:21
57
原创 Vue动态组件和缓存组件
在开发中经常会有切换选项卡的业务需求，实现的方法有很多种，其中动态组件也是一种方式。动态组件有一个属性“is”，属性值可以是一个字符串，但里面的内容与组件名字一致。也可以通过绑定变量的方式在数据源中进行取值，根据业务需要决定显示哪一个组件。点击切换的时候执行了3个生命周期函数：先是原本的组件的beforeUnmount、unmounted，然后才是切换到的那个组件的mounted。这种方式存在着一个问题，就是切换之后再切回来，原本输入的内容就不存在了。这时候就有了缓存组件，用以解决这个问题。
2023-10-16 19:07:49
138
原创 Vue组件的透传
父组件使用子组件时传递了数据，子组件也想将这个数据传给自己的子组件使用就需要在props中声明属性，再将这个属性值传给自己的子组件（孙组件），孙组件中又在props中声明属性，才能使用父组件的父组件传的数据。但这时候如果中间组件的层数多了，且传的值也有好多个，那中间的组件每一个都要声明属性，且有多少个属性就要声明多少个，就显得非常麻烦，而且如果中间的组件并不需要使用传的数据声明属性的操作就显得很多余。想要修改数据就得一个一个往上触发事件、绑定事件，过程复杂。二、往后代组件传值、后代组件想修改传的数据。
2023-10-13 20:28:26
506
原创 Vue组件——属性传值、插槽
在使用组件时，可以给组件添加属性，然后在定义组件的地方添加一个props属性，类型为数组，里面的元素是字符串，数据是属性名，props与data同级，这时候这个属性就成为了this的成员，所以在模板（template）中就可以像数据源的数据一样被访问，得到属性值。插槽分为两种：匿名插槽、具名插槽。造成这种现象的原因是vue3.x中，在创建vue实例时传递的对象中data是一个函数，而函数的运行每一次都是独立的，每一次使用这个组件时返回的是一个全新的数据对象，这样就避免了数据共享和副作用的问题。
2023-10-12 20:06:08
357
原创 Vue的事件绑定、条件渲染、循环渲染、计算样式
从上述示例的运行结果可以看出，第一次页面加载后methods中的方法和computed中的函数都运行了，不一样的在于当我们在页面中手动改变了其他使用到的数据源中的数据时，整个模板是重新加载了一遍的，然后方法就又执行了一次，但计算样式中的函数却没有执行。v-for和v-if写在一个标签中时，在vue2.0和vue3.0中都有各自的优先级，3.0版本运行时，v-if先运行，v-for后运行，2.0时反过来的。改变数据源中的数据，页面中也会改变，但页面中改变却不能改变数据源中的数据。1、单向绑定（响应式）
2023-10-10 20:28:08
396
1
原创 Vue的属性侦听器、生命周期函数、自定义指令、组件、全局与局部的指令和组件
自定义指令有等号data(){return { own:'自定义' }},zjy:{},name:{
2023-10-10 19:09:18
110
1
原创 Vue入门
v-bind：将数据绑定到HTML元素的属性上的，用法为“v-bind:属性名=‘变量名（取值）’”语法糖写法是“：”。v-on:click=“函数名”，语法糖写法“@click=‘函数名’”。在函数内部this.变量名，可以修改数据源。Vue中双大括号为插值表达式，因此刷大括号中可以写任何表达式，语句则是错误写法。Vue使用最多的版本是2xx和3xx。两者的使用方式有一定的区别。有3种绑定方式：变量、对象、数组。
2023-10-08 23:17:24
37
1
原创 搭建Vue项目
Vue是一款用于构建用户界面的JavaScript框架。它基于标准HTML、CSS和JavaScript构建，并提供了一套声明式的、组件化的编程模型，帮助开发者高效地开发用户界面。是前端开发中比较流行的框架之一。根据提示操作：进入项目文件位置、下载依赖、启动项目。1、把Vue的JavaScript代码库运行在HTML环境中。分为两种，一是webpack，一是Vite。下载Vite：npm create vite@latest。选择配置：项目名称、框架、语言。2、Vue代码环境集成。二、Vue的引入方式。
2023-10-08 22:13:55
40
1
原创 TypeScript的函数和类
这是因为用子类实例化对象的过程中，先是创建父类对象，然后在父类对象基础上追加子类成员得到子类对象，然后子类构造函数先执行，子类构造函数中super()再调用父类构造函数的执行。”，可选参数必须写在必选参数后面。在定义函数类型时，括号中为参数及其类型，多个参数用逗号隔开，括号后使用“=>”指定返回值类型。声明函数时，括号中为参数及其类型，多个参数用逗号隔开，括号后面使用“：”，指定返回值类型。继承：关键字extends，子类继承父类中的属性，一个子类只能有一个父类，一个父类可以有多个子类。
2023-09-01 19:21:05
171
1
原创 TS入门——变量声明、基础类型、类型断言、初识接口
在接口中进行对象的形状的描述后，后续由这个变量类型为这个接口时，对象中的属性必须按照接口的规则来定义。7、any：当我们在编程过程对于一个变量在后续的使用中的类型不确定时，就可以设为any类型，它表示任意类型，对变量进行操作后，返回的类型也是任意类型。4、数组：规定类型，后面跟着方括号表示为数组，后续给这个数组赋值时，里面的数据都是定义的类型，数组长度不限。声明的关键字依旧是var、let、const，声明变量时要指定类型，后续赋值的数据就得是这个类型的。类型断言有两种方式：一种是尖括号，一种是as语法。
2023-08-31 19:05:39
1077
原创 TS运行环境安装（node.js）
运行过程：编译：在命令提示窗输入命令“tsc xxx.ts”，然后ts的同级位置会出现一个js文件。这种方式有一个缺点是增加了工作量，当ts文件重新添加了一些代码，又要重新编译，然后才能运行。根据操作系统和系统位数，挑选下载，最好选后缀为msi的，这种几乎就是傻瓜式安装，中途可能就选一下安装路径，但尽量选择系统盘（一般为C盘），且目录名不要有中文或空格，避免后续操作出现问题。打开我们要编写TS代码的文件夹，在地址栏输入cmd打开命令提示窗输入命令"tsc --init"，安装tsconfig.js文件。
2023-08-31 16:31:59
2047
原创 ECMAScript（ES6）
数值的方法：isFinite（）判断是否为有限的，isNaN（）判断一个值是否为NaN，Number.parseInt()对参数进行取整操作，是从全局中移到局部的方法，减少全局方法的使用，用于全局变量的模块化。const：声明的变量只能进行一次赋值，后续不能再更改，但声明的变量是一个对象时，改变对象中的属性值是允许的，和改变原型对象的属性值是一样的，只要不改这个数据的格式，改变属性值是可以的。解构赋值的默认值：在模型解析时，左边的变量先初始化一个值，若数据源中没有，则为默认值，若有，则是数据源中的值。
2023-08-17 20:24:11
61
1
原创 JavaScript的Date对象、正则表达式
转义字符：用反斜杠开头（\），\t（制表符，相当于tab）、\r（行结束符，即回车）、\n（换行）、 \"（在双引号中再用双引号），或者对于一些有特殊意义的字符（$、*、/），使用时希望只看字符本身，可以在前面添加反斜杠。表示0个或1个s，s{n} 表示包含n个s的序列，s{n, m} 表示包含n个到m个s的序列，^s表示以s开头，s$表示以s结尾。元字符：\w（查找单词字符，包括数字、字母、下划线）、\W（非单词字符）、\d（）查找数字、\D（非数字）、\s（查找空白字符）、\S（非空白字符）。
2023-08-16 21:37:08
67
1
原创 JavaScript的遍历、数组方法、字符串方法、对象方法
接收三个参数，第一个是要操作的对象，第二个是要定义或修改的属性的名称，第三个是一个描述符对象，用于定义或修改属性的特性。forEach()：相当于是一种对数组的遍历，forEach的参数是一个回调函数，回调函数的参数有三个，第一个为数组元素，第二个为数组下标，第三个为进行遍历的数组，没有返回值。some()：参数为回调函数，返回值是布尔值，与every相反，some方法是判断数组中的元素是否由满足条件的，有一个满足则返回true。对于对象的遍历，使用for-in，且遍历时原型是上的也会进行遍历。
2023-08-15 20:37:05
508
原创 JavaScript的原型链、数组的相关方法
每一个对象都有一个原型属性（prototype），指向另一个对象，另一个对象也有原型属性指向更高一级的对象，直到最后一个，指向Object，值为null，这是因为Object是所有对象的父类，所以原型链终点为Object.prototype。原数组改变，但长度不会改变 第一个参数为要粘贴到的目标位置索引，第二个为复制的起始位置，第三个为复制的结束位置，后两个可不写，默认为0和最后一个,只粘贴一遍，后续差的元素是本来这个下标位置的元素。不同的是push在数组的末尾添加，unshift在数组的开头添加。
2023-08-14 20:03:51
138
原创 JavaScript的this、new、prototype
this指的是一个对象，而this关键字所在的函数被哪个对象调用，this就是哪个对象。如果没有调用者，则为window对象。下方为在打印全局下的this的结果，为window对象，像平时定义的变量和函数就是作为window对象的成员保存起来的。上述示例为网上流传得比较广的JavaScript中this执向的例题。首先是通过obj去调用成员method的函数。
2023-08-09 20:10:37
107
1
原创 JavaScript函数闭包、相关调用
闭包（closure），从名字可以看出，它是闭合的，所以闭包是有作用域的代码块。而与作用域息息相关的则是函数，所以本质上来说，所有函数函数都是闭包。闭包是嵌套在一个函数中的，通过调用外面的函数来调用这个闭包。闭包的基本操作就是保存数据和访问数据，由此得出有以下几个特点：1、函数的调用运行每一次都是独立的，可以用来保存变量。2、函数有作用域，在实际设计中就可以将其模块化。下述示例中利用函数闭包，分为两个模块，一个进行乘法运算，一个进行加法运算。3、函数在A作用域生成，在B作用域调用，最后代码运行在生成域A。
2023-08-08 20:17:52
231
1
原创 JavaScript的语句
看switch表达式中的值与下面哪个case后面的值匹配，匹配上之后则执行该case后面的代码块，按照正常的结构来说，不光执行该case后面的代码块，还执行该case后面的所有case的代码块。从上面的示例代码中可以看出，初始的i的值是不满足while的条件的，但控制台打印结果中还是有“10hello”，这就提现了do代码块在任何情况下都会运行一次。从上述的例子中可以看出，代码的结构数据是几乎一样的，只有if的代码块不一样，一个是break，一个是continue，两者的运行结构是不一样的。
2023-08-04 20:02:44
24
1
原创 JavaScript的对象、数组和函数
函数的好处是一处定义，处处调用。3、4行仔细看就会发现方括号里面的值虽然都是name，但一个有引号，一个没有引号，这是因为在用方括号对对象进行操作时，里面的键名都是用引号引起来的，这也就表示键值对中键名的数据类型是字符串。对于对象的成员的操作除了点语法，还有一种操作符“[]”，这种方法不常用，但它的某些功能是不可替代的，常常是一些业务的技术瓶颈的解决方案。上述例子中可以看出，数组中可以放不同类型的数据，包括对象，要访问数组中的对象的某一个值，就先用下标找到该对象，然后再用点语法找到某个键对应的值。
2023-08-04 19:55:02
27
1
原创 JavaScript的入门
JavaScript是一种操作网页的脚本语法，语言标准是ECMAScript，简称ES。JavaScript与Java的关系，就像雷锋和雷峰塔，是没有关系的。
2023-08-02 18:27:51
52
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人