Vue.js框架开发
Dream_xun
越努力,越幸运!
展开
-
Vue使用插件v-viewer预览单张图片
1.什么是V-viewer用于图片浏览的Vue组件,支持旋转、缩放、翻转等操作,基于viewer.js。2.安装使用npm命令安装npm install v-viewer3.使用在main.js中引入import 'viewerjs/dist/viewer.css'import Viewer from 'v-viewer'Vue.use(Viewer)...原创 2020-01-01 19:48:30 · 3636 阅读 · 8 评论 -
vue watch属性的简单使用,watch监听对象变化
代码中监听了一个简单的属性currentPage和一个对象selectForm,只要它们的值一改变就会触发其中的逻辑函数或者异步请求watch: { //属性监听 currentPage(oldV, newV) { this.exchangeCurrentPage(); }, //对象监听 ...原创 2018-12-07 12:26:38 · 1507 阅读 · 0 评论 -
vue 报错 TypeError: "_utils_global__WEBPACK_IMPORTED_MODULE_1__.default[option] is undefined"
今天做vue项目开发遇到一个问题,找了好久不知道问题出在哪里,后来莫名其妙的添加了一个全局变量,就突然好 了错误信息:TypeError: "_utils_global__WEBPACK_IMPORTED_MODULE_1__.default[option] is undefined"原因是前端用到了这个全局变量过滤后来我去添加了这个全局变量问题就解决了写此文章,以...原创 2018-12-27 11:43:43 · 8577 阅读 · 0 评论 -
vue 利用事件改变数组属性值,视图没有及时更新数据的处理方法
场景在我使用vuex的过程中,使用computed获取数据。获取到的数据格式是这个样子的carts: [{}, {}, {}]但是我在这个页面中需要给这个数据额外添加一个数据字段carts[index].editState = false;遇到的问题当我这样开始做的时候,是直接在conputed计算属性中获取这个值,视图没有更新。参考这篇文章:https://cn....原创 2018-12-11 17:13:10 · 4934 阅读 · 1 评论 -
vue控制台报错Duplicate keys detected: 'xxxx'. This may cause an update error.解决方案
vue项目中报了一个这样的错:Duplicate keys detected: 'C1812170006'. This may cause an update error.虽然不影响使用,但是报错还是得解决的只要一进入该页面,就会出这个红色的错误,网上查了资料,说是v-for循环里,key值可能重复了,所以会报这个错。查看了下,页面果然有v-for循环key值是必须唯一的,...原创 2018-12-18 14:24:34 · 273669 阅读 · 32 评论 -
vue element tabs 点击链接切换选项卡
一、业务需求工作中,用到element UI的el-tabs组件,tabs里面有几个<el-tab-pane>现在需要在第一个<el-tab-pane>内容中点击某个内容,然后切换到其他选项卡中显示对应的内容如图我需要点击提货单编号后在第二个选项卡中显示对应的提货单信息对应的提货单信息二、代码实现思路就是:在需要链接的地方添加事件(我在提货单...原创 2019-02-22 17:39:12 · 5787 阅读 · 6 评论 -
vue 开发过程中常遇到的问题总结,干货!
vue 开发过程中常遇到的问题总结1. props单向绑定vue中的props是单向绑定的,父组件的属性变化时会传递给子组件,子组件内部不应改变props的值,否则控制台会给出警告。但如果props的类型为数组或者对象时,在子组件内部改变props的值控制台不会警告。因为数组或对象是地址引用,vue不会检测到props发生改变。所以有的情况需要在子组件内部改变父组件的值,可以将属性定义...原创 2019-03-21 11:21:12 · 7644 阅读 · 0 评论 -
vue 点击按钮复制指定内容到剪切板,复制变量值到剪切板
1.安装插件npm install --save vue-clipboard2或者cnpm install --save vue-clipboard22.main.js引入,或者在使用的组件页面引入,这里在main.js引入import Vue from 'vue' import VueClipboard from 'vue-clipboard2' Vue.use(V...原创 2019-05-23 17:59:19 · 3578 阅读 · 0 评论 -
elememtUI el-table打印出来行内容错行的问题
一、问题描述1.最近用vue+elementUI做了一个打印功能,打印的内容包含了elementUI 的table,table的数据发现打印出来行错乱了,就像下面图片上这样子调试了好一会才发现是el-table中一个属性的问题,只要把这两个属性去了就好了二、解决办法如下图,把fixed属性去掉打印出来就不会错行了。打印正常的图...原创 2019-07-12 14:05:06 · 2275 阅读 · 1 评论 -
vue cli3创建项目启动后一直发http://localhost:8080/sockjs-node/info?t=4567167564请求
亲测已解决;首先sockjs-node是一个JavaScript库,提供跨浏览器JavaScript的API,创建了一个低延迟,全双工的浏览器和web服务器之间通信通道。如果你的项目没有用到sockjs,vuecli3 运行npm run serve 之后network里面一直调用一个接口:http://localhost:8080/sockjs-node/info?t=15564182839...原创 2019-07-23 19:05:42 · 4683 阅读 · 0 评论 -
vue Cli3官网地址
vue3.0官方文档地址https://cli.vuejs.org/zh/原创 2019-07-22 15:38:21 · 4162 阅读 · 0 评论 -
Vue Router官方地址
Vue Router官方地址:https://router.vuejs.org/zh/guide/#html原创 2019-07-22 18:06:49 · 1520 阅读 · 0 评论 -
JS对象克隆,js改变新对象的值不影响引用对象的值,亲测有效
话不多说,直接上代码getChildFormData(row,data){ this.form = {id:this.form.id} this.form.produceId = row.id this.arrData = data //这样赋值其实就是引用,地址相同, alert(this.arrData===data) //使用===(绝对等于)打印 ...原创 2018-12-07 12:21:17 · 3739 阅读 · 0 评论 -
vue el-table添加数据后自动定位到行前行尾,el-table添加数据后滚动到行前行尾
el-table 添加数据行后定位到最后一行(滚动条滚动到对应的行头或行尾)问题滚动到第一行:this.$refs.table.bodyWrapper.scrollTop =0;滚动到最后一行:push进table绑定的数据源后定位到最后一行 //验证产品类型是否一致:是就可以添加,否则提示错误 if(valid){ ...原创 2018-12-19 16:57:02 · 10769 阅读 · 4 评论 -
dialog中el-table默认勾选数据,el-table默认勾选数据
1.序言由于工作需求,需要在dialog弹出框中的table中加载动态数据并且想要数据加载完成后默认勾选一些数据,于是尝试了网上很多方法都没成功:网上一般是这么说的:使用table多行选中事件toggleRowSelection(row,selected)来完成将上面的代码放在这里(其中multipleTable是el-table的ref值,this.tableData[ind...原创 2018-12-04 10:10:22 · 10122 阅读 · 6 评论 -
vue-devtools的安装与使用
vue-devtools的安装与使用一.在github上下载压缩包,github下载地址:https://github.com/vuejs/vue-devtools二.解压到本地的某盘三.用你的npm中进入该文件夹下四.依次输:1:npm install (如果在这部报错的话,就改用cnpm install。 cnpm需要安装 安装地址)2:npm run build ...转载 2018-09-04 16:22:26 · 145 阅读 · 0 评论 -
前端框架Vue——vue-i18n ,vue项目中如何实现国际化,$t的用法
一、demo 场景需求分析需求很简单,左上角 ‘’网易云音乐‘’就是一个中英文切换的按钮,点击弹出提示框,确认切换语言后,实现英文版本。切换成英文版本:二、实现国际化 首先,我开发是以 vue 为技术栈,所以如题用的国际化插件是 vue-i18n,附上 github 传送门。1、我们得先有开发环境,先有项目跑起来,我推荐如果是喜欢用 vue 的小伙伴,可以尝试 v...转载 2018-09-17 15:49:04 · 78819 阅读 · 3 评论 -
vue如何使用rules对表单字段进行校验
基于element-ui1、在代码中,添加属性:rules<el-form :model="form" :rules="rules" ref="form" label-width="150px"></el-form>并且,在<el-form-item>中添加prop属性,对应rules中的规则2、新开一个文件夹(validate.js)...转载 2018-09-17 19:07:06 · 67733 阅读 · 3 评论 -
Vue2项目构建 后台管理经典模板
Vue.js( 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。此项目搭建用了Vue2 + iview, iview是很不错的一套UI框架,他像bootstrap一样可以适配各种分辨率。一.初始化简单demo1.vue2也有自己的脚手架工具vue-cli,首先你得...原创 2018-09-18 16:04:10 · 4304 阅读 · 0 评论 -
解决Vue请求 ‘No 'Access-Control-Allow-Origin' header is present on the requested resource’错误
如果我们用VueResouce直接请求,这样写(以豆瓣api为例):this.$http.get('https://api.douban.com//v2/movie/top250').then((response) => { this.movie = response.data; console.log(this.movie); });就会报错:...转载 2018-09-11 10:40:32 · 3396 阅读 · 0 评论 -
最实用的vue刷新当前页面,provide / inject 组合 方式实现vue页面刷新
这是一种最实用的vue刷新当前页面,其他方式一般会出现一个瞬间的空白页面,体验不好,相当于按ctrl+F5 强制刷新那种方式:provide / inject 组合 方式实现vue页面刷新1.修改App.vue代码如下图所示通过声明reload方法,控制isRouterAlice属性true or false 来控制router-view的显示或隐藏,从而控制页面的再次加载2....原创 2018-10-12 11:37:28 · 4659 阅读 · 6 评论 -
TagsView.vue 有效果图
先上代码,项目结构图和效果图在后面展示。1.TagsView.vue<template> <div class="tags-view-container"> <scroll-pane class="tags-view-wrapper" ref="scrollPane"> <router原创 2018-10-18 14:36:59 · 4365 阅读 · 11 评论 -
vue rules验证规则,后面附案例
required : 必须值验证属性[['字段名'],required,'requiredValue'=>'必填值','message'=>'提示信息']; #说明:CRequiredValidator 的别名, 确保了特性不为空. email : 邮箱验证['email', 'email']; #说明:CEmailValidator的别名,确保了特性的值是一个有效的...原创 2018-10-15 17:03:37 · 27635 阅读 · 6 评论 -
js将父子关系(含有pId)数据转化为树形结构数据,一维数组转化为二位数组
获取tree数据:调用方法获取tree,然后绑定在组件数据源上将GetDeptListTree方法返回的tree数据绑定在组件上具体的转换方法:最终效果:源数据格式: ...原创 2018-10-10 09:10:12 · 2363 阅读 · 2 评论 -
JS (GMT)与普通时间格式的互相转换,JS转GMT格式时间
在使用Element UI的过程中,发现DateTimePicker选择器返回值是GMT格式的,但向后端发送的时间格式是标准时间格式,于是需要把DateTimePicker返回的值转换格式1.GMT转普通格式GMTToStr(time){ let date = new Date(time) let Str=date.getFullYear() + '-' + (d...转载 2018-10-19 10:51:42 · 16248 阅读 · 8 评论 -
Vue Treeselect下拉树实现,选择部门下拉树,下拉树菜单
先来看一张最基本的效果图:介绍vue-treeselect是一个多选组件,具有对Vue.js的嵌套选项支持。具有嵌套选项支持的单个和多个选择 模糊匹配 异步搜索 延迟加载(仅在需要时加载深层选项的数据) 键盘支持(使用Arrow Up&Arrow Down键导航,使用键选择选项Enter等) 丰富的选项和高度可定制 支持各种浏览器需要Vue 2.2+入门...原创 2018-10-17 20:49:25 · 71520 阅读 · 21 评论 -
Window下安装node\npm\cnpm
1、安装node.jsnode.js的官方地址为:https://nodejs.org/en/download/。根据windows版本后,选择要下载的安装包,下载完毕,按照windows一般应用程序,一路next就可以安装成功,建议不要安装在系统盘(如C:)。 2、设置global和cache路径设置路径能够把通过npm安装的模块集中在一起,便于管理。(1)在nodejs...转载 2018-09-04 15:50:56 · 308 阅读 · 0 评论