- 博客(50)
- 收藏
- 关注
RSS订阅原创 Vue3 vue3对比vue2的部分变动
过滤器虽然这看起来很方便，但它需要一个自定义语法，打破大括号内表达式是 “只是 JavaScript” 的假设，这不仅有学习成本，而且有实现成本！建议用方法调用或计算属性去替换过滤器。keyCode作为 v-on 的修饰符，同时也不再支持。Vue 2.x 有许多全局 API 和配置。例如：注册全局组件、注册全局指令等。data选项应始终被声明为一个函数。3.x 实例 API (2.x 全局 API（子组件中声明自定义事件。过滤器（filter）
2025-08-04 16:00:00
519
原创 Vue3 Composition API的优势与新的组件
1.Options API存在的问题使用传统OptionsAPI中，新增或修改一个需求，就需要分别在data，methods，computed里修改。2.Composition API的优势我们可以更加优雅的组织我们的代码，函数。让相关功能的代码更加有序的组织在一起。
2025-08-04 10:00:00
1370
原创 Vue3 其它Composition API
1.shallowReactive：只是处理对象最外层属性的响应式（浅响应式）2.shallowRef：只处理基本数据类型的响应式，不进行对象的响应式处理。3.什么时候使用？(1).如果有一个对象数据，结构比较深，但变化只是外层属性变化===>shallowReactive。(2).如果有一个对象数据，后续功能不会修改该对象中的属性，而是生成新的对象来替换===>shallowRef。
2025-08-03 16:00:00
823
原创 Vue3 生命周期、自定义hook、toRef和toRefs
1.什么是hook？本质是一个函数，把setup函数中使用的Composition API进行了封装。2.hook类似于vue2.x中的mixin。3.自定义hook的优势：代码复用，让setup中的逻辑更清楚易懂。4.操作步骤：(1).在src文件夹下建立hook文件夹。(2).在hook文件夹中新建名字为use...的js文件，并在文件中编写需要的代码实现。//实现了获取光标点击处的坐标x:0,y:0})})})(3).在组件中按需引用自定义的hook。<template>
2025-08-03 10:00:00
615
1
原创 Vue3 计算属性与监视属性
vue2中的},vue3中的计算函数与Vue2.x中computed配置功能一致，但需要配置在setup内。setup(){//计算属性——简写})//计算属性——完整get(){},})
2025-08-02 16:00:00
1636
原创 Vue3 Vue3中的响应式原理
1.(1).对象类型：通过Object.defineProperty()对属性的读取、修改进行拦截（数据劫持）。(2).数组类型：通过重写更新数组的一系列方法来实现拦截。（对数组的变更方法进行了包裹）。get(){}set(){}2.存在问题：(1).新增属性、删除属性，界面不会更新。(2).直接通过下标修改数组，界面不会自动更新。
2025-08-01 20:00:00
828
原创 Vue3 setup、ref和reactive函数
1.理解：Vue3.0中一个新的配置项，值为一个函数。2.setup是所有Composition API(组合API)的“表演舞台”。3.组件中用到的：数据、方法等等，均要配置在setup中。4.setup函数的两种返回值：(1).若返回一个对象，则对象中的属性方法，在模板中均可以直接使用。（重点关注！(2).若返回一个渲染函数，则可以自定义渲染内容。（了解）5.注意：(1).尽量不要用Vue2.x配置混用。
2025-08-01 16:30:00
986
原创 TS 面向对象
(1). 定义对象的格式： 描述数据模型、API 响应格式、配置对象........等等，是开发中⽤的最多的场景。2. 提供基础实现：在抽象类中提供某些⽅法或为其提供基础实现，这样派⽣类就可以继承这些实现。(3). 扩展已有接⼝：⼀般⽤于扩展第三⽅库的类型， 这种特性在⼤型项⽬中可能会⽤到。4.共享代码和逻辑：当多个类需要共享部分代码时，抽象类可以避免代码重复。1. 定义通用接口：为⼀组相关的类定义通⽤的⾏为（⽅法或属性）时。(2). 类的契约：规定⼀个类需要实现哪些属性和⽅法。
2025-08-01 10:00:00
1655
原创 TS 常用类型与语法
any的含义是：任意类型，一旦将变量类型限制为any，那就意味着放弃了对该变量的类型检测，即可以赋值任意类型。注意：any类型的变量，可以赋值给任意类型的变量。
2025-07-31 15:28:08
857
原创 TS TypeScript基础
一、TypeScript简介在代码运⾏前进⾏检查，发现代码的错误或不合理之处，减⼩运⾏时出现异常的⼏率，此种检查叫『静态类型检查』，TypeScript 和核⼼就是『静态类型检查』，简⾔之就是把运⾏时的错误前置。一、TypeScript简介1. TypeScript 由微软开发，是基于JavaScript的⼀个扩展语⾔。包含了JavaScript的所有内容，即：TypeScript是JavaScript 的超集。增加了：静态类型检查、接⼝、 泛型等很多。
2025-07-31 10:04:07
724
原创 Less less中的混合和继承
mixin(@c:deeppink) // 当实参比形参少时，可以为实参命名，使参数准确传输。//传入的所有参数都会被@arguments变量收集。//根据需求选取方向，并会自动匹配基础属性。混合就是将一系列属性从一个规则集引入到另一个规则集的方式。//基础属性，用@_做占位符匹配任意方向。//less的混合可以给出默认参数。//不会被编译到css文件中。//会被编译到css文件中。//上下左右各方向的三角形。
2025-07-30 10:00:00
1944
原创 Less Less基础
:hover{ // 生成#box .inner:hover,不使用&则生成#box .inner :hover。LESS 嵌套遵循 “父级选择器包含子级选择器” 的逻辑，对应 HTML 中的父子元素关系。(1).使用@来声明一个变量：@pink：pink，@selector:#box;(3).作为选择器、属性名和url：使用@{selector}的形式。(1).以//开头的注释，不会被编译到css文件中。(2).以/**/包裹的注释会被编译到css文件中。(4).变量的延迟加载。
2025-07-29 16:45:00
401
原创 Vue 路由器的两种工作模式
URL的hash值是#号及其后面的内容，不会发送到服务器。Vue Router提供hash和history两种路由模式：hash模式带#号，兼容性好但不够美观；history模式URL简洁，但需要后端配合解决刷新404问题，兼容性稍差。开发中可根据美观需求和兼容性要求选择合适的路由模式。
2025-07-29 10:00:00
192
原创 Vue 路由守卫(导航守卫)
Vue路由守卫分为三类：全局守卫、独享守卫和组件内守卫。全局守卫包括beforeEach（路由切换前执行）和afterEach（路由切换后执行），用于权限控制和页面标题修改。独享守卫通过beforeEnter在特定路由配置中定义权限规则。组件内守卫包括beforeRouteEnter（进入组件时调用）和beforeRouteLeave（离开组件时调用），实现组件级的权限管理。守卫通过to.meta获取路由元信息判断权限，使用next()控制路由跳转。
2025-07-28 21:15:00
432
原创 Vue 路由配置项和参数
1.传递参数-- 跳转路由并携带query参数，to的字符串写法 -->-- 跳转路由并携带query参数，to的对象写法 -->query:{id:m.id,2.接收参数。
2025-07-28 16:00:00
798
原创 Vue 路由
1.理解：一个路由（route）就是一组映射关系（key-value），多个路由需要路由器（router）进行管理。2.前端路由：key存储路径，value是组件。
2025-07-28 10:00:00
807
原创 Vuex 模块化编码
1.目的：让代码更好维护，让多种数据分类更加明确。2.修改store.jsnamespaced:true,//开启命名空间getters: {namespaced:true,//开启命名空间modules: {})3.开启命名空间后，组件中读取state数据：//方式一：自己直接读取//方式二：借助mapState读取4. 开启命名空间后，组件中读取getters数据：//方式一：自己直接读取//方式二：借助mapGetters读取5.开启命名空间后，组件中调用dispatch。
2025-07-27 20:00:00
2353
原创 Vuex 四个map的使用方法
/靠mapActions生成：incrementOdd、incrementWait（对象形式）//靠mapActions生成：incrementOdd、incrementWait（数组形式）//借助mapState生成计算属性：sum、school、subject（对象写法）//借助mapState生成计算属性：sum、school、subject（数组写法）//靠mapMutations生成：increment、decrement（对象形式）方法：用于帮助我们映射state中的数据为计算属性。
2025-07-27 16:00:00
738
原创 Vuex 搭建vuex环境
在Vue中实现集中式状态（数据）管理的一个Vue插件，对Vue应用中多个组件的共享状态进行集中式管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。
2025-07-27 10:00:00
922
原创 vue 脚手架配置代理
在vue.config.js中添加如下配置：说明：1.有点：配置简单，请求资源时直接发给前端(8080)即可。2.缺点：不能配置多个代理，不能灵活的控制请求是否走代理。3.工作方式：若按照上述配置代理，当前请求了前端不存在的资源时，那么该请求会转发给服务器（优先匹配前端资源）。当public目录中有students时，会优先向前端请求资源。
2025-07-26 11:00:00
636
原创 Vue nextTick
1.语法：this.$nextTick(回调函数)2.作用：在下一次DOM更新结束后执行其指定的回调。3.什么时候用：当改变数据后要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行。})
2025-07-25 16:00:00
198
原创 Vue 消息订阅与发布
1.一种组件间通信的方式，适用于任意组件间通信。2.使用步骤：(1)安装pubsub：npm i pubsub-js(2).引入：import pubsub from 'pubsub-js'(3).接收数据：A组件想要接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身。methods(){mounted(){this.pubId= PubSub.subscribe('xxxx',this.demo) //订阅消息(4).提供数据：PubSub.publish('xxxx',data)
2025-07-25 11:00:00
371
原创 Vue 全局事件总线
1.一种组件间通信的方式，适用于任意组件间通信。2.安装全局事件总线：new Vue({Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm},})3.使用全局事件总线：(1)接收数据：A组件想要接收数据，则A组件中给$bus绑定自定义事件，事件的回调留在A组件自身。methods:{mounted(){(2).提供数据：this.$bus.$emit('xxxxx',data)
2025-07-25 00:15:00
607
原创 Vue 浏览器本地存储
(1).xxxxStorage.setItem('Key','value')：该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。(3).xxxxStorage.removeItem('Key')：该方法接受一个键名作为参数，并把该键名从存储中删除。(2).xxxxStorage.getItem('person')：该方法接受一个键名作为参数，返回键名对应的值。(4).xxxxStorage.clear()：该方法会清空存储中的所有数据。
2025-07-23 20:48:38
371
原创 Vue TodoList案例
组件化编码流程：(1).拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突。(2).实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用：(1.一个组件在用：放在组件自身即可。(2. 一些组件在用：放在他们共同的父组件上（状态提升）。(3).实现交互：从绑定事件开始。props适用于：(1).父组件 ==> 子组件 通信(2).子组件 ==> 父组件 通信（要求父先给子一个函数）
2025-07-23 19:14:50
488
原创 Vue 脚手架基础特性
1.被用来给元素或子组件注册引用信息（id的替代者）2.应用在html标签上获取的是真实DOM元素，用在组件标签上是组件实例对象3.使用方式：(1).打标识：<h1 ref="xxx">...</h1> 或 <School ref="xxx" />(2).获取：this.$refs.xxx。
2025-07-22 22:27:50
970
原创 Vue 分析脚手架
2.因为Vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用render函数接收到createElement函数去制定具体内容。(2).vue.runtime.xxx.js是运行版的Vue，只包含核心功能，没有模板解析器。(1).vue.js是完整版的Vue，包含核心功能+模板解析器。
2025-07-21 23:30:29
351
原创 Vue 生命周期
本文系统介绍了Vue.js的生命周期钩子函数，包括初始化、挂载、更新和销毁四个阶段的详细流程。重点阐述了常用的beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy和destroyed等8个钩子函数的特点和执行时机。文章通过具体代码示例展示了各阶段的实际应用场景，如mounted阶段适合进行定时器设置、数据请求等初始化操作，beforeDestroy阶段则应进行资源释放等清理工作。最后总结了生命周期流程图，并强调
2025-07-18 23:58:43
745
原创 Vue 自定义指令
需求：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。 函数式写法中指令什么时候会被调用？ 1.指令与元素成功绑定时（初始化时） 2.指令所在的模板重新解析时二、对象式写法 需求：定义一个v-fbind指令，和v-bind功能类似，但可以让其绑定的input元素默认获得焦点。 当使用函数式实现需求后，就会发现我们无法为input添加焦点。原因是在函数式写法中没有元素初
2025-07-17 18:24:50
698
原创 Vue 内部指令
此前使用过的指令：v-bind：单向绑定解析表达式，可简写为 :xxxv-model：双向数据绑定v-for：遍历数组/对象/字符串v-on：绑定事件监听，可简写为@xxxv-if：条件渲染(动态控制节点是否存在)v-else：条件渲染(动态控制节点是否存在)v-show：条件渲染(动态控制节点是否展示)
2025-07-17 00:20:43
370
原创 Vue 过滤器（Vue3已移除）
1.注册过滤器：Vue.filter(name,callback) 或 new Vue(filters:{})2.使用过滤器：{{xxx | 过滤器名}} 或 v-bind:属性 ="xxx | 过滤器名"定义：对要显示的数据进行特定格式化后再显示（适用于一些简单的逻辑处理）1.过滤器也可以接受额外参数，多个过滤器也可以串联。2.并没有改变原本的数据，是产生新的对应的数据。
2025-06-26 20:27:42
312
原创 Vue 收集建表数据
1.没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）若：<input type="radio"/>，则v-model收集的就是value值，且要给标签配置value值。若：<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。(1).v-model的初始值是非数组，那么收集的就是value组成的数组。number：输入字符串转为有效的数字。若：<input type="checkbox"/>
2025-06-26 18:35:07
522
原创 Vue 数据监视
Vue监视数据原理：1.vue会监视data中所有层次的数据2.如何检测对象中的数据？通过setter实现监视，且要在实例new Vue时就传入要检测的数据(1).对象中后追加的属性，Vue默认不做响应式处理(2).如需给后添加的属性做响应式，请使用如下API：Vue.set(target, propertyName/index, value)或3.如何检测数组中的数据？通过包裹数组更新元素的方法实现，本质就是做了两件事：(1).调试原生对应的方法对数组进行更新。
2025-06-26 16:56:41
917
原创 Vue 列表渲染
v-for指令1.用于展示列表数据2.语法：v-for="(item,index) int xxx" :key="yyy"3.可遍历：数组、对象、字符串（不常用）、指定次数（不常用）
2025-06-25 20:53:10
546
原创 Vue 条件渲染
如果想要添加一些元素且这些元素的出现和消失条件一致时，可以不用div进行封装，，而是用template进行封装。3.备注：使用v-if时，元素可能无法获取到，因为该元素可能被物理删除了，而使用v-show一定可以获取到。(2).v-else-if="表达式"(3).v-else="表达式"(1).v-if="表达式"特点：不展示的DOM元素进行逻辑删除。特点：不展示的DOM元素物理删除。写法：v-show="表达式"适用于：切换场景较低的场景。适用于：切换频率较高的场景。
2025-06-25 17:00:56
168
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人