vue

html直接引用vue和element-ui的方法

代码如下所示: 圆角按钮 Try Element ... »

vue配置多代理服务接口地址操作

一、介绍随着微服务架构的流行,后台项目逐渐被拆分成不同的模块进行通信,但是前端还是只有一个项目所以在访问不同模块后台时,需要请求不同的地址,在vue项目中,通过配置代理可以进行后端服务器接口地址访问,当需要访问不同微服务的后端接口时就需要配置不同的地址。 »

vue全局使用axios的操作

查看vue插件那么难道我们要在每个文件都要来引用一次axios吗?解决方法有很多种:1.结合 vue-axios使用2.axios 改写为 Vue 的原型属性3.结合 Vuex的action1.结合 vue-axios使用看了vue-axios的源码,它是按照vue插件的方式去写的。 »

vue项目中微信登录的实现操作

1、下载组件 wxlogin npm install vue-wxlogin –save 2、引入组件,给组件传参 3、重定向的url应该是微信登录官网中的微信授权作用域 4、如果url里面有端口号,微信授权作用里面也要有 5、重定向的url:需要在http://tool.chinaz.com/tools/urlencode.aspx中转码 6、微信登录成功后,会自动重定向到新地址,此... »

vue-cli脚手架的.babelrc文件用法说明

虽然es6还没被浏览器全部支持,但是使用es6是大势所趋,所以babel应运而生将es6代码转换成浏览器能够识别的代码 什么是.babelrc文件呢? 熟悉linux的同学一定知道,rc结尾的文件通常代表运行时自动加载的文件,配置等等,类似bashrc,zshrc 这个文件是用来设置转码的规则和插件 vue-cli脚手架的.babelrc文件 { // 此项指明,转码的规则 "presets": ... »

vue使用echarts实现水平柱形图实例

文件结构: testData.js文件 const dtuEdition = { name: '有方有线', number: 60, proportion: 40, edition: { '有方有线V1.0.0': 20, '有方有线V1.2.0': 15, '有方有线V2.0.1': 10, '有方有线V3.0.0': 8, '有方有线V3.2.0': 5, '有方有线V3.4.0': 4, '... »

vue axios请求成功却进入catch的原因分析

问题:axios返回200状态码却走进了catch里面原因:1.当axios请求完成后走的时then的代码块,如果then代码块中存在错误代码信息,这时就会进入catch中抛出异常2.axios是异步发起,若发起后页面刷新,那么就会丢失当前进程,导致接收不到。这样写可能容易看懂一些:axios.post .then .catchaxios.post .then .catch以上这篇vue ... »

Vue中关闭弹窗组件时销毁并隐藏操作

背景:在dialog弹窗组件中执行mounted钩子,将数据初始化,等取消关闭弹窗后,发现mounted钩子不执行原因:在vue的生命周期中,在页面初始化的时候mounted只会执行一次,关闭弹窗页面并没有销毁,所以不会再次执行解决办法:就是隐藏dialog的时候要销毁这个dialog。 »

vue自定义指令限制输入框输入值的步骤与完整代码

需求 前端开发过程中,经常遇到表单校验的需求,比如校验用户输入框的内容,限制用户只能输入数字。 本文内容基于 element-ui,el-form 组件可以绑定 model、rule 用于表单内容校验,但如果有多个表单多个输入框那就得写很多个 rule,虽然方法可以通用可是使用起来也是比较繁琐的,可通过自定义执行实现一次注册,多次使用。 Vue 自定义指令 我们使用 el-input 作为表单的输... »

Vue左滑组件slider使用详解

slider组件与swiper组件不同,slider滑动时并不翻页,实现的是左滑时,显示右侧内容的功能1、主要思路思路和swiper组件类似,主要的也就是对三个触摸事件的处理:touchstart、touchmove、touchend在touchstart事件处理程序中记录一些初始值,比如原始坐标,偏移距离;在touchmove事件处理程序中计算实时滑动的距 »

vue Treeselect 树形下拉框:获取选中节点的ids和lables操作

API: https://vue-treeselect.js.org/#events 1.ids: 即value 1.lable: 需要用到方法:@select(node,instanceId) 和 @deselect(node,instanceId) <template> <treeselect ref="DRHA_EFaultModeTree" v-model="DRHA_E... »

解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题

由于之前练习koa2,直接渲染的jquery写的传统页面。 这次想偷懒,直接script引入vue,发现渲染不出data值。 渲染引擎用得是xtpl, 找了半天没有发现可以修改xtpl渲染分隔符的配置 vue有! var myVue = new Vue({ el: '#msgBoard', delimiters:['$$','$$'], data() { return { msg: { num: ... »

在vue中实现清除echarts上次保留的数据(亲测有效)

因为我是将echarts封装好后,父组件只要传递值就可以进行渲染。但是点击多次数据请求的时候echarts会多次渲染。data里定义的三组echarts数据在axios发送请求后先清空再赋值。补充知识:vue.js使用vue-echarts给柱形图绑定点击事件我就废话不多说了,大家还是直接看代码吧~ Random .echarts 以上这篇在vue中实现清除echarts上次保留的数据就... »

vue中后端做Excel导出功能返回数据流前端的处理操作

项目中有一个导出功能的实现,用博客来记录一下。因为需求对导出表格的数据格式和样式有要求,所以这个导出功能放到后端来做,而且后端返回的是数据流,所以需要处理成想要的表格并导出来。 先看下效果图: 页面效果: 点击 导出Excel 调用导出接口成功了: 后台返回的数据流,一堆看不懂的乱码: 接下来要处理这堆乱码,因为用到的地方多,所以在util.js文件里封装了一个公共方法并抛出: 虽然vue里有封装... »

vue路由切换时取消之前的所有请求操作

在main.js文件里 import router from 'router/'; import Vue from 'vue'; Vue.Cancel = []; router.beforeEach((to, from, next) => { while (Vue.Cancel.length > 0) { Vue.Cancel.shift()('cancel'); } ... »

详解vue组件之间的通信

== -1 } }}//注意那些 prop 会在一个组件实例创建之前进行验证,所以实例的 property 在 default 或 validator 函数中是不可用的。 »

vue实现移动端触屏拖拽功能

vue实现移动端可拖拽浮球,供大家参考,具体内容如下1 首先创建一个div 奖励规则2 给 div 附上样式 .floatball{ color:white; height:50px; width: 50px; padding: 5px; z-index: 990; position: fixed; top: 60px; right: 320px; bord »

element-ui和vue表单(对话框)验证提示语(残留)清除操作

问题是这样的: 如果一个页面有多个按钮打开相同的element-ui的Dialog对话框,那么如果第一个点击”顺序”按钮出现红色验证提示语后, 再点击“取消”,或者点击页面空白处此对话框消失,而后再点击同一个“顺序”按钮亦或别的“顺序”按钮, 那么此红色提示依然存在,显然是无法忍受的,那么怎么去除呢, 这里也用到一个vue的一个语法watch,从字面意思上理解就是起到监控的... »

vue 项目引入echarts 添加点击事件操作

主要思想是通过判断用户登录后,根据后台返回的对应用户权限去验证用户是否可以进行相关的操作。') router.push } }else { alert('请登录之后再操作! »

vue等两个接口都返回结果再执行下一步的实例

vue等两个接口都返回结果再执行下一步的实例

next 只能調用一次,這邊可以用 Promise.all 解決,等待兩個異步操作都返回結果後再 next:beforeRouteEnter (to, from, next) { // Promise.all 會等到數組內的 Promise 都 resolve 後才會繼續跑(then) Promise.all([ main._base({ method »

vue Treeselect下拉树只能选择第N级元素实现代码

今天在项目中遇到一个需求,就是vue下拉树只能选择第三级选项,为了解决这个问题,查阅了官方文档 https://vue-treeselect.js.org/#disable-item-selection 然后看到isDisabled属性可以禁止选择,具体实现代码如下: <treeselect :disable-branch-nodes="true" :normalizer="normaliz... »

vue自定义指令和动态路由实现权限控制

在Vue-element-admin模板项目的src/permission.js文件中,给出了路由守卫、加载动态路由的实现方案,在实现了基于不同角色加载动态路由的功能。这种多个组件依赖一组属性的场景,Vue提供了VueX作为全局状态管理方案。 »

vue实现移动端拖动排序

本文实例为大家分享了vue实现移动端拖动排序的具体代码,供大家参考,具体内容如下效果代码: } .mainDiv .mainDiv > .childDiv .test { position: relative; height: 50px; width: auto; background-color: red; b »

vue界面发送表情的实现代码

完全照搬不一定能写出来 只是让看个思想 <template> <section class="dialogue-section clearfix" > <div class="row clearfix" v-for="(item,index) in msgs" :key = index> <img :src="item.uid == myInfo.uid ... »

Vue页面跳转传递参数及接收方式

最近接触了vue项目,这里记录一下vue跳转到下一页面携带参数的两种方式。这样的话,可以避免A页面跳转B页面时候,手动刷新才显示信息。直接登录成功后,直接调用store的方法,把值存储进去,B页面可以直接显示用户信息。以上这篇Vue页面跳转传递参数及接收方式就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持软件开发网。 »

Page 1 of 278123»