- 博客(33)
- 收藏
- 关注
RSS订阅原创 【组件缓存相关生命周期函数】
当组件被激活时，会触发组件的onActivated( )生命周期函数;当组件被缓存时，会触 发组件的onDeactivated( )生命周期函数。这两个生命周期函数的语法格式如下。第一次被挂载完成的时候，会执行 MyLeft 组件的 onMounted(）和 onActivated()函数。控制台中输出了 MyLeft 组件被挂载和被激活的信息，说明当 MyLeft。接下来通过实际操作的方式演示缓存相关的生命周期函数的使用，具体步骤如下。
2024-06-21 10:48:23
326
原创 watch与watchEffect的区别
3.watchEffect：不用明确的指出监视的数据（函数中用到哪些属性，就监视哪些属性）watchEffect：教导主任叫老师看班上有谁在睡觉，在睡觉的就报告。1.都能监听响应式数据的变化，不同的是监听数据变化的方式不同。watch：教导主任叫老师看张三和李四是否在睡觉。watch与watchEffect的区别。2.watch：要明确指出监视的数据。
2024-06-14 11:46:22
308
原创 【定义动态组件】
7.创建src\components\DynamicComponents.vue文件,在该文件中导入并使用MyLeft和MyRighqt组件，实现单击按钮时动态切换组件效果。3.使用VS Code 编辑器打开D：\vue\chapter04\components-foundation目录。1.打开命令式提示符，切换到D：\vue\chapter04\04目录，在该目录下执行如下命令，创建项目。5.创建src\components\MyLeft.vue文件。
2024-06-07 11:02:21
211
原创 Vue Router （创建 挂载）
在上述代码中，从Vue-router中导入了createRouter（）createWebHashHistory（）两个函数，其中，createRouter（）函数用于创建路由实例对象，createWebHashHistory（）两个函数用于指定路由的工作模式为Hash模式，另外，如果需要指定路由工作模式为html5模式，可以将create WebHashHistory ()函数换成createWebHistory（）函数。在src目录下创建router.js文件作为模块，该文件中按照如下步骤进行操作。
2024-05-31 11:46:34
240
原创 【路由守卫】
为了在页面中将路由对应的组件显示出来，还要在App组件中定义路由视图。路由视图标签定义，该标签会被渲染成当前路由对应组件，另外，为了方便在不同组件之间切换，可以通过标签定义路由链接，该标签的to属性表示链接地址，与路由匹配规则中的path属性对应。在src\App.vue文件中定义路由视图以及Home组件和About组件路由链接，具体代码如下。
2024-05-23 15:47:18
530
原创 【VueRouter 的基本使用】
完成Vue Router 安装后，就可以使用路由了，路由的基本使用步骤，首先定义路由组件，以便使用Vue Router控制路由组件展示与 切换，接着定义路由链接和路由视图，以便告知路由组件渲染到哪个位置，然后再项目中创建路由模块，最后导入并挂载路由模块。为了在页面中将路由对应的组件显示出来，还要在App组件中定义路由视图。路由视图标签定义，该标签会被渲染成当前路由对应组件，另外，为了方便在不同组件之间切换，可以通过标签定义路由链接，该标签的to属性表示链接地址，与路由匹配规则中的path属性对应。
2024-05-17 11:13:57
305
原创 过渡和动画的使用方法
nextTick方法是Vuejs中一个非常有用的工具，可以确保在DOM更新之后执行特定的操作。结合过渡与动画效果，我们可以创建出更加生动和吸引人的用户界面。希望本文能够帮助你更好地理解nextTick方法是Vue.js中一个非常有用的工具，可以确保在DOM更新之后执行特定的操作。结合过渡与动画效果，我们可以创建出更加生动和吸引人的用户界面。希望本文能够帮助你更好地理解nextTick方法是Vuejs中一个非常有用的工具，可以确保在DOM。
2024-05-12 18:48:11
663
原创 跨级组件之间的数据传递
provide（注入名，注入值）provide（）函数可以接收2个参数，第1个参数是注入名，后代组件会通过注入名查找所需注入值，第2个参数值，值可以是任意类型，包括响应式数据，例如通过ref（）函数创建数据。对于父组件而言，如果想要为后代组件提供数据，需要使用provide（）函数，对于子组件而言，如果想要注入上层组件或整个应用提供数据，需要使用injection（）函数。在不使用set up 语法糖的情况下，provide（）函数必须在组件的set up （）函数中调用。
2024-04-29 16:42:57
169
原创 编程式导航
在vue中，页面有两种导航方式，分别是声明式导航和编程式导航。其中，使用标签定义导航链接的方式属于声明式导航；编程式导航是先通过 userRouter() 函数获取全局路由实例，然后通过调用全局路由实力实现导航。push()方法会向历史记录中添加一个新的记录，以编程方式导航到一个新的URL。当用户单击浏览器中的后退按钮时，会回退到之前的URL。//字符串路径//带有路径的对象//命名路由//带查询参数，如/user?id=1//带有Hash值，如/user#admin。
2024-04-26 10:17:54
441
原创 父向子组件传递数据（动态绑定）
上述代码中，init，height，weight，属性是子组件中声明的props，需要在子组件中自行添加height，weight这两个props，第二行代码用于通过v-bind实现将对象识别为表达式而不是字符串，第三行代码表示通过。init属性是子组件声明的【props】，第二行代码通过v-bind实现将数组识别为表达式而不是字符串，第三行代码表示为init属性进行动态赋值。上述代码中,init属性是子组件声明的props，通过v-bind实现将12识别为表达式而不是字符串，init属于动态赋值。
2024-04-19 11:16:21
309
原创 【动态绑定props】
上述代码中,init属性是子组件声明的props，通过v-bind实现将flase识别为表达式而不是字符串，通过isFlag属性进行动态赋值。init属性是子组件声明的props，通过v-bind绑定init属性。上述代码中,init属性是子组件声明的props，通过v-bind实现将12识别为表达式而不是字符串，init属于动态赋值。上述代码用于接收到的props数据输出到控制台，读者可以自行查看控制台的输出结果。
2024-04-12 11:44:09
192
原创 【Vue.js】列表渲染指令和条件渲染指令
v-if 和v-show 都用来决定每一个元素是否在页面上显示出来。v-show的原理是通过为元素添加或移除display：none样式来实现元素的显示与隐藏。需要频繁切换某个元素显示或隐藏状态时，使用v-show更节省性能开销，只需切换一次显示或隐藏状态时，v-if更合理。根据布尔值切换元素显示或隐藏状态，本质通过操作DOM元素来切换显示状态。1.使用v-for根据。2.使用v-for根据。3.使用v-for根据。4.使用v-for根据。
2024-04-07 11:47:36
426
原创 读取指定文件中的内容：fs.readFile
路径”,“格式utf8”,function(err,user){})参数1：必选参数，需要指定一个文件路径的字符串，表示文件的存放路径。参数3：可选参数，表示以什么格式写入文件内容，默认值是 utf8。err返回值为null，说明读取文件成功，err报错说明读取失败。参数3：必选参数，文件读取完成后，通过回调函数拿到读取的结果。参数2：可选参数，表示以什么编码格式来读取文件。参数1：必选参数，字符串，表示文件的路径。参数4：必选参数，文件写入完成后的回调函数。参数2：必选参数，表示要写入的内容。
2024-03-31 16:03:03
227
原创 Vue.js
Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。数据绑定最常见的形式就是使用 {{…
2024-03-22 15:01:29
209
1
原创 闭包的特性有哪些？有什么优点缺点？
其中一点上面已经有体现了，就是被引用的私有变量不能被销毁，增大了内存消耗，造成内存泄漏， 解决方法是可以在使用完变量后手动为它赋值为null；其次由于闭包涉及跨域访问，所以会导致性能损失，我们可以 通过把跨作用域变量存储在局部变量中，然后直接访问局部变量，来减轻对执行速度的影响。②在内存中维持一个变量，可以做缓存（但使用多了同时也是一 项缺点，消耗内存）①保护函数内的变量安全 ，实现封装，防止变量流入其 他环境发生命名冲突。②函数内部可以引用函数外部的参数和变量。③匿名自执行函数可以减少内存消耗。
2024-03-17 21:20:38
229
1
原创 创建数组获取数组与函数
/ new Array()关键字语法，不允许修改。// 原素组[下标] 获取到对于的值。// 最后一个下标会比长度-1。两种创建数组的写法|方式。
2024-03-08 15:20:06
105
1
原创 ----函数
数组实例的findIndex方法的用法与find方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。every()是对数组中每一项运行给定函数，如果该函数对每一项返回true,则返回true。some()是对数组中每一项运行给定函数，如果该函数对任一项返回true，则返回true。判断数组是否包含某个元素，不用return，不用回调函数，返回布尔值。原数组被“映射”成对应新数组，返回新数组，不改变原数组。返回满足条件的元素组成的数组，不改变原数组。
2024-01-10 08:41:47
373
原创 JS字符串（使用方法）
获取指定位置的字符编码：可以使用 charCodeAt() 方法获取指定位置的字符的 Unicode 编码。查找子串：可以使用 indexOf() 方法或者 includes() 方法来查找子串在字符串中的位置。提取子串：可以使用 substring()、slice() 或者 substr() 方法来提取子串。访问字符：可以使用方括号加索引或者 charAt() 方法来访问字符串中的特定字符。替换子串：可以使用 replace() 方法来替换字符串中的子串。
2023-12-10 18:03:10
346
1
原创 【无标题】
2、Symbol.for() 类似单例模式，首先会在全局搜索被登记的 Symbol 中是否有该字符串参数作为名称的 Symbol 值，如果有即返回该 Symbol 值，若没有则新建并返回一个以该字符串参数为名称的 Symbol 值，并登记在全局环境中供搜索。3、Symbol.keyFor() 返回一个已登记的 Symbol 类型值的 key ，用来检测该字符串参数作为名称的 Symbol 值是否已被登记。
2023-12-03 20:25:23
382
1
原创 2D 3D转换
三维移动（Translate3d）：使用 translate3d() 函数将元素在 3D 空间中进行移动。矩阵变换（Matrix3d）：使用 matrix3d() 函数来进行自定义的 3D 变换。三维旋转（Rotate3d）：使用 rotate3d() 函数对元素进行三维旋转变换。三维缩放（Scale3d）：使用 scale3d() 函数对元素进行三维缩放。旋转（Rotate）：使用 rotate() 函数对元素进行旋转。缩放（Scale）：使用 scale() 函数对元素进行缩放。
2023-11-19 22:39:58
36
1
原创 原型的5个特性
2.所有的引用类型都有一个__proto__属性，属性值是一个普通对象(原型链)4.所有的引用类型的__proto__指向它构造函数的prototype属性值。那么他会去它的__proto__（即它构造函数的prototype）去找。1.所有引用类型(数组、对象、函数)，都具有对象特性，及可自由扩展属性。3.所有的函数都有一个prototype属性,属性值是一个普通对象。5.当试图获取一个对象的某个属性时，如果这个对象本身没有这个属性，
2023-11-07 11:40:54
40
原创 css中的一些符号代表选择器
一、 空格（派生选择器）二、 +（相邻/下一个选择器）三、 ~（兄弟选择器 ）四、大于号（直接选择器）五、*（所有后代选择器）上面例子表示的是div里的所有span元素。
2023-10-26 14:39:30
366
原创 HTML定位
2.相对定位,不脱离文档，根据上一个内容，占空间，便宜之后仍然占据页面中的空间，其余元素不可顶替、首先寻找父级 如果有父级（position：relative）根据父级进行定位 会找到最近的父级。如果没有（position：relative）根据浏览器进行定位。1.固定定位，定位后不占原来页面位置，但存在覆盖现象。3.绝对定位,不存在脱离文档流 不占空间。
2023-10-22 19:27:54
31
1
原创 input属性
type=“text” 文本框 type="radio"单选 type=“checkbox”复选 type="select"pattern 正则验证[A-Za-z]{2} 也就是说前2个必须是[A-Za-z]里的.autocomplete：记录历史输入 （on为打开 off为关闭）有许多属性，比如说：id，value，style，name，type等等。属性：当前 input元素的名称。属性：输入框中提示的文字。属性：用于css引用。属性：设置css样式。readonly只读取。
2023-09-22 17:50:18
763
1
原创 清除浮动的8种方法
二、父级div定义overflow：hidden（只推荐没有使用postion或对overflow：hidden理解深的人使用，同时不能定义height.;四、父级给高度height（不推荐使用，这里定义高度给后期等带来不便）七、父级div定义为表格display：table（不推荐）一、给父级div定义伪类：after和zoom（最常用）五、父级div定义overflow：auto（不推荐）八、加“br”标签（不推荐，知道就好）六、父级随子级一起浮动（不推荐）
2023-09-15 14:05:26
49
原创 button
3.将button按钮初始样式取消掉，再进行设置button按钮width和height，border等。background：颜色;height：高度;2.把button按钮颜色设置成transparent在设置按钮边框。可以使用backgroud-color.可以使用width和height设置.1.制作一个button按钮将它原本样式取消。语法：“button{
2023-09-10 17:02:11
56
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人