- 博客(144)
- 收藏
- 关注
RSS订阅原创 Vue2和Vue3自定义指令的写法
/指令所在的dom元素插入到dom树中执行这个函数。//focus(el){ //el指令所在的dom。Vue.directive('自定义指令名',{// //el就是指令所在元素即文本框。const 自定义指令名={
2024-01-30 17:16:52
697
原创 Vue2项目中实现头像上传
腾讯云：产品--->存储--->对象存储--->开始使用--->存储桶列表--->创建存储桶---->配置管理--->基础配置---->基本信息--->存储桶信息，所属地域，安全管理，跨域访问CORS设置，访问管理，新建一个密钥，并保存该密钥的信息，SecretId，SecretKey。上传头像，首先要有一个可以存储头像的服务器，在腾讯云上注册账号，建一个可以上传头像的存储桶，将头像上传到此即可。将以上4个信息填上即可完成头上上传。
2024-01-30 17:11:39
953
原创 vue2和vue3的区别
语法不同（组合式api)、体积更小、按需引入、proxy实现响应式、diff优化，Vue3与ts配合等。Vue3 Vue基础语法 +Vue-router+vuex(pinia)+组件库。Vue2 响应式原理：Object.defineProperty。
2024-01-27 15:31:40
300
原创 js和ts的区别
ts有强大的类型系统，我们可以在编译期间发现错误，减少运行时的隐患，js能在浏览器中执行，浏览器只能执行js，ts要编译成js才能执行。js 是弱类型，ts是强类型，ts是js的超级。
2024-01-27 15:29:05
282
原创 vue2后台管理项目权限的分类
权限有3类：主页鉴权，访问权限，操作权限RBAC-Role Based Access Control基于角色的权限控制。
2024-01-26 09:21:34
859
原创 shallowRef与shallowReactive
shallowReactive：浅层响应->第一层属性变化会触发更新，不是第一层属性不会触发更新。shallowRef：浅层响应->整体重新赋新值才会触发更新，只改变单个属性不会触发更新。
2024-01-25 20:18:28
368
原创 toRef，toRefs函数的作用
注意：toRefs将多个数据转成响应式，只是确保第一层数据为响应式，如果是不同层的数据，仅第一层数据为响应式。toRefs:将多个数据转成响应式。toRef:将数据转成响应式。
2024-01-25 20:14:16
520
1
原创 Vue3全局组件和自定义指令
局部组件，就是vue的导入注册使用，只不过再setup()语法糖下，不需要注册组件。全局组件是在main.js中注册的，通过app实例.component创建。使用 App.vue。
2024-01-24 18:32:47
811
原创 pinia的使用
Store 是用定义的，它的第一个参数要求是一个独一无二的名字定义store仓库，其中只有state，getters，actions三个模块，并导出store实例，返回值是创建store实例的方法第一个参数，store的唯一标识， 类似于模块第二个参数， 对象描述仓库可以提供state，getters，actions返回值 是创建store实例的方法规范 userXXXXStore//1.定义用户仓库//defineStore() 创建store实例的函数。
2024-01-24 17:25:03
682
原创 vue3的watchEffect和watch其他参数
watch 会明确监听某一个响应数据，而 watchEffect 则是隐式的监听回调函数中响应数据。watch 在响应数据初始化时是不会执行回调函数的， watchEffect在响应数据初始化时就会立即执行回调函数。watch 和 watchEffect 都能监听响应式数据的变化，不同的是它们监听数据变化的方式不同。2、 不同点 ：watchEffect回调函数立即调用、对回调函数依赖的数据隐式监控、默认深度监控。1、 相同点 ：都可以对数据进行侦听。2 回调函数依赖的数据都会被监控。
2024-01-23 18:51:28
679
原创 Vue3的computed和watch
watch监控ref数据，深层次监控属性 ，必须手动开启deep:true，不能省略，省略相当于默认 false。watch监控reactive数据，假如需要深层次监控属性需要手动开启deep:true或省略。3.立刻调用 (第三个参数位一个对象，里面可放immediate:true)4.深度监听 (第三个参数位一个对象，里面可放 deep:true)第一个参数监听的数据构成的数组 第二个参数回调函数。第一个参数：监听的数据 第二个回调函数。基于现有的数据计算出新的数据。1 . 侦听一个数据。
2024-01-23 18:45:54
898
原创 Vue3的ref和reactive
不同点 : reactive只支持引用数据类型,ref支持基本和引用数据类型。ref通过.value获取数据，reactive不需要.value。2、想获取谁，就再谁的标签上添加ref，其ref=‘ref对象’使用reactive响应式数据的时候，不需要.value。reactive函数创建响应式数据，只支持引用数据类型。ref创建响应式引用数据类型低层依赖reactive。ref函数创建响应式数据，返回值是一个对象。1、创建ref对象，将该对象作为ref的值。获取ref创建数据的值要加上.value。
2024-01-22 20:21:45
1184
原创 Vue3setup()的非语法糖和语法糖的用法
script标签上写setup属性，不需要export default {} setup() 都可以省。setup() 组合式api的入口，执行的时机比beforCreate还早。创建每个属性或方法时也不需要return。创建多个数据就要return多个数据。导入某个组件时也不需要注册。
2024-01-22 20:13:35
1038
原创 渐进增强和优雅降级之间的不同
针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、 交互等改进和追加功能达到更好的用户体验。一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
2024-01-15 18:55:56
471
原创 元素水平垂直居中的5种方式
/消除行内块元素三像素问题。margin-left:-（自身宽度的一半）;margin-top:-(自身高度的一半）;将父元素设置为display:flex;来设置元素的垂直水平居中。将父元素设置为相对定位。将父元素设置为相对定位。将父元素设置为相对定位。子元素的宽高自己设置。
2024-01-15 15:37:29
1031
1
原创 路由的传参有哪些？
this.$router.push('/路径?参数1=值 & 参数2=值')组件中获取：this.$route.params.名字（id）组件中获取：this.$route.query.名字(id)组件中获取参数：this.$route.params.id。this.$router.push('/路径/ 参数')组件中获取参数：this.$route.query.id。完整写法：this.$router.push({参数1=值 & 参数2=值。规则： path：/路径/:名字（id）导航：1.声明式导航。
2024-01-03 20:25:23
853
原创 组件通信方式
组件通信方式有：vuex，ref，父子通信（父传子、子传父），兄弟通信(eventBus)， 祖先后代通信（依赖注入）子组件：子组件内通过：$emit('自定义事件名‘，参数1，参数2')父组件内：在子组件标签上设置自定义事件 @自定义事件名=" 函数"祖先组件：通过provide提供数据，导入 注册父组件。：父组件内：在子组件标签上设置自定义属性传递数据，子组件内：子组件通过props接收数据。子组件标签绑定单击事件触发父组件的方法。接受数据（使用数据）方，通过$on事件。父组件 导入 注册孙子组件。
2024-01-03 20:23:19
651
原创 什么是BFC，如何开启BFC？
BFC是元素自带的一个属性，默认是关闭的状态，一旦开启了，这个元素就会成为一个独立区块。3、开启BFC的元素，会包含住浮动元素，可以解决高度塌陷问题。可以解决高度塌陷问题，但宽度会丢失，且页面布局依然影响。可以解决高度塌陷问题，但宽度会丢失，且页面布局依然影响。具有一些特点，这些特点，可以帮助我们解决一些问题。可以解决高度塌陷，但宽度会丢失，且有三像素问题。1、开启BFC的元素，垂直方向外边距不会重叠。2、开启BFC的元素，不会被浮动元素覆盖。2、将元素转成行内块。副作用最小，建议使用。
2023-12-30 13:27:09
826
原创 vuex5大核心模块的使用
vuex 专门为vue.js设计的状态管理工具，管理多个组件共享的状态，适合中大型项目，项目组件关系比较简单，用vuex反而增加复杂度。
2023-12-29 18:55:59
655
原创 如何通过编程式导航传参
或写完整写法 this.$router.push(path:‘路径', query: {参数1:值,参数2:值,. . .}路由规则path -> /路径 组件获取 this. $route.query.id。组件获取参数: this. $route.params .id。参数多写成对象的形式。
2023-12-29 18:35:49
563
原创 BOM包含的内容
history.back() history.go(-1) 后退。history.forward() history.go(1) 前进。navigator.userAgent 记录了浏览器的版本与平台。location.reload(true) // true 强制刷新。定时器 setTimeout setInterval。JSON.parse() 字符串->对象。location 对象与地址相关的信息。BOM有window，有时可以省略。screen 屏幕。
2023-12-25 18:51:26
469
原创 单页应用(SPA)和多页应用(MPA)的区别
5.路由模式：SPA:可以使用 hash ，也可以使用 history。4.使用场景：SPA：对体验度和流畅度有较高要求的应用，不利于SEO。1.结构：SPA是一个主页面和许多模块的组件组成。单页应用(SPA)和多页应用(MPA)的区别?3.用户体验：SPA：页面切换快，体验好。MPA: 适用于对SEO要求较高的应用。2.刷新方式：SPA是页面局部刷新。6.首屏时间：SPA：首屏时间慢。MPA是由许多完整的页面组成。MPA：页面切换慢，体验不好。MPA:普通链接跳转。
2023-12-25 18:42:15
621
原创 .sync修饰符
封装弹框类的基础组件， visible属性true显示false隐藏。：属性=“数据“ + @update：属性="数据=$event".sync修饰符就是:属性名和@update:属性名合写。v-model中的value不具有语义，要使其有语义写成。:prop属性名，可以自定义，非固定为value。只需将App.vue中的子组件标签写成。:属性.sync='数据' 相当于。用.sync修饰符简化。.sync(有语义)
2023-12-22 08:23:01
1568
原创 ref和$refs,$nextTick异步更新
注意: $nextTick内的函数体一定是箭头函数，这样才能让函数内部的this指向Vue实例。之前只用document.querySelect('.box')获取的是整个页面中的盒子。⒉.获取时通过$refs获取this.$refs.chartRef 获取。数据改变---->dom更新，需要时间->等待dom更新完毕操作dom。利用ref 和$refs可以用于获取dom元素或组件实例。要获取谁的dom元素，就在谁的标签内加上 ref=’ ‘{ref属性值: ref属性所在的dom或组件}
2023-12-22 08:22:43
784
原创 v-model应用在组件上
v-model 原理v-model本质上是一个语法糖。例如应用在输入框上，就是 value属性 和 input事件 的合写。提供数据的双向绑定① 数据变，视图跟着变 :value② 视图变，数据跟着变 @input$event 用于在模板中，获取事件的形参。
2023-12-21 08:24:55
702
原创 vue的自定义指令注册使用
是在main.js中注册的指令在任何组件内都可以使用，指令在使用时不论是全局还是局部注册的，写成v-指令名。mounted（）时组件生命周期的挂载后阶段，此阶段可获得渲染后的dom元素。页面一上来就获取焦点，需要借助生命周期mounted，在不使用指令的情况下。指令是directives声明的 ，其中el就是指令所在的dom元素。要先用ref和$refs获取到dom元素，在执行下面代码。在main.js中注册，例如，焦点，字体大小，背景色等。是在某个组件内注册的指令，只能在这个组件内使用。
2023-12-21 08:24:18
950
原创 插槽的使用
希望组件的内容（结构）可定制,用slot插槽进行占位那个地方需要定制，就在那个地方用插槽：多个插槽 通过name具名插槽进行区别在slot标签内加上一个name属性如果不用包裹就会默认都是同一个内容v-slot:header 可以简写成 #header使用插槽的组件。
2023-12-20 08:26:09
847
原创 动态组件的使用
同时还要对其导入的组件进行注册，还要再其组件内定义一个name属性。在App.vue,使用下列代码代替导入组件当标签使用。动态组件是根据组件名渲染组件。
2023-12-20 08:25:00
539
原创 v-model的理解
下拉列表 : selected="数据"+@change="数据=$event.target.selected"文本框或密码框相当于 :value="数据"+@input="数据=$event.target.value"复选框 : checked="数据"+@change="数据=$event.target.checked": value="数据" + @input="数据=$event"3.用在组件实现父子数据双向绑定。（用在组件的value没有语义）1.用在表单元素或组件中。
2023-12-19 13:33:54
512
js进阶阶段的一些常见面试题
2023-12-26
基于Vue2的后台管理系统
2024-01-25
仿pc端淘宝首页及登录页
2023-12-21
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人