![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue3
敲代码的柯基
努力的小前端,主修前端开发,同时也包揽公司后端开发的菜狗
展开
-
vue3+koa+axios实现前后端通信
写了一个小demo来实现前后端通信,涉及跨域问题,非常简单可以给大家平时开发的时候参考。首先要安装axios。原创 2023-10-18 15:38:36 · 954 阅读 · 0 评论 -
成型vue3项目引入electron通信
安装electron之后,要使用electron里面的ipcRenderer模块,在调用的时候,使用require引入electron会报错,fs.existsSync is not a function或者Uncaught ReferenceError: require is not defined。通过使用window.require代替require来引入electron,因为前者不会被webpack编译,在渲染进程require关键字就是表示node模块的系统。原创 2023-09-08 16:00:21 · 1012 阅读 · 5 评论 -
vue3 watch响应式数据
看了网上的很多博客感觉都有问题,基于vue3 和typescript 我总结了自己项目中用到的watch监听数据的写法:watch单个响应式数据(ref包裹的数据):watch多个响应式数据,第一个参数为一个数组,数组的每一项都是响应式数据,所以每一个都应该是函数的返回值,第二个参数也是数组,每一项对应着第一个参数中各项:...原创 2022-06-22 17:25:36 · 392 阅读 · 0 评论 -
vue3 报错提示 找不到模块“./XXX.vue”或其相应的类型声明
vue3 报错提示 找不到模块“./XXX.vue”或其相应的类型声明从网上找了好多方法比如在tsconfig文件下增加:{ "compilerOptions": { "baseUrl": "./", "paths": { "@/*": [ "src/*" ] } }, "exclude": [ "node_modules",原创 2022-03-25 17:31:58 · 10258 阅读 · 1 评论 -
vue3.0 实现element-form 表单校验和提交
vue3.0 实现element-form 表单校验和提交vue3.0+element-plus的form表单:<template> <el-container> <el-header> <Header title="注册" :showBack= "true"></Header> </el-header> <el-main> &l原创 2022-01-14 17:44:36 · 8081 阅读 · 0 评论 -
element-ui使用过程中遇到的坑(一)
element-ui使用过程中遇到的坑(一)element-form使用时输入框输入不生效使用的是vue3,我把表单数据和校验规则ruleForm,rules写在setup中了,一直输入无效,解决:使用reactive代替ref 包裹ruleForm<el-form class="content" :model="ruleForm" :rules="rules" ref="myForm" label-width="120px" > <el-form-ite原创 2022-01-14 17:41:04 · 701 阅读 · 0 评论 -
vue3获取当前组件实例的方法getCurrentInstance
vue3获取当前组件实例的方法getCurrentInstance在vue3中,setup 是围绕 beforeCreate 和 created 生命周期钩子运行的,setup的执行时组件对象还没有创建,此时不能使用this来访问data/computed/methods/props,我们可以通过 getCurrentInstance这个函数来返回当前组件的实例对象,也就是当前vue这个实例对象import { getCurrentInstance, onMounted, ref } from 'vue原创 2022-01-13 11:07:04 · 9220 阅读 · 2 评论 -
解决报错:Module not found: Error: Can‘t resolve ‘element-plus/lib/theme-chalk/index.css‘
解决报错:Module not found: Error: Can’t resolve ‘element-plus/lib/theme-chalk/index.css’在vue3中element-ui的安装已经改为npm install --save element-plus了,相应的css样式的引入也改变了,按照import 'element-plus/lib/theme-chalk/index.css'引入报错改为下面代码后就解决了:import 'element-plus/theme-cha原创 2022-01-10 17:02:56 · 17968 阅读 · 20 评论 -
vue3 引入element-ui
一开始在vue3中使用npm i element-ui --save 引入element-ui没有引入成功后来查找后使用了下面的方式:npm install --save element-plus在package.json中可以看到:"dependencies": { "axios": "^0.24.0", "element-plus": "^1.3.0-beta.1", "vue": "^3.0.0", "vue-class-component": "^8.0原创 2022-01-07 14:09:12 · 5750 阅读 · 4 评论 -
使用watch的几种写法
使用watch的几种写法vue2中watch的写法:第一种: watch: { list(newValue, oldValue) { } },第二种:监听的数据后面写成对象形式,包含handler方法和immediate, watch: { list: { handler(newName, oldName) { }, deep: true, immediate: true }}immediate:该属性表示在wat原创 2021-12-27 16:28:52 · 2215 阅读 · 0 评论 -
vue双击事件
vue双击事件vue双击事件通过在标签上绑定@dbclick事件例如实现双击选择<li v-for="(item,index) in List" @dblclick="dbAddItem(index)"> <span >{{item.Name}}</span></li> function dbAddItem(index) { protocolList.value.splice(number.value, 1, List[index]);原创 2021-12-24 17:35:07 · 5202 阅读 · 0 评论 -
vue3子组件向父组件传递消息
vue3子组件向父组件传递消息除了vuex这个万用方法外,子组件向父组件传递消息可以通过emit的方式。以控制弹窗的关闭为例在vue3中, emits的定义是与component、setup等这些属性是同级1、首先需要在emits中先注册,emits此时是作为数组,它也可以接收一个对象。如果没有注册,会给父组件反馈两次。import { ref} from 'vue'export default { emits: ['DialogClose'],//注册 setup(props原创 2021-11-29 17:21:51 · 1477 阅读 · 0 评论 -
vue3 使用vuex(1)
使用vuex进行兄弟组件的通信这个问题很简单,我搞了一天才解决的vuexstore index.tsimport { createStore } from 'vuex';import StudyStatus from './study';import PlanboxStatus from './planboxStatus';import selectSeries from './selectSeries';import GantryStatus from './gantryStatus'原创 2021-08-17 15:38:28 · 154 阅读 · 0 评论 -
vue3 setup踩坑
vue3 setup踩坑1.setup定义变量使用要ref(),要进行引用import {ref} from 'vue'注意ref放在{}里,否则会报错没有兼容的调用签名2.变量的赋值要使用.value let bedId = ref(1) function selectBed(id) { bedId.value= id }3.setup的值渲染到vue上不生效,仔细检查过发现定义的bedId的值没有传给vue的原因是没有return bedIds原创 2021-08-16 17:03:55 · 1461 阅读 · 0 评论