VUE
劲枫
有所选择,有所坚持~
展开
-
vue启动项目报sockjs-node错误
vue启动后报错。分析大致原因是公司内网络策略限制,在启动vue项目时访问了一个内网ip,访问不到解决办法:vue.config.js中devServer里面添加下面这端。其中ip通过cmd输入ipconfig查看原创 2020-12-10 11:19:23 · 1531 阅读 · 0 评论 -
vue和js文件相互监听DOM内容变化
前言:vue文件引入一个js文件,js中的按钮控制vue input弹框的出现,vue中的弹框输入的内容需要存入js文件。(ps:不要问为何不都用vue,设计如此),那么现在需要在vue中获取js控制弹框显隐的值,需要在js中获取vue中input后的内容。实现:先介绍一下MutationObserverMutationObserver 是一个可以监听DOM结构变化的接口。官方示例://选择一个需要观察的节点var targetNode = document.getElementBy..原创 2020-08-19 18:11:16 · 2112 阅读 · 0 评论 -
mpvue中页面生命周期及加载顺序
created () { console.log('created----------------------000小程序加载时,所有页面里面的函数执行') }, onLoad () { // 页面创建时执行 console.log('onLoad----------------------11页面创建时执行') },...原创 2020-02-28 20:49:53 · 1006 阅读 · 0 评论 -
element-admin后台根据权限生成权限菜单,前端动态生成路由
前言:通过vue-admin-template创建的项目中并没有与权限配置相关的文件和代码,需要手动去vue-emement-admin拷贝部分代码拷贝开始1、对比模板代码就知道Vuex文件管理的文件夹store下面很多内容有更改,所以直接复制过来,权限文件主要是permission,但是在getters和user里面也添加了内容2、然后左侧菜单是动态加载的,需要在菜单pag...原创 2019-05-29 22:36:01 · 14132 阅读 · 5 评论 -
关于mpvue使用Vant组件库的Field输入框组件自动唤起手机软键盘问题分析
前言:问题场景:需要在本页面点击一个div,动态show一个遮罩层,遮罩层里面有一个输入框,输入框使用Vant的Field组件写的。过程中并没有页面跳转。(本问题场景出现在mpvue中,在vue、H5等其他场景同样可以借鉴。)解决方法:在template里面引入对应组件(本文用的Vant,可以用原生Input,或者其他组件)在data()里面设置聚焦初始为false...原创 2019-05-04 02:19:11 · 10919 阅读 · 2 评论 -
mpvue中使用vuex爬坑过程
1、辅助函数不能使用vuex的辅助函数有mapState、mapGetters、mapMutations、mapActions。我们在子组件经常用到很多状态量,为了避免过分的使用this.$store.state.xxx、this.$store.dispatch导致的冗余问题,我们用辅助函数来使代码变得简洁易读,它就相当于语法糖似的,实际上还会映射为this.$store.xxx。在一...原创 2019-05-02 22:20:57 · 1729 阅读 · 0 评论 -
【VUE音乐播放器】获取QQ音乐播放源地址
前言:在学习慕课网课程制作企业级音乐app中,发现之前的qq音乐播放地址均不可用了。于是折腾了一下,重新抓包获取地址。 1、获取分类歌单里面的歌曲列表在之前的代码里,如下红色圆中的歌单-歌曲列表显示不出来,因为之前qq音乐改变了源地址,现在只能通过node来做接入层转发一下。原来获取歌单列表的代码:发现不能获取了,如果发现报错Uncaught ReferenceError:...原创 2019-02-01 15:06:46 · 7137 阅读 · 27 评论 -
vue中使用H5的audio
H5audio标签有许多事件 在应用到vue中后的使用如下:比如在使用onplay时,要去掉on,用@play派发时间,在methods中定义方法执行体<template> <div> <audio src="../../static/1.mp3" @play="ready" @pause="pause" controls&g..原创 2019-01-27 15:26:43 · 5511 阅读 · 0 评论 -
【VUE】金额格式化工具
currency.js const digitsRE = /(\d{3})(?=\d)/gexport function currency (value, currency, decimals) { value = parseFloat(value) if (!isFinite(value) || (!value && value !== 0)) return '...原创 2018-12-26 14:46:14 · 3919 阅读 · 0 评论 -
【VUE组件开发】VUE随意点击列表元素切换选中样式,并有序数组添加索引和数值
直接查看代码以及样式<template> <div> <!--顶部step--> <div class="dataStep"> <!--<img src="static/images/DataBgc.png" alt="">--原创 2018-08-28 09:46:13 · 2363 阅读 · 1 评论 -
【VUE中模板笔记】vue中flexible+padding撑开容器高让子元素固定比例+echarts模板
1、vue中flexible2、padding撑开容器高让子元素固定比例,实现高度自适应。图片的高度可以根据width自适应,padding也可以,所以做一个盒子用padding撑开高度,里面的元素width和height都是100%即可3、echarts模板 <template> <div id="stage"> <div id...原创 2018-08-07 09:40:32 · 1229 阅读 · 0 评论 -
【VUE跨域】vue中使用AJAX jsonp实现跨域
1、vue中引入jquery,组件中的代码如下<template> <div> 1、ajax jsonp跨域 2、PHP后台验证header头信息 </div></template><script> import querystring from 'querystrin...原创 2018-07-22 13:25:30 · 2354 阅读 · 0 评论 -
【VUE axios】跨域返回HTML的方法
1、后台参考ajax jsonp写,返回一个callback,结果全是html,需要手动解析一下 this.$axios( { method: 'post', url: '/apis/tencent/jsonp/index.php', ...原创 2018-07-22 13:22:42 · 6469 阅读 · 0 评论 -
【VUE axios】axios跨域方式
1、配置config下的index.jsproxyTable: { '/apis': { target: 'http://127.0.0.1:3000', changeOrigin: true, pathRewrite: { '^/apis': '/' ...原创 2018-07-22 12:32:29 · 1877 阅读 · 0 评论 -
【vux中的debouce和throttle】Debounce 和 Throttle 的原理及实现
先讲VUX中的用法1、先引用vux<div @mousemove="clickdemo" style="width: 400px;height: 400px;background-color: #53fcff;"></div><div @mousemove="clickdemo2" style="width: 400px;height: 400px;b.原创 2018-07-19 11:01:25 · 1373 阅读 · 0 评论 -
【VUE移动端适配】VUE使用flexible布局
配置 flexible安装 lib-flexible在命令行中运行如下安装:npm i lib-flexible --save引入 lib-flexible在项目入口文件 main.js 里 引入 lib-flexible// main.jsimport 'lib-flexible' meta 标签处理在项目根目录的 index.html 中根据需求删除如下 ...原创 2018-07-25 19:40:56 · 4307 阅读 · 4 评论 -
提示:Method definition shorthands are not supported by current JavaScript version解决方法
当创建vue生命周期的钩子实例时,PhpStorm提示如下:意思是:该方法定义的缺陷是不支持当前的JavaScript版本。解决办法:打开 File -> Settings -> Languages & Frameworks -> Javascript 更改JavaScript版本为ECMAScript 6如下图:...原创 2018-05-28 16:19:40 · 1153 阅读 · 0 评论 -
vue.js报Module build failed: Error: No parser and no file path given, couldn't infer a parser错误的解决方法
ERROR Failed to compile with 2 errors 3:41:32 PM error in ./src/components/HelloWorld.vueModule build failed: Error: No par...原创 2018-05-28 15:49:29 · 5539 阅读 · 0 评论