vue
没有天赋全靠手打
一边学习,一边分享
展开
-
在Vue3的setup中如何使用this
如果想要在setup函数中访问组件实例的属性或方法,可以使用Vue3提供的两个新的函数:getCurrentInstance和ctx。在上面的例子中,我们通过getCurrentInstance函数获取了当前组件实例对象,并通过instance.data.message和instance.ctx.sayHello访问了组件实例的数据和方法。在Vue3中,setup函数中的this指向的是undefined,因为setup函数是在组件实例化之前执行的,此时还没有this对象。原创 2023-04-13 11:40:48 · 5270 阅读 · 1 评论 -
Vue组件设置缓存kepp-alive 后如何获取数据
在keep-alive缓存的组件被激活的时候,都会执行 actived钩子。每次进去组件渲染时,都会执行beforeRouteEnter。原创 2023-01-10 18:10:20 · 685 阅读 · 0 评论 -
使用 wangEditor 5 自定义上传文件
使用 wangEditor 5编辑器,还是算比较快捷易上手的,毕竟官方文档写的很清楚,但其实官方没提供 上传附件的功能,但查阅文档就会发现有 对应插件的使用,所以在此记录一下插件用法此步骤是基于系统使用了wangEditor ,然后 需下载 上传附件 插件// 上传附件 插件在代码里引入并注册使用return {// 富文本工具栏配置 toolbarConfig : {// 富文本手动插入工具栏 insertKeys : {原创 2022-11-14 16:06:43 · 3521 阅读 · 8 评论 -
解决el-form动态表单切换导致的校验bug
问题描述 : 在平常项目需求中,常常有el-form表单需要根据条件切换el-form-item的情况发生,这时候容易切换过多导致校验错误定义。解决方式: 在v-if做判断的时候,加上key。类似于这种情况,切换之后 校验还在。原创 2022-09-07 16:30:11 · 1272 阅读 · 0 评论 -
vue项目刷新当前页面的方法
尝试了几种刷新页面的方法,比如1、浏览器直接刷新(会出现短暂的白页面现象)2、设置一个空白页面,需要刷新的时候跳转到空页面再从空页面跳回来(些许麻烦)3、使用provide/inject(目前觉得最实用,主讲此方法)...原创 2022-07-19 17:44:08 · 2793 阅读 · 0 评论 -
element的upload组件在before-upload之后触发before-remove以及后面on-remove方法
今天项目实践时,突然发现 element 的 el-upload组件在before-upload 之后 return false 之后竟然会自动触发 before/on - remove 方法。查阅了资料,发现解决方法很简单。原创 2022-06-14 11:15:54 · 1738 阅读 · 0 评论 -
axios的使用方式有几种?
axios的使用方式有几种?第一种 :直接挂载在原型上import axios from "axios"Vue.prototype.$axios = axios ;第二种 :封装一个拦截器,有请求拦截器和响应拦截器,同时挂载到原型上,(缺点:只要是vue的实例上面都会挂载,消耗性能大)import axios from "axios"let $axios = axios.create({ baseURL: '',// 接口地址 timeout:5000,// 设置超时时间})// 请求原创 2022-04-07 20:20:38 · 966 阅读 · 0 评论 -
前端项目中运行 npm run xxx 的时候发生了什么?
前端项目中运行 npm run xxx 的时候发生了什么?文章目录前端项目中运行 npm run xxx 的时候发生了什么?前言执行命令package.json 文件当 npm 运行 vue-cli-service serve时可执行文件总结前言最近修改项目配置时,引发的疑问,在此记录一下执行命令当你使用npm 的时候,都应该知道 它是 node 的依赖管理器,当然也可以使用其它命令,比如常见的 pnpm/yarn/cnpm/ni ;(我们用一种对话的方式叙述吧!突然想到这样可能更好理解,原创 2022-03-28 16:49:31 · 1417 阅读 · 0 评论 -
vue读取本地xlsx文件
vue读取本地xlsx文件原创 2022-03-28 09:12:15 · 8563 阅读 · 0 评论 -
Vue 组件之间的传值方式有哪些?
Vue 组件之间的传值方式有哪些?在平常写Vue项目时,组件传值必不可少,今天我们就要总结一下有哪些种方式呢?1、父组件向子组件传值(用props)子组件<template> <div> <ul> <li v-for="user in users" :key="user">{{user}}</li> <!-- 遍历传递过来的值,然后呈现到页面 --> <原创 2022-02-22 17:31:08 · 1155 阅读 · 0 评论 -
给el-button加上防抖
vue项目中给el-button加上防抖在项目开发中,相必大家时常会遇到按钮重复点击后引起事件重复提交的问题,在业余时间,我总结了几种方法,在此简述一下利用按钮的 loading 属性,防止用户重复点击直接把loading放在http请求去做,统一封装方法给按钮加上防抖,点击一次需要间隔一段时间才能触发二次点击我们写一下第三种解决方法,在这里我们使用vue全局指令来实现,选取了一种简单的指令方式大概思路 : 当第一次点击按钮时,设置它的 disabled 属性,超过防抖时间后释放属性在项目原创 2022-01-13 17:04:36 · 3613 阅读 · 2 评论 -
使用.sync修饰符
使用.sync修饰符这篇文章我们来学习上.sync修饰符的简洁用法。首先准备一个Input组件<template><div> <el-input v-model="modelValue" :placeholder="placeholder" @input="input" ></el-input> <el-button @click="changeText">点击修改</el-button>&原创 2022-01-11 11:23:08 · 539 阅读 · 0 评论 -
如何将当前组件的所有属性快速传递给子组件?
如何将当前组件的所有属性快速传递给子组件?今早发现了一个简便方式关于v-bind 特意在此记录一下举例 :<el-table ref="tableData" :data="tableData"> <el-table-column v-for="(item, index) in columnList" :key="index" :prop="item.prop" :label="item.label" align="center" sh原创 2022-01-05 11:35:40 · 905 阅读 · 0 评论 -
watch 如何监听路由变化
通过 watch 监听,当路由发生变化的时候执行方法一watch:{ $router(to,from){ console.log(to.path) }}方法二:watch:{ $route:{ handler : function(val,oldVal){ console.log(val) }, // 深度观察监听 deep:true }}方法三:watch: { '$route' : 'getPath'},methods: { getPath()原创 2021-09-14 15:23:46 · 1189 阅读 · 0 评论 -
element-ui 表单验证触发方式 trigger :‘change‘ 和 ‘blur’ 的区别
element-ui 表单验证触发方式 trigger :‘change’ 和 ‘blur’ 的区别trigger :‘change’change 数据改变触发比如 : 需要 手动选择的东西,用 changetrigger : ‘blur’blur 失去焦点比如 : 输入框里,验证文本框是否为空没有任何输入的时候,不会触发 change , 但一定会触发 blur 事件...原创 2021-08-10 15:33:01 · 5745 阅读 · 0 评论 -
table 表格中的内容溢出的解决方法
table 表格中的内容溢出的解决方法直接css样式解决文字溢出 变为省略号(示例)代码如下 :/*溢出部分样式*/td, th { white-space:nowrap; //强制在一行显示 overflow:hidden; //溢出的内容切割隐藏 text-overflow:ellipsis; //当内联溢出块容器时,将溢出部分替换为… word-break:keep-all; //允许在单词内换行}属性讲解white-spacenormal原创 2021-07-14 16:12:21 · 1892 阅读 · 0 评论 -
手写封装图片上传
编码背景为了方便由一张默认图和 上传的图片组成默认图片不能删除(不需要可以从代码里删除这个版块)技术 : vue js直接上代码吧<template> <div id="app"> <div class="upload"> <input type="file" id="file" multiple @change="upload" /> </div> <ul class="vi原创 2021-07-13 11:13:24 · 210 阅读 · 0 评论 -
Vue.js 中 v-if 和 v-show的区别
Vue.js 中 v-if 和 v-show的区别一直以来都有一点混淆这两者的区别,虽然很清楚是哪两种情况,但是有时候还是有点混淆。所以记录一下。v-show 只是在 display : none 和 display : block 中切换,无论初始条件是什么,都会被渲染出来,DOM 一直是保留着的,只是会切换 css 样式。总结就是 : v-show 在初始渲染时有更高的开销,但是切换开销很小,适合于频繁切换的场景。v-if 当属性初始化为 false时,组件就不会被渲染到节点所在的dom 元素上原创 2021-07-09 09:42:28 · 86 阅读 · 0 评论 -
vue中 router.beforeEach() 的用法
vue中 router.beforeEach() 的用法导航守卫 主要是通过跳转或取消得方式守卫导航在前端路由跳转中,路由跳转前都是会经过beforeEach,而beforeEach可以通过next来控制到底去哪个路由。根据这个特性我们就可以在beforeEach中设置一些条件来控制路由的重定向。常见的使用场景有:1、验证用户是否登录(若未登录,且当前非登录页面,则自动重定向登录页面);2、用户权限;3、用户输入的路路径是否存在,不存在的情况下如何处理,重定向到哪个页面。此处呢我使用一个简单的例子:原创 2021-07-06 09:53:56 · 11349 阅读 · 2 评论 -
Vue项目中如何使用Mock
Vue项目中如何使用Mock当后端还未写完接口,但前端已经写完页面,这时候就可以与你的后端人员约定好接口字段,然后自己使用mock来模拟后台返回数据。使用步骤首先在Vue项目中安装 mockjs // 没有项目的 直接 vue create 项目名,有项目的安装mockjs// 使用mockjs 产生随机数据npm install mockjs// 使用axios 发送 ajaxnpm install axios --save// 使用 json5 解决json文件,无法添加注释原创 2021-06-30 18:19:49 · 1022 阅读 · 1 评论 -
ElementUI 自定义表头 el-table
ElementUI 自定义表头 el-table昨晚睡不着的时候,突然想到了前段时间做的一个需求,但是只记得大概了,所以早起复习一下在ElementUI 中,都知道 el-table 定义表格,但是很多时候,官方的并满足不了需求,这时候就需要用到官方提供的自定义表头首先,我们需要在 el-table-column 里面添加 render-header 属性<el-table-column v-for="(item, index) in columnList" :key="index" :原创 2021-05-31 09:22:06 · 1706 阅读 · 0 评论 -
Vue中的 h 函数
Vue中的 h 函数在了解 h 函数之前,我们需要先了解 虚拟DOM,什么是 虚拟DOM?虚拟DOM 是使用JS 对象模拟真实的DOM结构,用JavaScript 对象描述DOM 的层次结构。DOM中的一切属性都在虚拟DOM 中有对应的属性。Vue当中虚拟DOM 的实现参考的是 snabbdom 库虚拟DOM 就是一个简单的JavaScript 对象,包含 tag、props、children 三个属性在初始化Vue项目时,经常会在 main.js 文件中 看到这一段代码:new Vue({原创 2021-05-19 15:25:08 · 9301 阅读 · 0 评论 -
vue中 this.$route.query和 this.$route.params 的使用与区别
vue中 this.$ route.query和 this.$ route.params 的使用与区别this.$route.query 的使用1、传参数this.$router.push({ path:'home', query:{ id:id }})2、获取参数this.$route.query.id3、在url中形式(url中带参数)https://172.123.444.802.com:8026/#/home?id=1页面之间用路由跳转传参时,刷新跳转后传参的页面,数原创 2021-05-12 17:21:25 · 303 阅读 · 0 评论 -
ElementUI 日期选择器 datepicker选择范围限制
ElementUI 日期选择器 datepicker选择范围限制在使用 el-date-picker 的时候,经常会对选择的时间进行一定限制,所以今天就总结了一些范围1、第一步 给 el-date-picker 组件添加 picker-options 属性,并绑定 对应数据 pickerOptions2、对绑定的数据进行限制单个选择框的限制2.1 设置今天及最近一年内的日期(包含今天)data(){return {pickerOptions:{ disabledDate(time){原创 2021-04-26 16:50:08 · 3668 阅读 · 2 评论 -
vue自定义指令的使用
vue自定义指令的使用Vue自定义指令和组件一样存在着 全局注册 和 局部注册 两种方式。全局指令注册通过 Vue.directive(id,[definition]) ,第一个参数为自定义指令名称(指令名称不需要加 v- 前缀,默认自动加上前缀,但是使用指令时一点要加上前缀),第二个参数可以是对象数据,也可以是一个指令函数...原创 2021-03-04 14:45:09 · 168 阅读 · 2 评论