vue
文章平均质量分 53
vue笔记
Schafferyy
这个作者很懒,什么都没留下…
展开
-
element--select封装
element-select二次封装原创 2023-01-13 09:35:47 · 933 阅读 · 0 评论 -
vue报错--TypeError: Cannot read property ‘_t‘ of undefined“
使用vue的ElementUI库,在多语言时报错:TypeError: Cannot read property '_t' of undefined// 或者TypeError: Cannot read property 'reading_t' of undefined导致一些Element的组件不能正常显示。经过多次尝试,问题出现的原因是:在js中使用了如下代码进行翻译:this.$t('...')解决办法一:在main.js中 将Vue.use(ElementUI)改为Vu原创 2021-09-25 10:09:00 · 3145 阅读 · 1 评论 -
vue开发环境配置跨域
production:产品 生产环境development:开发 开发环境1.开发环境设置跨域使用工具:vue-cli自带的配置配置目录 /config/index.js//自行复制黏贴proxyTable: { '/apis':{ target: 'http://10.1.63.26:19080/', // 后台api changeOrigin: true, //是否跨域 // secure: true, pathRewrite: { .原创 2021-08-25 20:54:37 · 349 阅读 · 0 评论 -
`Form.Item` cannot generate `validateStatus` and `help` automatically解决方案
在同一个form-item中使用v-for循环遍历生成了多个select框(其他可循环展示的控件都是同样的问题),并且每个都加上了v-decorator作为数组,但实际每一个from-item中只允许有一个v-decorator进行绑定。解决方案:在v-for内要生成的要加v-decorator的元素(如input)外再包裹一层form-item,即对n个元素进行循环遍历将生成n个form-item,满足了一个form-item仅有一个v-decorator的要求,不再报错。使用select组建时的原创 2021-04-14 10:34:25 · 4285 阅读 · 1 评论 -
`defaultValue` is invalid for `getFieldDecorator` will set `value`解决方案。
在使用vue的form表单校验的时候,使用的api是v-decorator。但是此处会报错。`defaultValue` is invalid for `getFieldDecorator` will set `value`, please use `option.initialValue` instead根据官网描述:this.form.getFieldDecorator(id, options) 和 v-decorator="[id, options]"经过 getFieldDecorator原创 2021-04-14 10:30:49 · 5417 阅读 · 2 评论 -
综合三大问题的Module Error (from ./node_modules/eslint-loader/index.js)解决办法
问题1、Module Error (from ./node_modules/eslint-loader/index.js)报错vue启动项目报如下错误:Failed to compile../src/components/Vcontent.vueModule Error (from ./node_modules/eslint-loader/index.js):当vue渲染html为原生标签时出这个错误,需要修改配置项。解决方法如下:第一步:初始化并重新安装eslintnpm init -原创 2021-03-11 10:37:57 · 17007 阅读 · 1 评论 -
Vue2和Vue3开发组件有什么区别
我们一直都有关注和阅读很多关于Vue3的新特性和功能即将到来。但是我们没有一个具体的概念在开发中会有如何的改变和不一样的体验。还有一些童鞋已经开始又慌又抓狂了 – “又要开始学新的写法了。所以这里我使用Vue2和Vue3开发一个简单的表格组件来展示一下Vue2和Vue3开发组件的区别。看完这片文章后,你将会有一个概念Vue2和Vue3开发组件时的区别,并且为Vue3的开发之路做好准备。ღ(◔ ◔ღ)ミ废话少说,让我们开始吧~ (๑ •̀ㅂ•́) ✧创建一个 template组件来说,大多代码在Vu转载 2021-02-23 14:19:45 · 163 阅读 · 0 评论 -
vue和react详细对比
共同点:a、都使用虚拟domb、提供了响应式和组件化的视图组件c、注意力集中保持在核心库,而将其他功能如路由和全局状态管理交给相关的库。区别:a、优化b、HTML&CSSc、构建工具d、数据绑定e、状态管理f、路由g、渲染性能h、数据更新i、开发模式及规模j、使用场景k、服务器端渲染(SSR)l、扩展(高阶组件和mixin)1、都使用虚拟DOMvue:Vue在2.0版本引入了vdom。其vdom是基于 snabbdom 库所做的修改。snabbdom是一个开源的v原创 2021-01-29 11:06:11 · 662 阅读 · 0 评论 -
vue面试题目(更新版)
vue面试题目vue数据1. 说一下Vue的双向绑定数据的原理2. 解释单向数据流和双向数据绑定3. Vue 如何去除url中的4. 对 MVC、MVVM的理解5. 介绍虚拟DOM6. vue生命周期的理解7. 组件通信8. vue-router 路由实现9. v-if 和 v-show 区别10. $ route和$router的区别11. NextTick 是做什么的12. Vue 组件 data 为什么必须是函数13. 计算属性computed 和事件 methods 有什么区别14. 对比 jQu原创 2020-12-14 13:55:12 · 1329 阅读 · 1 评论 -
vue兄弟组件间通信&eventbus遇到的问题(多次触发、第一次不触发)
EventHub 是一个非常重要且常用的东西,在不相关组件通信方面有着很强大的作用。EventHub想想如果从最顶层组件传一个 data 给最底层组件,仅仅使用父子传递的方式会变得十分麻烦。而 EventHub 就是用来解决这个问题的:在需要获取 data 的组件上设置一个监听器,每次要传递 data 时,那个组件就广播这个事件并调用这些监听器。我们不难发现 EventHub 的主要功能就两个: 监听和广播,当然还有去掉监听器。而 Vue 刚好给我们提供了这些功能,我们可以使用 Vue 来描述这些功能原创 2020-11-18 16:55:39 · 4579 阅读 · 0 评论 -
Antd 的vue模态框modal去除确认或添加按钮(自定义按钮)
1.去除确认按钮<template> <a-modal :title="title" :width="950" :visible="visible" :confirmLoading="confirmLoading" @ok="handleOk" @cancel="handleCancel" cancelText="关闭"> <template slot="footer"> <a-b原创 2020-11-05 11:14:36 · 16273 阅读 · 4 评论 -
ECharts的多树图切换时出现的图形混乱问题
问题描述:vue的这四个tree节点。通过点击来展示不同的拓扑,用的是ECharts树图来实现的拓扑图。但是在切换的时候出现问题了。总结:出现上面的情况后,刷新页面再打开就正常,但是如果先打开A弹窗,再打开B弹窗,还是会出现上面的情况,混乱后的折线图就好像是上个弹窗里面折线图的数据缓存,所以就查找echarts文档,查看有没有清楚缓存或者其他什么方法。解决办法:通过myChart.clear()的方法情况图像的的情形和实例,然后再次把重新请求的数据myChart.setOption(opt原创 2020-10-30 14:56:26 · 2274 阅读 · 2 评论 -
vuex的Mutations及mapMutations传参(mutations&actions)
状态管理模式vuex的完整组成部分包括了state、getters、mutations以及actions。在组件内通过dispatch触发Actions中定义的方法,该方法通过commit一个mutations更改state,state的值会响应式的更新到vue组件中。如果是同步请求,可以直接在vue组件内commit一个mutations,如果有异步请求,则按着官网给的顺序图执行。1.Mutationsindex.jsimport Vue from 'vue'import Vuex from原创 2020-10-20 14:09:57 · 1193 阅读 · 0 评论 -
ECharts图表属性设置
theme = {// 全图默认背景// backgroundColor: ‘rgba(0,0,0,0)’,// 默认色板color: ['#ff7f50','#87cefa','#da70d6','#32cd32','#6495ed', '#ff69b4','#ba55d3','#cd5c5c','#ffa500','#40e0d0', '#1e90ff','#ff6347','#7b68ee','#00fa9a','#ffd700', '#669原创 2020-09-27 14:03:43 · 119 阅读 · 0 评论 -
vue中npm install jspdf --save报错怎么解决
由于项目需求,需要将html界面的报表转换成pdf输出下载。网上荡了很久,最终用的html2canvas和jspdf实现需求。总结了下基本都是利用canvas将页面模块画成图片在转化为PDF文件。自己实现过程中遇到一点小坑。在此将整个过程记录下来。第一步:安装html2canvas和jspdf依赖npm install html2canvas --save上面一步只是安装了canvas画图工具的依赖,接着就是第一个坑了。不知道你又没有跟我一样试了无数次的以下命令去安装jsPDF依赖npm原创 2020-08-21 10:16:39 · 4343 阅读 · 1 评论 -
vue父子组件之间互相传值,以及组件之间方法相互调用
vue使用中,经常会用到组件,好处是:1、如果有一个功能很多地方都会用到,写成一个组件就不用重复写这个功能了;2、页面内容会简洁一些;方便管控;子组件的传值是通过props来传递数据,$emit来触发事件。一、父传子值,父调用子方法1、父组件向子组件传值(引入子组件→在引入的子组件绑定需要传送的值→子组件props接收)<!-父组件---><template> <div> <child :msg="msg"></child>原创 2020-08-14 14:47:35 · 1281 阅读 · 0 评论 -
Vue中父组件向子组件传递一个动态的值,子组件保持实时更新。
场景:父组件发生数据变化,动态的传递给子组件,子组件实时刷新视图解决方法:需要在子组件watch中(监听)父组件数据的变化在子组件中使用watch应该注意的问题:1.watch监听普通类型的数据:data() { return { frontPoints: 0 } }, watch: { frontPoints(newValue, oldValue) { console.log(newValue)原创 2020-08-13 15:46:23 · 2206 阅读 · 0 评论 -
vue项目pdf文档的在线预览(注:意外服务器响应或pdf文件缺失损坏解决办法)
一、引入插件npm安装:npm install --save pdfjs方式一:只引入pdf.js的核心文件pdf.js和pdf.work.js,其他无关的文件全部删除,如图:方式二:将插件直接放在static文件夹下,如图:二、前端页面代码方式一和方式二:特点精简<template> <div> <canvas v-for="page in pages" :id="'the-canvas'+page" :key="page"></can原创 2020-08-04 10:04:51 · 4248 阅读 · 2 评论 -
Ant Design Vue 如何分页(后台传入)
我们在使用分页使,直接用表格()的自定义:pagination属性最方便;如下图所示: <a-table ref="table" style="margin-bottom: 24px" row-key="key" :columns="goodsColumns" :data-source="loadGoodsData" :pagination="paginationOpt"原创 2020-07-23 14:22:11 · 3142 阅读 · 2 评论 -
vue + antd项目Table的前台内容排序
1、table部分代码<!-- dom结构 --> <a-table row-key="id" :columns="columns" :loading="loading" :data-source="list" :pagination="pagination" @change="handlePageChange" > <template sl原创 2020-07-23 14:17:24 · 2255 阅读 · 2 评论 -
vue获取当前日期以及前七天日期
一、获取当前日期:mounted () { this.getTime() },getTime () { // new Date() new一个data对象,当前日期和时间 // toLocaleString() 方法可根据本地时间把 Date 对象转换为字符串,并返回结果。 this.nowtime = new Date().toLocaleString() console.log('nowtime: ', this.nowt原创 2020-07-20 10:40:34 · 7155 阅读 · 0 评论 -
vue中如何利用js如何检测网络状况,监听网络状态
一、通用方法,Html5在window.navigator对象上添加了一个属性onLine 返回布尔值 true表示在线.同时新增了两个事件: window.addEventListener('online', function(){ // 网络由异常到正常时触发 }); window.addEventListener('offline', function(){ // 网络由正常常到异常时触发 });复制代码在vue中实现思路如下:data中原创 2020-07-13 16:34:39 · 8101 阅读 · 2 评论 -
vue使用v-for实现hover点击button按钮颜色变换效果
使用Vue来实现鼠标悬停效果。可以使用事件处理器v-on指令(简写为:@)来完成。为标签绑定mouseenter以及mouseleave事件即可。hover是css中的选择器,用于选择鼠标指针浮动在上面的元素。所以a:hover可用于设置当鼠标悬停在超链接之上时超链接的样式。在当今比较流行的前端框架里 vue react 都是以数据驱动的形式来修改元素的状态, 而并非是之前使用jq来操作dom元素, 这样效率也是非常低的, 像vue, react 都是以虚拟dom的形式渲染页面, 以数据的变化来更新虚拟原创 2020-07-13 15:01:49 · 4556 阅读 · 0 评论 -
VUE 使用router-link路由参数变化,页面数据不刷新问题
出现这种情况是因为依赖路由的params参数获取写在created生命周期里面,因为相同路由二次甚至多次加载的关系 没有达到监听,退出页面再进入另一个文章页面并不会运行created组件生命周期,导致文章数据还是第一次进入的数据。解决方法:watch监听路由是否变化watch: { // 方法1 '$route': function (to, from) { // 监听路由是否变化 console.log('123456789', to, from) if (this.$rout原创 2020-07-13 14:49:05 · 2495 阅读 · 0 评论 -
vue中报错:`value` provides invalidate moment time.
问题当使用vue中的日期选择框时(即datepicker方法),使用v-modal绑定数据时,会显示如下错误:[antdv: DatePicker] value provides invalidate moment time. If you want to set empty value, use null instead.解决方法:官方文档的API如下:vue代码如下:<a-form-item label="建造时间" :labelCol="labelCol"原创 2020-06-11 14:09:54 · 15222 阅读 · 5 评论 -
vue中报错:Error in render: TypeError: Cannot read property name(或者其他属性) of undefined解决办法
vue界面显示Error in render: "TypeError: Cannot read property ‘name’ of undefined"等问题,虽然不影响界面显示,但是打开控制台一大片红实在不美观。vue中使用{{}}文本插值方式,通过 . 级联显示内容。在级联展示时,如果三层级联,只能解析在data中定义也就是vue实例上的对象子一层的东西,对于孙一层的东西就被解析成不在vue实例上的。也就是报错的此属性不在vue实例上。后端内容返回之前,控制台会Cannot read prope原创 2020-06-09 10:26:53 · 4431 阅读 · 0 评论 -
vue中利用js函数截取时间的年月日时分秒
在vue中,从后台获取数据,如果不是sql语句(类似:select convert(char(10),GetDate(),120) as Date)获取的数据,在前台就会出现如下情况:解决方法:使用自定义函数格式化时间数据:(1)年月日: var timearr = time.replace(" ", ":").replace(/\:/g, "-").split("-"); var timestr = timearr[0]+"年"+ Number(timearr[1]原创 2020-06-08 11:15:51 · 6607 阅读 · 0 评论 -
vue中如何实现table的详情页获取及渲染
一、页面跳转方式在页面中有两种跳转方式,第一种跳转方式是使用 a 标签的形式进行跳转,也称之为标签跳转。第二种跳转方式是使用 window.location.href 的形式进行跳转,也称之为编程式跳转。在vue页面中,实现列表页跳转到详情页,也就有两种方式。第一种是标签式跳转,通过router-link的形式进行跳转。第二种是编程式跳转,通过 this.$router.push的形式进行跳转。this.$ route 和 this.$ router 的区别:~ this.$route 是路由参原创 2020-05-21 09:32:37 · 1361 阅读 · 1 评论 -
vue中使用mock模拟后端数据
## vue中使用mock模拟后端数据网上关于mock模拟数据方面的文章比较少,在做项目的时候遇见这个问题,学会了皮毛,记录一下自己的学习经历。mock的官方网址:http://mockjs.com/下面就进入正题吧:vue项目中直接用mock模拟数据首先需要定义一个我们需要数据的数组名(空数组):const goodsColumns = []const goodsColumns1 = []const loadGoodsData1 = []const loadGoodsData2 =原创 2020-05-17 21:21:19 · 514 阅读 · 0 评论