![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
文章平均质量分 61
沉迷...
这个作者很懒,什么都没留下…
展开
-
vue自定义指令及常用的自定义指令封装
本文主要是vue2以及vue3自定义指令的定义及使用,包含一些常用自定义指令的写法原创 2023-12-12 09:00:58 · 1126 阅读 · 0 评论 -
一个小工具帮助快速删除node_modules依赖
项目越来越大 每次装依赖删除依赖都需要一个漫长的时间 直到发现了这个工具。原创 2023-12-01 13:08:13 · 484 阅读 · 0 评论 -
如何对element弹窗进行二次封装
通过$refs打开的同时 还能给弹窗组件传参 一些框架使用的也是这种方式。原创 2023-11-11 12:50:14 · 1132 阅读 · 0 评论 -
子组件未抛出事件 父组件如何通过$refs监听子组件中数据的变化 在父生命周期中$watch监听子组件数据变化
我们平时开发项目会使用一些比较成熟的组件库, 但是在极小的情况下,可能会出现我们需要监听某个属性的变化,使我们的页面根据这个属性发生一些改变,但是偏偏组件库没有把这个属性抛出来,当我们使用watch通过refs监听时,由于生命周期的原因还不能拿到,这时候我们可以这样做,以下是一个极简的例子。原创 2023-07-30 14:32:10 · 1256 阅读 · 0 评论 -
vue除了子组件抛出的额外参数,父组件如何传递额外参数
以下为一个简单的demo,只为记录一下很多时候如果我们多个地方使用同一函数时,往往就需要进行判断了,但是组件库返回的函数携带的参数没办法让我们做多余的判断 这时就需要传递多余的参数了。原创 2023-07-29 17:44:29 · 653 阅读 · 0 评论 -
实现点击复制到剪切板功能
VueUse不是Vue.use,它是为Vue 2和3服务的一套Vue Composition API的常用工具集,是目前世界上Star最高的同类型库之一。它的初衷就是将一切原本并不支持响应式的JS API变得支持响应式,省去程序员自己写相关代码。VueUse 是一个基于 Composition API 的实用函数集合。通俗的来说,这就是一个工具函数包支持了更好的逻辑分离,它可以帮助你快速实现一些常见的功能,免得你自己去写,解决重复的工作内容。以及进行了机遇 Composition API 的封装。原创 2023-07-23 21:27:07 · 377 阅读 · 0 评论 -
vueComponents和vue实例的关系
每个函数function都有一个prototype属性,即显式原型(属性)。它默认指向Object空对象,每个实例对象都有一个__proto__属性,即称隐式原型(属性)。VueComponent把原本指向Object的原型对象改到指向Vue原型对象(黄线),即VueComponent.prototype.proto === Vue.prototype,目的是为了组件实例对象(vc)可以访问到Vue原型上的属性和方法。Vue和是VueComponent就像一对孪生双胞胎,他们绝大多数的属性和方法都很.原创 2023-05-20 22:27:24 · 124 阅读 · 0 评论 -
初始化vue中data中的数据
当组件的根元素使用了v-if的时候, 并不会初始化data中的数据 如果想完全销毁该组件并且初始化数据,需要在使用该组件的本身添加v-if 或者是手动初始化该组件中的数据。原创 2023-05-07 22:30:28 · 3154 阅读 · 0 评论 -
package.json中版本符号的使用及含义
package.json里面版本号的格式有很多,常见的~、^、>、转载 2023-05-07 20:48:51 · 1700 阅读 · 0 评论 -
组件封装v-model .sync在父子组件中实现双向数据绑定 如何处理单向数据流 封装表单组件
父组件使用.sync进行数据的绑定 传值子组件时 把值赋值到data的变量中 然后监听该数据的变化 $emit抛出。// 当子组件绑定的值发生变化时 抛给父组件。// 父组件传递过来的值。// 子组件绑定的值。原创 2023-04-16 11:01:33 · 357 阅读 · 0 评论 -
高级组件封装v-bind=“$attrs“ v-on=“$listeners“继承原有组件的属性和方法
我们进行业务开发的时候, 为了使页面快速成型,通常会使用一些比较常见的的组件库,然后对于高频使用的组件进行二次开发,那么二次开发的组件如何继承原有组件的属性和方法就是比较常见的问题,vue中为我们提供了很好的解决方案。原创 2023-02-12 21:22:39 · 408 阅读 · 0 评论 -
Vue.observable( object ) 最小化的状态的vuex管理工具
Vue-observable目录结构组件one.vue组件too.vue组件index.vue效果原创 2022-12-12 12:30:00 · 329 阅读 · 0 评论 -
监听vuex的数据变化
首先确定 Vuex是为了解决什么问题而出现的 ? Vuex是为了解决组件间状态共享而出现的一个框架.其中有几个要素 是组成Vuex的关键, state(状态) mutations actions ,state 表示 需要共享的状态数据mutations 表示 更改 state的方法集合 只能是同步更新 不能写ajax等异步请求actions 如果需要做异步请求 可以在actions中发起 然后提交给 mutations mutation再做同步更新也就是 state 负责管理状态 , muta.转载 2022-05-24 22:46:47 · 11166 阅读 · 0 评论 -
计算属性普通函数写法 和 set get 写法
特点:定义的时候,要被定义为“方法”在使用计算属性的时候,当普通的属性使用即可计算属性会缓存计算的结果,只有计算属性依赖的数据变化时,才会重新进行运算好处:实现了代码的复用只要计算属性中依赖的数据源变化了,则计算属性会自动重新求值!普通写法<template> <div> <p>和为: {{ num }}</p> <p>{{ reverseMessage }}</p> </div&g原创 2022-05-25 02:45:00 · 1014 阅读 · 0 评论 -
vuex分模块 开启命名空间
模块开启命名空间后,享有独自的命名空间。{ "模块1":{ state:{}, getters:{}, mutations:{}, actions:{} }, "模块2":{ state:{}, getters:{}, mutations:{}, actions:{} }}mapState、mapGetters、mapMutations、ma原创 2022-05-24 22:28:49 · 1064 阅读 · 0 评论 -
vue 路由的三种模式
路由模式解析这里要讲vue-router的路由模式,首先要了解的一点就是路由是由多个URL组成的,使用不同的URL可以相应的导航到不同的位置。如果有进行过服务器开发或者对http协议有所了解就会知道,浏览器中对页面的访问是无状态的,所以我们在切换不同的页面时都会重新进行请求。而实际使用vue和vue-router开发就会明白,在切换页面时是没有重新进行请求也没有重新刷新页面,使用起来就好像页面是有状态的,这是什么原因呢。这其实是借助了浏览器的History API来实现的,这样可以使得页面跳转而不刷新,页原创 2022-05-07 21:50:08 · 20558 阅读 · 0 评论 -
vue中@与~别名在javascript 和css中的使用
设置别名在build文件夹下的webpack.base.conf.js文件中设置src的路径别名。 resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), '#': resolve('src/assets') } },默认会有‘@’别名,指向src目录,还可以添加自定义别名转载 2022-04-16 15:19:13 · 1172 阅读 · 0 评论 -
为什么vue中data必须是一个函数
组件中为什么data必须是一个函数如果不是函数如果组件中的data不是一个函数,首先vue是会报错的,因为它内部规范组件中的data必须是个函数。那为什么必须是个函数呢?大家接着看看既然它要求返回一个对象,那我们定义一个对象再给他返回行不行呢?而此时点击也有用功能也能实现但是,当我们需要多次使用此组件时我们可以发现,此时组件的数据是共享的,一个改变,其他也改变,很显然,我们开发组件就是希望使用时能自己的数据不和其他组件进行共享,这样很容易污染变量,造成数据紊乱。正确做法我们让d转载 2022-04-10 21:34:03 · 233 阅读 · 0 评论 -
vue mixins混入用法
功能:可以把多个组件共用的配置提取成一个混入对象使用方式:第一步定义混合:第二步使用混入:全局混入:Vue.mixin(xxx)局部混入:mixins:[‘xxx’]{ data(){....}, methods:{....} ....}mixins基础概况vue中的解释是这样的,如果觉得语言枯燥的可以自行跳过嘿~混入 (mixins): 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的.原创 2022-03-27 23:30:08 · 336 阅读 · 0 评论 -
vue环境变量的使用与配置
为什么需要配置环境变量和模式呢?所有方法肯定是来源于现实的需求。在一个产品的前端开发过程中,一般来说会经历本地开发、测试脚本、开发自测、测试环境、预上线环境,然后才能正式的发布。对应每一个环境可能都会有所差异,比如说用户访问资源权限、服务器地址、接口地址等。在各个环境切换的时候,就需要不同的配置参数,所以就可以用环境变量和模式,来方便我们管理。环境变量1)环境变量文件分类:在vue-cli3中可以在根目录(与package.json同级)中创建以下四种类型的环境变量文件:.env转载 2022-03-26 17:20:21 · 11737 阅读 · 1 评论 -
vue路由守卫
router.beforeEach(async(to, from, next) => { /* 全局前置路由守卫 to: 要去哪个页面 from: 从哪里来 next: 它是一个函数 如果直接放行next() 如果要跳转到其它页 next(其它页) */ NProgress.start() // 开始进度条 const token = store.state.user.token // console.log(to) if (token) {原创 2022-03-10 10:33:26 · 1094 阅读 · 0 评论 -
登录退出功能
当用户退出后重新登录能再次回到之前的界面退出的时候回传当前路径this.$router.push('/login?return_url=' + encodeURIComponent(this.$route.fullPath))登录的时候进入指定界面this.$router.push(this.$route.query.return_url || '/')token失效处理service.interceptors.response.use(response => { if (resp原创 2022-03-01 20:54:51 · 287 阅读 · 0 评论 -
vue中v-if和v-for优先级在vue2和vue3中的区别
在 vue 2.x 中,在一个元素上同时使用 v-if 和 v-for 时, v-for 会优先作用。在 vue 3.x 中, v-if 总是优先于 v-for 生效。在 vue2 中, v-for 优先级高于 v-if ,我们可以这样实现:<ul> <!-- vue2中,v-for优先级高于v-if --> <li v-for="item in todoList" v-if="!item.done" :class="{todo: !item.done}" :ke.原创 2022-03-01 16:52:18 · 2394 阅读 · 0 评论 -
vue中如何使用typescript编写vuex
vuex装饰器cnpm install -s vuex-module-decorators文件地址:/store/modules/about.tsimport { Module, VuexModule, Mutation, Action, getModule } from 'vuex-module-decorators'import store from '../index'const getList = () => { return new Promise<Array&原创 2021-11-14 17:47:34 · 446 阅读 · 1 评论 -
Vue路由的使用
路由的使用属性写法速查接口请求参数‘user/:id’(restful风格)发送请求数据的格式是’user/’+id‘user?id=’+id发送请求数据的格式是params:{id: id}body请求体发送请求的数据格式是data: dataroute的query参数this.$route.query 取得是地址栏 问号后面的值meta里面可以放自己想要放的数据path是路由的跳转信息query 如果路由参数是以问号方式传递的则在query里面原创 2021-09-12 20:57:32 · 1357 阅读 · 1 评论 -
vuex的基本使用
vuex的使用vuex的基本使用(State,Mutation,Action,Getters,Modules)state1、定义:state提供唯一的公共数据源,所有共享的数据都要统一放到Store的State中进行存储2、使用://创建store数据源,提供唯一公共数据const store = new Vuex.Store({ state:{count:0}})//组件访问State中数据的第一种方式:this.$store.state.全局数据名//组件访问State中数据的原创 2021-09-12 10:23:52 · 243 阅读 · 0 评论 -
vue混入(合)mixin
Mixin概述混入(mixin)提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项例子定义一个混入对象export const myMixin = { data() { return { num: 1 } }, created() { this.func_one(); he转载 2021-09-07 08:20:41 · 275 阅读 · 0 评论 -
element 点击删除按钮后自动聚焦 取消enter 空格 删除
element 点击删除按钮后自动聚焦 取消enter 空格 删除//删除的时候把事件对象传入到执行函数中 //取消自动聚焦 hDel(e, id) { console.log(e) //关键代码 e.target.blur() this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消',原创 2021-09-06 20:08:26 · 488 阅读 · 0 评论 -
生产环境跨域 配置代理转发
生产环境代理转发前端需要设置生产环境的baseUrl.env.productionVUE_APP_BASE_API = '生产环境使用的url'由于直接访问api接口会出现跨域问题 我们需要配置一个单独的代理转发服务 让页面访问这个代理服务器 然后通过代理服务去访问api接口建立web服务文件夹 hrServer在该文件夹下,初始化npmnpm init -y安装服务端框架koa(也可以采用express或者egg)npm install koa koa-static原创 2021-09-05 09:49:13 · 872 阅读 · 0 评论 -
生产打包优化
生产打包优化查看包大小我们可以使用vue-cli本身提供的性能分析工具,对我们开发的所有功能进行打包分析,它的使用非常简单npm run preview -- --report这个命令会从我们的入口**main.js**进行依赖分析,分析出各个包的大小,方便我们进行观察和优化方块越大,说明该文件占用的文件越大,文件越大,对于网络带宽和访问速度的要求就越高,这也就是我们优化的方向。webpack配置排除打包通过配置vue-cli把一些平常不需要用的包排除在打包文件之外。例如:让 webpac原创 2021-09-05 09:15:21 · 252 阅读 · 0 评论 -
vue+element 实现多级联动 选择省市效果
vue+element 实现多级联动 选择省市效果市与区的初始数据const datas = [ { city: '北京市', area: [ '东城区', '西城区', '朝阳区', '丰台区', '石景山区', '海淀区', '门头沟区', '房山区',原创 2021-09-04 09:48:19 · 804 阅读 · 0 评论 -
数组转树状结构
数组转树状结构数组的原始结构const data = [ { id: '01', name: '张大大', pid: '', job: '项目经理' }, { id: '02', name: '小亮', pid: '01', job: '产品leader' }, { id: '03', name: '小美', pid: '01', job: 'UIleader' }, { id: '04', name: '老马', pid: '01', j原创 2021-08-31 10:32:14 · 863 阅读 · 2 评论 -
RBAC权限详解
RBAC权限详解权限设置1.权限点权限:在一个系统内是否具有做某个操作的权利权限分为两个级别 1. 菜单权限:是否有权限访问某个菜单 2. 按钮权限:是否有权限操作 页面上的某个按钮功能2.业务逻辑对于权限数据来说,有两个级别的设置1.能不能访问谋个页面2.在页面上,能不能操作某个按钮3.RBAC权限设计思想目标:不同账号登录系统后看到不同的页面, 能执行不同的功能模式如下三个关键点:用户: 就是使用系统的人权限点:这个系统中有转载 2021-08-30 20:41:33 · 4826 阅读 · 1 评论 -
RBAC权限
RBAC权限介绍:英文全称: Role-Based Access Control中文全称: 基于角色的权限访问控制介绍: 在RBAC中,权限与角色关联 ,用户通过成为适当角色的成员而得到这些角色的权限. 权限赋予角色,角色又赋予用户,并且他们之间是多对多的关系,这样管理起来就会很方便使用场景需要添加权限的情景示例:不同用户登录后看到的菜单是不一样的。不同用户看到的页面效果不一样,有的用户可以看见”授权”按钮,或有的用户可以看见”删除”按钮不同用户完成的功能是不一样的,有的用户可以执原创 2021-08-30 20:34:19 · 295 阅读 · 1 评论 -
vue的双向绑定原理及实现
vue的双向绑定原理及实现本文转载自https://www.cnblogs.com/canfoo/p/6891868.html前言使用vue也好有一段时间了,虽然对其双向绑定原理也有了解个大概,但也没好好探究下其原理实现,所以这次特意花了几晚时间查阅资料和阅读相关源码,自己也实现一个简单版vue的双向绑定版本,先上个成果图来吸引各位:代码: 效果图: 是不是看起来跟vue的使用方式差不多?接下来就来从原理到实现,从简到难一步一步转载 2021-08-29 08:48:58 · 417 阅读 · 0 评论 -
vue封装获取焦点的自定义指令
vue封装获取焦点的自定义指令创建工具文件 写入以下代码import Vue from 'vue'// 标签添加自动聚焦功能// 口诀: 当你要给标签扩展额外功能时, 自定义指令// 用法:Vue.directive('fofo', { inserted (el) { // 指令所在标签, 被插入到真实DOM触发一次(仅触发一次) fo(el) }, update (el) { // 指令所在标签被更新时, 触发 fo(el) }})function fo原创 2021-08-29 08:34:28 · 489 阅读 · 0 评论 -
巧妙的使用v-model实现父子组件之间动态传值
巧妙的使用v-model实现父子组件之间动态传值很多情况下我们都会遇到父子组件数据双向绑定的问题 既子组件中的数据发生变化 父组件的数据也要进行变化 父组件中的数据发生变化 子组件也要跟着变化 我们或许有很多方法实现 如$refs之类的 但总感觉这样的代码不够优雅 这个时候我们想到v-model熟悉v-model的双向绑定原理 我们就可以用这一原理去实现父子组件之间动态传值了原理如下:父组件通过v-model绑定一个变量传给子组件子组件通过props{value:{type:数据类型原创 2021-08-27 13:45:44 · 3620 阅读 · 0 评论 -
vue新旧插槽语法对比
插槽新旧语法对比vue2.6之前slot=‘插槽名’ slot-scope=“子组件传递过来的数据对象”新#插槽名=“子组件传递过来的数据对象”一、匿名插槽子组件child<div class="child"> <!-- 子组件 --> <slot></slot></div>父组件 <div class="father"> <!-- 父组件 --> <原创 2021-08-25 21:36:00 · 615 阅读 · 1 评论 -
vue组件里的多个定时器如何销毁
如何清除vue组件里的多个定时器如果页面上有很多定时器,可以在data选项中创建一个对象timer ,给每个定时器取个名字一一映射在对象timer中 在beforeDestroy中for(let k in this.timer){ clearInterval(k)}如果页面只有单个定时器 可以这么做const timer=setInterval(()=>{},500);this.$once('hook:beforeDestroy',()=>{ clearIn原创 2021-08-25 20:11:59 · 1402 阅读 · 0 评论 -
vue项目中如何使用excel导入导出
vue项目中如何使用excel导入导出从vue-element-admin中提供的excel导入功能迁移到当前的项目中导入安装依赖安装插件npm install xlsx引入组件将vue-element-admin提供的组件复制到我们自己的项目 **src/components/UploadExcel**下注册为全局组件准备导入页面新建一个公共的导入页面,import路由组件src/views/import/index.vue在页面中使用前面封装的excel上传组件,并补充导入成功后原创 2021-08-23 21:08:30 · 1122 阅读 · 0 评论