javaltt的博客

原创 Pinia的使用

Pinia还支持异步操作，并且提供了一些常用的插件和中间件，如Devtools插件、LocalStorage插件和Vuex插件等，这些插件和中间件可以帮助我们更好地管理和调试状态。总的来说，Pinia是一款易于使用和扩展的状态管理库，它的出现充分体现了Vue.js生态系统的活力和创新性，为我们的开发工作带来了很大的方便和便利。Pinia的使用非常简单，只需通过创建一个存储库实例来定义状态和操作即可。Pinia是一种基于Vue.js的状态管理库，它的出现主要是为了解决Vuex在使用上存在的一些问题。

原创 typescript学习

因为不知道会传入那种泛型类型所以不能随意操作属性和方法 可以使用接口的方式以extends的方式定义。用 as 关键字,定义确定类型进行使用属性和方法，也可以不使用关键字进行使用typeof进行判断。泛型关键字 < T > 在函数形参括号前面使用, 作用是定义获取类型并可以用来指定类型。函数使用 interface 传入指定类型, 返回值也需要返回指定类型。元组(指定只能传入规定类型的值)readonly 是指不能改变的。用enum关键字，定义枚举。

原创 记录uniapp无法获取$ref中的值

记录uniapp无法获取$ref中的值

原创 解决u-list滚动时会卡顿几次的问题

解决u-list滚动时的问题

原创 处理数据经常会报数据格式JSON----XXXX----0的这种问题

处理数据经常会报数据格式JSON----XXXX----0的这种问题

原创 uniapp动态获取高度问题

记录uniapp动态获取高度问题问题:使用this.$refs.xxxx.el无法读取解决方案:`uni.getSystemInfo({ success: function (res) { // select('.类名') uni.createSelectorQuery().select('.element').boundingClientRect(data => { // data是当前元素的高度 _this.ulistHeight = (dat

原创 BUG 记录uniapp引入vant组件 出现的this.$options()不是一个方法报错

找到behavior.jsvar _thisKaTeX parse error: Can't use function '$' in math mode at position 16: options = this.$̲options(), …options.computed;改为if (!computed) {return} else {var _thisKaTeX parse error: Can't use function '$' in math mode at position

原创 vue3封装全局指令,及图片懒加载

封装指令图片懒加载/** * 插件形式封装全局指令 */// 引入视口函数import { useIntersectionObserver } from '@vueuse/core'// 导入加载失败显示的图片import defaltImg from '@/assets/images/200.png'// 导入图片加载失败动画// import loading from '@/assets/images/loading.gif'export default { install

原创 注册全局组件优化

// vue3注册全局组件import Skeleton from './Skeleton'import XtxSlider from './Slider'// 优化注册const cps = [Skeleton, XtxSlider]// 导出全局组件export default { install (app) { // 组件名.name是组件的唯一标识 // app.component(Skeleton.name, Skeleton) // app.compone

原创 vue3实现滚动页面显示隐藏

1）安装@vueuse/core 包，它封装了常见的一些交互逻辑npm i @vueuse/core@5.0.32）在吸顶导航中使用 setup () { // onMounted(() => { // usewindowScroll() =>干啥了? 1.注册滚动事件 2.提供滚动高度(响应式) const { y } = useWindowScroll() // console.log(x, y) // }) return { y }

原创 axios在vue3中的封装处理

Axios封装处理本节目标: 基于axios封装一个请求模块，调用接口时使用1）安装 axiosnpm i axios2）新建 src/utils/request.js 模块// 封装全局request请求的方法import axios from 'axios'// vueximport store from '@/store'// 导入路由实例import router from '@/router'// baseURL 超时时间配置const instance = axi

原创 vue-router 知识点

vue-router是什么?vue Router 是Vue.js官方的路由管理器,让构建单页面变的易如反掌.路由是什么?路由就是可以理解为指向,就是我在页面上点击一个按钮需要跳转到对应的页面vue Router 三个单词的意思(route, routes, router)route: 首先它是一个单数,译为路由,我们可以理解为单个路由或者某个路由route 就是一个路由或某个路由routes: 它是一个复数,表示多个集合才能为复数,我们可以理解为多个路由的集合,js中表示多种不同状态的集

原创 自定义表单验证逻辑

自定义表单验证逻辑有时我们需要使用自定义的表单校验例如不能同名需求1不能有重复的名字 // 简化数据 this.orgList = res.data.map(item => ({ pid: item.pid, name: item.name.trim(), code: item.code, id: item.id })) // 在data中和return同级 // 定义一个自定义验证

原创 在写项目时如何重置表单element-ui + vue

在写项目时如何重置表单element-ui + vueelement-ui表单在el-dialog组件里关闭、取消、确认都需要步骤：1、在子组件中调用element-ui表单中提供了resetFields()方法resetForm() { // 2.重置表单 this.$refs.formData.resetFields() },2、在父组件中创建一个方法// @close关闭时的回调<el-dialog title="新增员工" :visible

原创 slot-scope插槽搭配filters的使用

slot-scope插槽搭配filters的使用先来定义一个插槽 <el-table-column label="聘用形式"> <template slot-scope="scope"> 形式:{{ scope.row.formOfEmployment }} </template> </el-table-column>定义filtersfilters: { //

原创 vue3.0基础(二)

vue3基础(二)了解响应式数据原理(数据劫持)vue2.0 如何实现双向绑定原理vue3.0 如何实现双向绑定原理组合API-ref函数做个小案例试试组合API-computed函数组合API-watch函数组合API-ref属性组合API-父子通讯依赖注入补充-mixins语法了解响应式数据原理(数据劫持)1,响应式数据,数据变化的时候去驱动视图的更新2.需要去监听数据的变化,数据劫持,数据代理,去做额外的事情3.我们需要一个特殊对象,能够在数据变化的时候去做别的事情

原创 vue3.0基础(一)

vue3.0基础选项API和组合API组合API-setup函数组合API的生命周期(DOM渲染前后)组合API-reactive函数组合API-toRef函数组合API-toRefs函数// 项目入口文件// vue2.0 导入App组件,导入Vue构造函数,使用vue初始化vue实例 使用render 使用App组件 挂载#App容器下// vue3.0 导入App组件,按需从vue导入createApp的函数使用这个函数创建应用实例,挂载#app容器下// 基于创建好的ap

原创 vue_组件插槽的使用

vue_组件插槽的使用不啰嗦,先教大家一个插槽的口诀:组件内使用占位,使用组件时传入具体标签插入,如果外面不给传想给个默认内容,在slot标签中书写默认内容,用来接收不到传参时显示来喽来喽ヾ(≧▽≦*)o???????????? 具名插槽// 使用场景 // 一个组件内有多个以上需要外部传标签的地方(需要插槽的地方)// <slot>有一个特殊的属性:name 作用:给插槽命名????插槽模板(base-layout)<div class="container"&gt

原创 计算属性的get,set的方法

原创 基础js-padStart()方法

基础js-padStart()方法第一个值是字符串的长度,第二个是要加的字符

原创 vue之v-on事件对象传参不传参问题

v-on事件对象传参不传参问题如图:如何拿到按钮的里面的值使用e.target.innerText

原创 Vue基础知识之复选框的value

☞☞☞Vue基础知识之复选框的value什么时候写value复选框如果v-model是数组要加value?数据变量是数组的时候,因为数据关联value,而复选框默认没有value什么时候不写value数据变量是布尔值的时候,因为布尔值关联checkbox...