![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
橙橙鲁
作为一个前端人,无论工作跑偏到哪,始终不忘初心。
展开
-
vue 引入字体图标显示方块
问题现象:使用element-ui,字体图表显示“方块”。项目加载后,看加载文件,并没有.woff或.woff2或.ttf等字体图标文件。也没有字体图表转换后的base64,文件。环境;webpack4,vue2有问题的代码:webpack.base.conf.js: module: { rules: [ { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, u原创 2021-11-26 10:29:07 · 1722 阅读 · 1 评论 -
vue-router中params和query传参用法对比梳理
通过vue-router在路由组件中传参,可以使用params和query两种方式。下文将从普通路由跳转传参、获取Url地址参数两个方向梳理两种用法。1. 获取Url地址的参数:1.1 query方式query方式传递的参数,会显式的在浏览器url地址栏显示出来url 地址格式形如:www.**.com/getName?id=km,参数用?方式拼接。(参数是"km")// router.js 路由配置{ name: 'testComponent', path: '/test原创 2021-03-07 15:11:09 · 731 阅读 · 0 评论 -
axios data与params 对比及@RequestBody和@RequestParam混合入参写法
axios 配置官方文档axios 中传递参数的方式有两种属性:data,params// 发送 POST 请求axios({ method: 'post', url: '/user/12345', data: { firstName: 'Fred', lastName: 'Flintstone' }, params: { ID: 12345 },});// params 是即将与请求一起发送的 URL 参数// 必须是一个无格式对象(plai原创 2021-01-13 18:00:24 · 2835 阅读 · 0 评论 -
踩坑 ES6箭头函数 this指向问题记录
之前看es6新特性时,有个印象关于 ES6箭头函数 this指向问题的特殊性。然而并没谨记在心o(╥﹏╥)o今儿帮忙解决问题,调入此坑将近两小时不能自拔????最开始的现象只是赋值无法成功,追查到时因为无法进入组件监听所以没有update,之后发现this.data 要赋值的对象是普通的js对象,而非vue对象。vue对象形式:普通js对象:而后追查到时this指向问题。之后追查到在发request请求then的回调结果中this的指向变成了Window对象,而非vue对象。然后又傻傻地追查了好几原创 2020-07-27 17:34:42 · 349 阅读 · 0 评论 -
vue 动态设置 echarts 画布大小 & 更新图表数据
在筛选条件修改后,echarts的图表需要动态修改图表。动态修改echarts 画布大小监听width,height的改变,在更新图表时,使用resize()方法更新图表画布的大小const chart = echarts.init(document.getElementById(this.id)) //获取实例chart.resize({ width: this.width, height: this.height}) //调用resize方法官方文档resize()方法原创 2020-06-29 14:25:28 · 3194 阅读 · 0 评论 -
vue引入多个UI框架
背景本身项目里使用antdv,由于需要选择日期区间的组件,想再引入Element。引入antdv:初始化antdv$ npm i --save ant-design-vue局部引入import 'ant-design-vue/dist/antd.css'import { Button, ... DatePicker} from 'ant-design-vue'Vue.use(Button)...Vue.use(DatePicker)或全局引用也可以。可参考 官方文原创 2020-06-23 13:19:02 · 3736 阅读 · 1 评论 -
vue 表格固定列,表格另一侧滑动
实现表格固定列,右半部分依旧可以互动效果,如下图:解决思路:写两个<table>:一个是整体的table,table外侧的div保持宽度固定和overflow:scroll,内部的table宽度大于外部才能滚动起来;一个是固定再左侧的table,固定的这个table内容只有固定显示的这部分,同时,position:absolute在左侧,相当于就是给那个表格盖一层;实际效...原创 2020-04-29 13:49:59 · 4207 阅读 · 1 评论 -
vue axios发送post请求 network中链接有参数拼接
axios.create() 的主要参数: params: {userName:'test', password: '123'}, method: 'post'此时network中的情况如下:链接上会拼接参数:http://localhost:8888/login/login?userName=test&password=123分析原因:在使用axios.request(...原创 2020-01-10 17:53:44 · 5117 阅读 · 0 评论 -
vue2项目IE11无法打开问题
问题1: vue2项目在ie11上打开,一片空白。`npm install --save babel-polyfill`问题2:引入babel-polyfill后,页面显示,但无法跳转页面。也看不到报错。增加`, resolve('node_modules/ant-design-vue')`原创 2019-11-18 15:55:10 · 1174 阅读 · 0 评论 -
vue 多个路由对应同一组件多次调用,页面未刷新问题
问题现象:有三个菜单,只是参数不同,但使用的同一个组件页面,配置路由时指向了不同三个路由。但切换菜单时,页面不再刷新。查了些资料,整理解决方案如下,欢迎纠错补充~页面不刷新的原因:响应路由参数的变化提醒一下,当使用路由参数时,例如从 /user/foo 导航到 /user/bar,原来的组件实例会被复用。因为两个路由都渲染同个组件,比起销毁再创建,复用则显得更加高效。不过,这也意味着组...原创 2019-10-31 17:37:11 · 6908 阅读 · 1 评论 -
element dialog 打开关闭弹窗组件的方式(父子组件传值)
背景:将弹窗写在另一个的组件,打开弹窗,关闭时会报错。报错原因:因为打开弹框的状态值isShowCompleteApprova 是父组件传递给子组件的,而vue规定子组件不能直接修改子组件的值,所以报错如上。附报错源代码:父组件:// 父组件<template> <div @click="handleCompleteApprova" >finish&l...原创 2019-09-22 17:19:29 · 6456 阅读 · 4 评论 -
vue 使用echarts
1. 安装npm install echarts --save2. 使用2.1 全局引入在main.js中引入:import echarts from 'echarts'Vue.prototype.$echarts = echarts在具体业务vue中使用:<template> <div style="width: 500px;height: 1000px" ...原创 2019-09-22 14:54:09 · 203 阅读 · 0 评论 -
Vue基础_学习笔记
挂载点 在html和v-showvue每一个组件,都是一个vue的实例原创 2018-07-20 16:09:07 · 304 阅读 · 0 评论 -
Vue学习笔记_计算属性VS侦听器VS方法
官网中说,对于任何复杂逻辑,你都应当使用计算属性。computed: 直接用计算属性的名字作为变量名。 计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。 即:computed中的待计算的值所依赖的值,有改变时,才会触发计算属性重新计算,这样可以提高性能。methods:与computed的区别在于,在页面上有其他非计算属性内依赖的元素需要重...原创 2018-07-29 14:07:24 · 488 阅读 · 0 评论 -
Vue学习笔记_组件&组件间传值
组件,相当于将页面拆分成一个个小功能模块,结构清晰,也方便复用。组件:全局组件:<todo-item></todo-item>Vue.component('todoItem',{ template:'<li>abc</li>' });局部组件:<todo-item-two v-bind:content="li...原创 2019-08-07 16:12:34 · 324 阅读 · 0 评论 -
Vue 插槽slot 常用整理
具名插槽;作用域插槽;独占插槽;多个作用域插槽;嵌套插槽;原创 2019-08-11 23:38:44 · 434 阅读 · 0 评论 -
Vue学习笔记_新手报错整理
报错:vue.js:634 [Vue warn]: Property or method "w" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based ...原创 2019-08-12 14:11:36 · 2469 阅读 · 0 评论 -
vue引入外部js(cdn)文件
需求背景:在项目中,希望引入阿里播放器插件。实现:index.html: <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.8.1/aliplayer-min.js"></script>main.js:const Alipla...原创 2019-08-30 14:26:51 · 4885 阅读 · 1 评论 -
vue onerror 用法
在img标签上使用:onerror后面跟着onerror的图片路径变量defaultImg;在data中,定义图片路径,写法为:defaultImg: 'this.src="' + require('../../assets/img/default.jpg') + '"'完整代码如下:<template> <img :src="picUrl(commentItem.ph...原创 2019-09-12 09:43:12 · 3453 阅读 · 0 评论 -
elementUI vue 遇到的问题
使用<el-table> 遇到报错:Invalid prop: type check failed for prop "data". Expected Array, got Function解决方法:在声明data(),中给数组一个默认值。<template> <el-table :data="approvalList"...原创 2019-09-20 11:12:56 · 311 阅读 · 0 评论 -
搭建vue环境_学习笔记
node环境 在https://nodejs.org/zh-cn/ 官网可以下载安装包,下一步一直安装即可。 安装后,测试命令: node -v npm -v安装vue环境 ** 安装淘宝镜像【可选】 sudo npm install -g cnpm --registry=https://registry.npm.taobao.org2.1 安装vue-cli脚手架构建工具 ...原创 2018-07-12 10:29:29 · 483 阅读 · 0 评论