
vue
心为醒SS
喜欢前端,热爱代码,源由心生
展开
-
vue过渡动画transition,进入动画失效,离开显示两个页面数据的问题
使用fade-enter-from和fade-enter-to定义开始和结束动画。进入动画失效,是因为fade-enter没用了。需要重新自定义定义进入动画。原创 2023-03-18 15:45:01 · 826 阅读 · 0 评论 -
pnpm安装
如果用npm安装,需要配置环境变量,直接装在window上,可以直接省略环境变量的配置。上面是pnpm的官方,直接通过官方命令装就行。原创 2023-03-14 15:44:50 · 277 阅读 · 0 评论 -
element-ui表单验证相关问题
这里要注意,如果你直接将表单数据重新赋空对象,那么里面的属性添加的时候,就不是。的,对一个空对象直接添加属性要用**$set**去添加,比如这样。但是如果是关闭按钮也用这个,会获取不到表单名无效,可以直接写成。还有一些非输入类型的验证,可以选择自定义验证。直接就在dialog上加v-if。1,对于清空表单,可以使用。3,表单没有自己的生命周期。对于验证失效,你需要保证。原创 2023-03-01 21:06:22 · 171 阅读 · 0 评论 -
vue3获取dom
3,不能直接在setup里面拿到dom的值,因为setup对应的生命周期是created,所以必须在后续的生命周期钩子里面拿到,比如onMounted。1,获取dom的ref元素名称,要对应暴露的名称,不然会出现无效的dom报错,也就是拿到的是null。2,在setup中,使用ref(null)获取dom。原创 2023-02-27 13:21:49 · 4491 阅读 · 0 评论 -
vue和react的项目初始创建格式化
然后就可以愉快的玩耍了。原创 2023-02-21 14:18:20 · 120 阅读 · 0 评论 -
vue首屏加载动画
直接替换vue里面的html页面即可。原创 2023-02-21 07:50:26 · 496 阅读 · 1 评论 -
Vue微信登录流程
当登录页面的二维码被扫了之后,回调地址后面会携带一个code,路由守卫会拦截这个code,并通过callBack向后端请求token,然后请求成功后保存token并跳转到首页,到这里,登录就结束了。简单说,从登录跳转到首页,from就是登录页面的路由对象,to就是首页的路由对象,next如果没有值,默认为跳转到to指定的页面,(1)打开你的src目录下的router下的index.js(也可能是别的名字,最终就是打开路由配置文件)1,登录微信开放平台,选择网站应用,就可以看到appid。原创 2022-10-13 11:06:47 · 4555 阅读 · 0 评论 -
vue打包之代码在浏览器不可见
项目代码肯定不希望上线后,别人打开浏览器可以看见你的源码。配置文件vue.config.js。原创 2022-10-10 10:58:30 · 899 阅读 · 0 评论 -
解决npm安装依赖的冲突紧急解决办法
安装中报错,可以在后面加–legacy-peer-deps。原创 2022-09-26 09:59:01 · 9386 阅读 · 1 评论 -
navigator.mediaDevices.getUserMedia(constraints)可设置参数
【代码】navigator.mediaDevices.getUserMedia(constraints)可设置参数。原创 2022-09-06 08:58:17 · 3375 阅读 · 0 评论 -
对于时间比较的简便方法
代码】对于时间比较的简便方法。原创 2022-08-16 15:52:49 · 139 阅读 · 0 评论 -
Cannot read properties of undefined (reading ‘prototype‘)
使用promise的时候,vue自动加了一行代码。原创 2022-08-12 17:44:10 · 940 阅读 · 0 评论 -
vue上传视频upload的引用
这里是测试环境,所以token是保存的localStorage。因为已经传过了,所以显示文件存在,接口是通的,完成。http-request=“触发的方法名”上面用formData一定要写第2,3行。一般后端会有一个上传文件的接口提供给你。如上所述,接下来下面看看上传的方法。上传视频用的el-upload,接口不需要单独封装,直接使用。request.js文件。config.js文件。...原创 2022-08-12 15:22:15 · 1149 阅读 · 0 评论 -
vue使用promise进行并发请求promise.all
teaSchedulingByDate和teaSchedulingByDateOTO是两个封装的axios请求。原创 2022-08-10 10:22:48 · 648 阅读 · 0 评论 -
goeasy连接初始化,vue
代码】goeasy连接初始化,vue。原创 2022-08-03 11:27:30 · 870 阅读 · 0 评论 -
table表格页面回显
1,回显首先需要在选择的那一列数据添加reserve-selection添加后,切换分页就不会丢失之前选中的数据2,还需要给每个数据添加id3,在里面添加row-key和row-class-name搞定原创 2022-07-08 14:21:58 · 1408 阅读 · 0 评论 -
分享一个简易的搜索功能微信小程序,也可以在vue使用
搜索的流程:监听输入框内容,输入后开始匹配列表数据,然后再渲染,清空时,列表重新初始化data的原始数据创建一个空数组,用来渲染我们的列表然后我们到wxml页面写一个输入框和一个渲染列表的盒子然后我们就要写我们的方法了bindinput会返回一个输入框的值,而这个值就是event对象下的detail里的value获取到值后判断输入框是否有值,有的话,就拿出数据做一个筛选,return返回的就是存在这个字段的列表,然后通过this.setData去更新data里面的数据,如果输入框没有值,那就原创 2022-07-02 16:20:28 · 627 阅读 · 0 评论 -
依赖下载失败时,可以考虑一下这个方法
1,依赖下载失败因为很多项目用的依赖比较早,后续下载的版本可能偶冲突,可以用之前版本的npm去下载,相关的依赖名可以放在上面的代码后面,如果直接运行,那就和npm i 一个效果2,解决废弃的-g,之前npm -g去安装全局依赖,现在已经废弃3,npm i less less-loader@5.0.0 -D 或者其他依赖包的时候出现以上错误可能是npm版本问题报错解决方法:在命令后面加上–legacy-peer-deps–legacy-peer-deps的作用在NPM v7中,现在默认安装peerDepe原创 2022-06-29 21:06:27 · 1290 阅读 · 0 评论 -
vue分页的设置
1,在vue.config.js中添加如下代码2,在.eslint.js中注释掉重新启动项目,大功告成原创 2022-06-29 17:12:42 · 1842 阅读 · 0 评论 -
vue+electron项目创建
1,创建一个vue项目vue3可以直接创建2,创建完成直接进入项目所在的位置3,然后安装electron4,添加打包工具5,启动项目原创 2022-06-21 11:53:09 · 355 阅读 · 0 评论 -
api封装请求的过程
1,api封装是为了简便的请求数据首先一般项目会有一个request文件,一个api文件和一个manager文件request这个文件主要设置响应头,请求拦截和请求响应的一些处理api文件是为了将所有的请求封装成一个方法,并暴露出来,让你的组件去调用manager是为了定义不同的请求方式出现了3个文件,如果组件调用,不可能调用3个文件,然后去一个一个处理,肯定是最后只调用api文件,依赖关系就是api文件调用manager(里面有请求方式),然后manager调用request(里面有请求拦截和原创 2022-04-29 14:07:35 · 2108 阅读 · 0 评论 -
mock使用
1,在你的命令窗口输入以下命令,npm install mockjs -D2,创建一个API文件,创建一个mock.js文件const Mock = require("mockjs");let data = Mock.mock({ "data|6": [ //生成6条数据 数组 { "shopId|+1": 1, //生成商品id,自增1 "shopMsg": "@ctitle(10)", //生成商品信息,长度为10个汉字原创 2022-04-29 13:15:14 · 569 阅读 · 0 评论 -
vue-i18n的入门使用
vue-i18n就是国际化应用,如果你想让你的软件支持多种语言,肯定需要用到,不过这里也是入门使用1,安装vue install vue-i18n2,全局注入Vue.use(VueI18n)3,配置相关文件位置这里messages部分就是你要用到的语言种类,分别引入地址,我这里存放在lang文件下的zhCHS 和en ,之所以是zhCHS是因为还有繁体,这里就展示中英文切换const i18n = new VueI18n({ locale: localStorage.getItem原创 2022-04-19 10:38:20 · 2222 阅读 · 0 评论 -
vue2和vue3的全局事件总线
vue2里面的全局事件总线1,在main.js文件里面调用生命周期函数beforeCreate在new.Vue实例中....beforeCreate(){Vue.propotype.$name = this //这个name是可以随便更改的,可以使用你想用的名字....2,在组件1中的methods创建一个函数调用,或者说在mounted里面直接调用,都可以this.$name.$emit('a','我是要在组件2显示的值')这里是使用你的全局事件总线 name 是使用 emit 触发原创 2022-04-10 09:32:54 · 3176 阅读 · 0 评论 -
踩坑日记:Object(...) is not a function
vue3,引入useStore的时候,没有加括号,报错Object(...) is not a function解决方法就是加上括号,细心细心,不然整个页面崩溃,查这个问题的时候,还有时候方法命名一样也会出现这个错误,请一定谨慎复查...原创 2022-04-08 16:10:29 · 1809 阅读 · 0 评论 -
vue手机端隐藏滚动条
在app.vue中的style插入:-webkit-scrollbar { width: 0 !important; } ::-webkit-scrollbar { width: 0 !important;height: 0; }这样滚动条就全局隐藏了,如果有需求想要开启滚动条,可以使用下里面方法:overflow-x: scroll; white-space: nowrap;方法不错,纳入收藏...原创 2022-04-07 10:33:01 · 3248 阅读 · 0 评论 -
vue生命周期的各个环节
1,beforeCreate :实例了Vue但还没有进行数据的初始化与响应式处理2,create :数据已被初始化和响应式处理,在这里可以访问到数据,也可以修改数据3, beforeMount :render函数在这里被调用,生成虚拟dom,但是还没转成真是DOM并替换到el4, mounted :在这里真实DOM被挂载完毕5,beforeUpdate : 数据更新后,新的虚拟dom生成,但是还没有跟旧虚拟DOM对比打补丁6,update :新旧虚拟DOM对比打补丁后,进行原创 2022-04-05 20:50:39 · 634 阅读 · 0 评论 -
vue指令
1,v-text:更新元素的textContent2,v-html:更新元素的innerHTML3,v-show:根据表达式的真假值,切换元素的display,css,property,当条件变化是该指令触发过渡效果4,v-if:根据表达式的值的truthiness来有条件地渲染元素,在切换时元素及他的数据绑定/组件被销毁并重建,如果元素是,将提出它的内容作为条件块,当条件变化时该指令触发过渡效果5,v-else:前兄弟元素必须有v-if或v-else-if,类似js中的if else6,v-fo原创 2022-04-05 20:34:49 · 837 阅读 · 0 评论 -
vue 修饰符
1,lazy:改变输入框的值时value不会改变,当光标离开输入框是,v-model绑定的值value才会改变2,trim:把v-model绑定的值的首尾空格去掉3,number:将值转成数字,但是先输入字符串和先输入数字是两种情况,先输入数字的话,只取前面的数字部分,先输入字母的话,number修饰符无效4,stop:阻止冒泡5,capture:事件默认是由里往外冒泡,capture修饰符的作用是反过来,由外向里捕获6,once:事件只执行一次7,prevent:阻止默认事件(比如a标签的跳转原创 2022-04-05 20:17:10 · 825 阅读 · 0 评论 -
vue3中watch监听reactive数据的6种场景
直接上干货<template> <h2>当前求和为:{{sum}}</h2> <button @click="sum++">点我加</button> <hr> <h2>{{msg}}</h2> <hr> <h2>{{person.name}}</h2> <h2>{{person.age}}</h2> <h2>原创 2022-04-01 10:02:07 · 5387 阅读 · 2 评论 -
vue路由传参
首先配置路由之前有文章写过https://blog.youkuaiyun.com/Heartnottowake/article/details/123856110不会配置的小伙伴可以跟着配置一下router/index.jsimport VueRouter from 'vue-router'import Vue from 'vue'import News from '../components/news'import list from '../components/List'Vue.use(VueRo原创 2022-03-31 09:27:27 · 176 阅读 · 0 评论 -
vue创建路由vue-router
vue创建路由需要注意:如果使用的2.0版本的vue,那就使用3.0版本的vue-router使用的是3.0版本的vue,那就使用4.0版本的vue.router安装vue-routernpm install vue-router@3//我这里使用的是2版本的vue,所以用3版本的vue-router安装完后,配置main.jsimport Vue from 'vue'import App from './App.vue'import router from './router/index原创 2022-03-30 20:36:11 · 2230 阅读 · 0 评论 -
Unknown custom element: <router-view> - did you register the component correctly? For recursive comp
今天自己引入vue-router的时候,发生了报错说router-link未定义,重新查看路由定义在router的子文件index.js中配置需要引入VueRouter并且需要注册,千万别忘,忘了就会出现这个错误import VueRouter from 'vue-router'//引入Vue.use(VueRouter)//注册...原创 2022-03-30 19:22:18 · 3013 阅读 · 0 评论 -
command failed: npm install --loglevel error --legacy-peer-deps
1,没有安装webpack,安装一下就好了npm install webpack -g2,node版本冲突,重新安装一下持久维护版然后就成功了原创 2022-03-24 17:51:10 · 2071 阅读 · 0 评论 -
兄弟组件之间的传值vue
兄弟组件之间的数据操作。。将子组件的数据放在父组件维护。。操作声明在父组件,传到另一个子组件就可实现兄弟组件间的数据操作方法1------------------------------------------------这是父组件,通过父组件定义一个数组list,传给组件1进行v-for渲染出来,定义一个方法用于删除元素,传给组件2<template> <div id="app"> 父组件 <hr> <Course :li原创 2022-03-23 11:39:52 · 7387 阅读 · 1 评论 -
vue进行父子组件传值
1,父传子这是父组件重点:父组件引用子组件,在子组件里面使用v-bind绑定,那么传过去的text就是就是data里面的值如果不适用v-bind,那传过去的就是msg="text"的text这个字符串,不会关联data数据<template> <div id="app"> 父组件 <hr /> <Course :msg="text"/> </div></template><原创 2022-03-23 10:28:37 · 1769 阅读 · 0 评论 -
scroll-view在uniapp中隐藏滚动条
在scroll-view中加入以下代码::-webkit-scrollbar{ width: 0; height: 0; color: transparent; }附上完整代码<scroll-view class="scroll" scroll-x show-scrollbar > <view class="nav" v-for="(item,index) in navs" :key="index"> <text&g原创 2022-03-18 19:46:54 · 554 阅读 · 0 评论 -
icon引用symbol操作
一.首先下载好的iconfont.js放到目录下二.引入css 文件在同级目录下创建一个css文件输入代码.icon {width: 1em; height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;}在main.js导入import './assets/iconfont/iconfont.js'import './assets/iconfont/icon.css'这样就可以使用了!原创 2022-03-10 13:11:03 · 387 阅读 · 0 评论