vue
过往深处少年蓝
你是我落斓星河长风贯过北极,遥坠故里又仓惶离去难得的盈盈笑意。你让我诗引九霄落笔惊雷又写下惆怅,这相思易起锦书难寄苦了谁的白月光。
展开
-
vue自定义提示弹出窗口组件
在使用iview的this.$Modal.confirm提示组件时,很难去修改默认的组件样式,如果自己能定义一个全局的提示组件,那在修改样式以及自定义提示组件、使用i18n多语言方面都会很方便提示组件:在components上自定义一个组件<template><transition-group name='fade'> <!-- 退出弹窗 --> <div class="quit_dialog" key="1" v-if="isQui原创 2022-05-06 10:22:20 · 4085 阅读 · 0 评论 -
vue实现无限消息无缝滚动
一、html <div class="table_box"> <div class="table_title"> <div class="table_title_item">告警时间</div> <div class="原创 2022-03-02 15:31:45 · 909 阅读 · 0 评论 -
iview树形结构拖拽实现
组件:<template> <div class="tree-wrapper" :style="'height:' + (showQuery ? 'calc(100% - 35px)' : '')"> <div v-if="showQuery" class="tree-search-box"> <Input v-model="queryModel" placeholder="请输入"原创 2021-12-24 17:29:28 · 1850 阅读 · 0 评论 -
vue的插槽详解
一、什么是插槽?用一段通俗的话来说就是,把一个html模板插入子组件的指定位置,插槽存在于父子组件之间。<slot>元素作为承载分发内容的出口。正常来说,父组件引入的子组件标签内是无法插入内容的,如下:<template> <div class="main-page"> <div>父组件</div> <div style="border:1px solid red"></div> .原创 2021-10-13 18:03:54 · 313 阅读 · 0 评论 -
计算属性的传值问题以及应用场景
问题描述:当我们在v-for的循环中需要对数组的一个状态进行转换时,如0的状态转换为“未设置”,通常在计算属性传入值进行判断即可html:<Radio-group v-model="select" vertical @on-change="onSelectchange"> <Radio :label="item.id" v-for="(item, index) in data" :key="index">原创 2021-09-30 17:01:10 · 457 阅读 · 0 评论 -
vue项目页面缓存,全局刷新,点击进入子组件刷新
实现场景:在页面中我们要实现每个页面自己能控制是否缓存,即是否每次进入页面是否需要刷新页面,每个页面有不同的需求,并且在全局有一个按钮能在每个当前页面按这个按钮都可以刷新。一、页面缓存找到页面的内容区,即系统放页面的区域:<keep-alive> <!-- 是否缓存页面:即每次进入页面是否刷新,若缓存则无法手动刷新页面 --> <router-view v-if="$route.meta.keepAlive&&isRouterViewShow"原创 2021-09-23 09:56:42 · 4399 阅读 · 1 评论 -
vue项目解决一些vuex和路由菜单报错的问题(vuex触发action方法报错问题,路由跳转重复,iview点击子菜单自动关闭一级菜单,刷新浏览器跳转404页面问题)
1.vuex触发action报错的问题,报错如下:意思是定义的action方法SetToken找不到。解决办法:在方法前面加上模块名称user,你这个方法定义在哪个模块下面就加上哪个模块名称this.$store.dispatch('user/SetToken', res.data.authorization)2.路由跳转重复报警告的问题:报警告如下:意思是重复命名的路由定义, 我们在添加路由信息中存在重复添加,在路由守卫中addRouter方法前面删除原来路由即可解.原创 2021-09-11 10:21:42 · 1542 阅读 · 0 评论 -
实现一个简单的vue响应式数据的功能
**一、功能需求**自己写一个vue程序定义为Myvue,实现的功能是实现简单的数据双向绑定**二、效果预览****三、代码实现与解析**<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> #app{ text-align: center; } </styl原创 2021-07-01 10:24:20 · 274 阅读 · 0 评论 -
vue随机生成验证码组件
一、验证码组件<template> <div> <div id="codeBox"> <canvas width="112" height="38" id="verifyCanvas"></canvas> </div> <img id="code_img" @click="refreshCode"> </div></template><scrip原创 2021-05-31 14:10:56 · 1204 阅读 · 0 评论 -
修改elementui默认样式的几种方式
在项目中修改其他组件内的样式时,scoped会成为阻碍导致样式修改不成功,有以下几种方式可成功修改样式方式一:添加一个不加scoped的样式<style scoped>.lgbtn >>> .el-button{ background-color:rgba(0, 0, 0, 0.2); color:#fff;}</style><style lang="scss">.lgbtn .el-button{ background-原创 2021-05-18 13:43:39 · 1578 阅读 · 0 评论 -
解决echart图表显示不全问题
一、问题描述引入echart图表,只显示一部分,并且存放echart图表的盒子加了v-show。二、问题分析echart只显示一部分,可以知道明显是存放echart图表的盒子宽高问题,echart可以显示,说明echart引入是没有问题的,去掉v-show则不存在该问题,说明是在切换v-show时,echart渲染获取宽高的时机存在问题,即当我们设置v-show时,DOM没有立即更新,而先执行了渲染echart的函数,导致获取宽高错误,所以我们的解决办法是加入this.$nextTick(()原创 2021-05-17 13:56:42 · 7320 阅读 · 1 评论 -
vue项目加载OCX控件以及控件的主动事件和回调事件的处理
目录一、前言二、控件在项目中使用1.控件在传统项目中html页面中使用2.控件在vue中的使用方式一、前言在项目中可能会遇到加载ocx控件的需求,而加载控件是有局限性的,即只有IE内核的浏览器才支持,像谷歌都不支持,这个是个注意的点,所以页面加载该模块肯定要做判断。首先要在浏览器设置允许加载activex控件:步骤:设置按钮——Internet选项——安全——受信任站点——自定义级别——Activex控件启用 二、控件在项目中使用...原创 2021-04-01 14:44:37 · 2489 阅读 · 2 评论 -
vue项目中实现elementui多语言切换
要实现elementui的多语言切换有两种方法第一种方法:根据自己需要加载语言包(并不是页面的手动切换)import Vue from 'vue'import ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css' // 引入elementui样式// import locale from '...原创 2020-04-02 14:27:03 · 8719 阅读 · 2 评论 -
vue项目封装组件发布到npm笔记
一、创建项目新建一个文件夹,在该文件夹目录下的控制台执行vue init webpack-simple,创建vue新项目,然后在执行npm install安装依赖,创建好vue项目后,在src下新建一个放组件源码的文件夹,我下面是两个组件,最好是所有组件放在一个文件夹。二、创建组件自己随便写一个小的ui组件,自己测试一下没问题即可。<template> <...原创 2020-01-18 10:45:17 · 1067 阅读 · 0 评论 -
vue中使用websocket
<template><div> <el-button>发送消息</el-button></div></template><script>export default { data() { return { websocket: null, path: 'ws:/...原创 2020-01-15 10:22:07 · 358 阅读 · 0 评论 -
解决vue-baidu-map在IE和火狐下不显示的问题
问题描述:在使用vue-baidu-map时,发现地图在谷歌或者谷歌内核的浏览器下可以正确显示,但是在火狐和IE,或者IE内核(如遨游等双核浏览器的IE内核模式下)不显示,甚至连VUE项目都打不开来,且报两处错误,如下:光看报错,很难确定错误原因,我们还是去vue-baidu-map中找答案吧,我们在官方文档中发现这么一句话,加载vue-baidu-map是要安装loader...原创 2019-12-27 10:18:29 · 1684 阅读 · 1 评论 -
解决vue项目背景图片在IE和火狐上不显示的问题
问题描述:在开发平台首页时,发现首页的背景图老是不显示,且仅限在IE内核的浏览器和火狐浏览器,例如谷歌或者遨游的谷歌内核浏览器内可以正常显示,遨游浏览器切换到IE内核时却不显示了。简直是怪事;问题分析:开始都是从打包角度去考虑,以为是打包路劲问题,其他背景图正常,唯独这张背景图不显示,后来考虑是背景图有问题,换可以正常显示的背景图,发现也不显示,又发现该背景图在开发环境中在火狐和IE下...原创 2019-12-26 16:35:28 · 1991 阅读 · 0 评论 -
vue-cli代理https接口报500错误
解决办法:webpack默认代理不支持 https 协议,如若要代理https请求,则需配置如下,proxyTable: { // 代理所有的以 /xinruiapi开头的请求到 https://xxxx.com '/xinruiapi': { target: 'https://xxxx.com', changeOrigin: tr...原创 2019-12-18 17:34:16 · 6046 阅读 · 0 评论 -
请求get变化为options的问题解决办法
遇到问题:项目上线后,原来的get请求的接口变成了OPTIONS,且接口是200 Ok.显然,这个接口是没有调通的,且控制台打印了错误:显然这是关于跨域的问题为什么会出现请求变成options呢? 非简单请求的CORS请求,会在正式通信之前,增加一次HTTP查询请求,称为”预检”请求(preflight),在post,put,delete发送之前发送一个 OPT...原创 2019-12-16 13:58:16 · 7095 阅读 · 1 评论 -
如何在vue项目中使用递归组件配合Element-ui布局侧边栏
在我们整体的项目开发中,对项目框架的整体布局是非常重要的一环,其中侧边栏会涉及到一级一级嵌套以及项目迭代的问题,而且还涉及到路由的问题,所以用树形结构显然不合适,我们需要考虑迭代的问题,所以我们选择用递归组件对侧边栏进行布局,新增菜单只需要在数据层添加即可,可以无极限嵌套菜单级别,而达到了一劳永逸的效果。首先我们需要有自己侧边栏的数据(前端自己写静态数据或从后台获取):data.js:...原创 2018-08-17 18:45:11 · 10519 阅读 · 4 评论 -
vue中使用websocket
Springboot:MyWebsocket.javapackage com.oppo.tcms.socket;import javax.websocket.OnClose;import javax.websocket.OnError;import javax.websocket.OnMessage;import javax.websocket.OnOpen;impor...转载 2019-04-09 16:43:00 · 745 阅读 · 0 评论 -
解决vue项目中数据更新但无法刷新视图的问题
问题描述:当我们在做项目中,会遇到很常见的这种问题,例如:我一个数组从后台获取数据,进行表格渲染,当点击表格某一行时,查询表格该行下的子级数据,并显示。所以我们的做法通常会是点击调用接口,获取数据,并把数据给原有的数组的children数组赋值。这样做的结果就是:点击第一次,数据确实请求回来了,也在children下面,但是视图并不更新,点击第二次才更新。分析原因:你仔细阅读vue的官方文...原创 2019-05-14 09:49:03 · 8309 阅读 · 0 评论 -
vue项目树形表格(一)
组件:treeTable.vue<template> <el-table :data="formatData" :row-style="showRow" v-bind="$attrs"> <!--当无显示项时--> <el-table-column v-if="columns.length===0" width="150">...原创 2019-05-13 09:45:22 · 2450 阅读 · 1 评论 -
Vue 中使用 jQuery
入门demo时想在其中使用jQuery(当然可能是不推荐的做法哈,毕竟俩儿的风格不一样,但万一你就需要呢_^ ^_),结果遇到问题,最终倒腾解决。编译报错:$ is undefined or no-undef '$' is not defined,假设你已经使用vue-cli搭建好了开发的脚手架,接下来,看下面。。。NPM 安装 jQuery,项目根目录下运行以下代码npm...转载 2019-06-06 17:04:34 · 3416 阅读 · 0 评论 -
vue 项目的树形表格(二)
假设我们从后台请求回来的事一个一维数组,我们需要点击某一行展开表格,我们使用elementui的树形表格:<div> <el-table :data="tableData1" style="width: 100%" row-key="id" border lazy :load="load" ...原创 2019-06-18 10:34:23 · 4440 阅读 · 0 评论 -
前后端分离——MVVM 模式
阅读目录简而言之 组成部分 没有什么是一个栗子不能解决的简而言之之前对 MVVM 模式一直只是模模糊糊的认识,正所谓没有实践就没有发言权,通过这两年对 Vue 框架的深入学习和项目实践,终于可以装B了有了拨开云雾见月明的感觉。Model–View–ViewModel(MVVM) 是一个软件架构设计模式,由微软 WPF 和 Silverlight 的架构师 Ken Coope...转载 2018-08-13 15:10:24 · 2747 阅读 · 0 评论 -
vue项目启动流程
自Vue项目执行npm run dev启动项目后,开发环境首先会去找到webpack.dev.conf.js文件,这里配置了启动项目的服务,启动端口之类的:webpack.dev.conf.js下面引入了这两个文件执行npm run dev或者npm run start,实际是在node环境执行build/dev-server.js或者webpack.dev.conf.j...原创 2019-09-24 17:46:32 · 5645 阅读 · 0 评论 -
解决axios请求后端返回中文数据乱码问题
在项目开发时,遇到后端返回的数据中文乱码,顿时惊了,什么情况?于是尝试着去分析解决,一般浏览器的编码是UTF-8,且axios请求默认为utf-8,而后端的编码为GBK。所以出现乱码。尝试了无数种办法,如设置编码格式:Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',都没有用,而且网上的解决方式比较少,看了ax...原创 2019-09-26 17:23:57 · 23856 阅读 · 1 评论 -
vue原理解析
一、Vue对比其他框架原理Vue相对于React,Angular更加综合一点。AngularJS则使用了“脏值检测”。React则采用避免直接操作DOM的虚拟dom树。而Vue则采用的是Object.defineProperty特性(这在ES5中是无法slim的,这就是为什么vue2.0不支持ie8以下的浏览器)Vue可以说是尤雨溪从Angular中提炼出来的,又参照了React的性...转载 2019-09-27 15:34:07 · 1550 阅读 · 0 评论 -
websocket
一、为什么需要websocket? 前端和后端的交互模式最常见的就是前端发数据请求,从后端拿到数据后展示到页面中。如果前端不做操作,后端不能主动向前端推送数据,这也是http协议的缺陷。 因此,一种新的通信协议应运而生---websocket,他最大的特点就是服务端可以主动向客户端推送消息,客户端也可以主动向服务端发送消息,实现了真正的平等。websocket其他特点如下:...转载 2019-04-09 10:30:37 · 134 阅读 · 0 评论 -
如何刷新后端给的验证码
直接放在<img src="文件名"/> 就可以了,不用去调接口之类的,调接口获取的是一大串类似乱码的东西点击的时候改变验证码图片: 改一下src属性,url?一个随机数(防止缓存)<a href="javascript:;" @click="changeCodeImg()"><img :src="codeImg" alt="图片加载失败" />...原创 2019-03-29 13:35:33 · 717 阅读 · 0 评论 -
解决前端开发环境的跨域问题
在我们进行项目开发时,想要和别的服务器进行通信,那肯定会遇到跨域问题,所谓跨域 就是因为同源策略的限制,导致不同源之间不能通信。所谓同源是指,域名,协议,端口相同。同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。解决跨...原创 2018-11-19 10:38:40 · 1004 阅读 · 1 评论 -
使用Vue.js创建全局事件总线(Global Event Bus )
尽管有些关于事件总线/发布-订阅模式的报道不怎么好,但是在实现程序中相互无关联的部分之间的沟通方面这种模式是非常好的选择。下面我们一起来看一下Vue.js中强大的内建事件总线。创建事件总线(Event Bus)首先我们创建一个event bus然后export它,以便其他的模块和组件能够使用它。//文件->event-bus.jsimport Vue from '...转载 2018-09-01 18:03:12 · 4689 阅读 · 0 评论 -
webpack之proxyTable设置跨域
为什么要使用proxyTable很简单,两个字,跨域。 在平时项目的开发环境中,经常会遇到跨域的问题,尤其是使用vue-cli这种脚手架工具开发时,由于项目本身启动本地服务是需要占用一个端口的,所以必然会产生跨域的问题。当然跨域有多种解决方式,这里就不一一例举,下次弄篇文章单独讲,在使用webpack做构建工具的项目中使用proxyTable代理实现跨域是一种比较方便的选择。如何使用...转载 2018-08-24 11:25:06 · 771 阅读 · 0 评论 -
vue的通信方式(二)---祖父孙三个级别的之间的隔代通信
在之前的文章中我们提到了vue常用的几种通信方式,如父子,子父,以及兄弟组件之间的通信,可以通过这个传送门了解他们:Vue通信方式(一)当我们如果遇到祖组件,父组件,孙组件,三个级别嵌套时,我们该怎么在祖组件与孙组件之间通信呢,当然通过本地存储或者Vuex都可以实现,但仅仅是一个值得时候未免有点小题大做了,或者是组件之间的通信那样一级一级传?有点麻烦,在此,我们就详解如何实现祖孙之间的通信。...原创 2018-08-23 11:41:59 · 19336 阅读 · 6 评论 -
vue+axios 前端实现登录拦截(路由拦截、http拦截)
一、路由拦截登录拦截逻辑第一步:路由拦截首先在定义路由的时候就需要多添加一个自定义字段requireAuth,用于判断该路由的访问是否需要登录。如果用户已经登录,则顺利进入路由, 否则就进入登录页面。 1 2 3 4 5 6 7 8 9 10 11 12 13 14...转载 2018-08-27 15:49:05 · 1069 阅读 · 0 评论 -
vuex最简单、最详细的入门文档
如果你在使用 vue.js , 那么我想你可能会对 vue 组件之间的通信感到崩溃 。我在使用基于 vue.js 2.0 的UI框架 ElementUI 开发网站的时候 , 就遇到了这种问题 : 一个页面有很多表单 , 我试图将表单写成一个单文件组件 , 但是表单 ( 子组件 ) 里的数据和页面 ( 父组件 ) 按钮交互的时候 , 它们之间的通讯很麻烦 :<!--父组件中引入...转载 2018-08-16 17:28:02 · 121 阅读 · 0 评论 -
详解vue中的组件通信的几种方式,父子组件通信,兄弟组件通信,父组件触发子组件事件,子组件无法接受值的问题(一)
在另一篇文章我们会谈及祖父孙三级之间的通信,传送门:vue组件通信的方式(二)1.父组件向子组件传值(绑定属性):首先我们定义一个父组件father.vue:<template> <div> <h1>父组件</h1> <p>{{mydata}}</p> <hr/> <原创 2018-08-08 17:25:05 · 3052 阅读 · 1 评论 -
详细解析vue中的修饰符
1.表单输入框input中的修饰符.lazy:加lazy修饰符的区别相当于在输入后失去焦点或者摁了enter键视图才更新。不加lazy则是在keyup就更新,如下:<input v-model.lazy="msg" ><h3>{{msg}}</h3>.number:把输入的数值从字符串或其他类型转换为number类型,我们可以如下应正一下,当没输...原创 2018-08-08 16:09:21 · 3569 阅读 · 0 评论 -
vue中axios拦截器使用的图文详解
这次给大家带来vue中axios拦截器使用的图文详解,vue中axios拦截器使用的注意事项有哪些,下面就是实战案例,一起来看一下。 vue中axios不支持vue.use()方式声明使用。 所以有两种方法可以解决这点:第一种: 在main.js中引入axios,然后将其设置为vue原型链上的属性,这样在组件中就可以直接 this.axios使用了 1 2 ...转载 2018-08-15 19:39:24 · 6294 阅读 · 3 评论