Vue
文章平均质量分 50
别搞花里胡哨的
这个作者很懒,什么都没留下…
展开
-
vue事件总线(EventBus)学习
一、背景我们知道,在vue组件之间传递数据有很多方式,如:父子组件通信,隔代组件通信,路由传参,vuex等等,但是此时我们有两个同级(或者毫无关系的)组件,即兄弟组件之间通信,我们应该怎么办?那我们可以采取事件总线(EventBus)的方式解决,当然上述的其他方法也是可以解决的.二、事件总线顾名思义,就是组件相同事件的集合,可以向这个集合里注入一些事件,同时其他组件可以从这个集合里接收事件,这样两个不相干的组件可以进行通信.三、具体代码1.新建bus.js文件代码如下:import Vue f原创 2022-01-13 16:31:52 · 396 阅读 · 0 评论 -
vue配置别名alias在webstorm不生效
今天在配置vue.config.js别名时,发现使用别名不生效,代码没有问题最后发现是在webstorm的webpack配置问题,将webpack开启自动即可注好像2019版本的webstorm没有自动的选项,只有已禁用和手动的选项,2020的版本不知道,我用的是2021版本是有这三个选项如果是没有自动选项的版本的webstorm.可以在本地新建一个js文件,代码如下,命名随意,放置的磁盘随意const path = require('path')module.exports = { c原创 2021-12-09 13:54:58 · 2336 阅读 · 0 评论 -
vue循环el-button,点击哪个按钮,那个按钮变色
1. 场景有多个按钮,一个个的写并且一个个绑定事件代码很冗余,所以就循环,绑定一个事件,传不同的参数即可2. 实现我这里有两种button,由于一些原因,“全部”按钮没有放在循环里面data里面methods3. 效果...原创 2021-12-03 10:25:06 · 4292 阅读 · 0 评论 -
vue登录时滑块验证
1.效果图2. 新建 SliderCheck.vue组件<template><!-- 拖动验证--> <div class="slider-check-box"> <div class="slider-check" :class="rangeStatus ? 'success' : ''"> <i @mousedown="rangeMove" :class="rangeStatus ? successIcon : st原创 2021-12-01 16:05:16 · 1899 阅读 · 2 评论 -
vue登录时图形验证码
效果图:点击图案可以切换字符1.新建 Identify.vue 组件<template> <div> <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas> </div></template><script>export default { name: "i原创 2021-12-01 15:54:33 · 412 阅读 · 0 评论 -
vueX状态管理
1. 安装vuex1.1 使用vue-cli新建项目时,可以选择是否安装vuex;选择vue-cli安装项目完成后,在目录结构中会自动生成 store文件夹,里面自动生成index.js文件1.2 使用npm安装vuex安装命令:npm install vuex -s在src目录下新建store文件夹,然后再该文件夹中新建index.js文件初始化index.js内容将store挂载到vue实例中打开main.js,添加如下内容然后就可以在组件中使用vuex了.原创 2021-09-24 16:27:44 · 123 阅读 · 0 评论 -
vue-router使用
一、vue-router基本使用二、vue-outer嵌套路由三、vue-router参数传递四、vue-router导航守卫五、keep-alive原创 2021-10-18 16:16:41 · 11107 阅读 · 4 评论