VUE
文章平均质量分 65
面向Web3,春暖花开
这个作者很懒,什么都没留下…
展开
-
vue URL 显性显示query参数,不转义中括号[]
将路由中query参数正常显示在浏览器的URL中原创 2022-11-03 15:26:53 · 1059 阅读 · 0 评论 -
VUE报错:Uncaught SyntaxError: Unexpected token ‘<‘
报错起因将Vue 路由 设为 history 模式后打包, 首页访问没有任何问题,跳转到子路由 /apollo/search/ 也没有问题,但刷新子路由 /apollo/search/ 就会报错:Uncaught SyntaxError: Unexpected token '<'查询过程刚开始以为是 js 打包发布过程中导致的 js 缺失,重新打包发布仍然出现问题,排除此因。查询后端 nginx 设置是否有问题,询问后端没有问题,排除后端原因最后查看报错 js 的路径,恍然大悟,正确的路径原创 2022-02-14 17:23:36 · 3489 阅读 · 2 评论 -
vue打包后的静态文件上传到CDN,如何设置静态文件域名?
在搞资源文件全球加速时需要将 JS,CSS,IMG 等静态资源放到 CDN 服务器上,WEB 网站上引用CDN 上缓存的资源,因为网站用vue-cli 搭建的,所以需要对 vue-cli 配置文件 (vue-config-js) 进行修改,修改打包后的index.html中静态资源引用路径。vue.config.jsmodule.exports = { publicPath: process.env.NODE_ENV === "production" ? "https://resource.xxx.原创 2021-07-30 18:50:31 · 4154 阅读 · 4 评论 -
You may have an infinite update loop in a component render function.
1. 报错代码<ul> <li v-for="(item, i) in rankList" :key="item.ID" > <sparklineBar :data="item.priceList.reverse()" :limit="item.priceList.length" /> </li></ul>运行上述代码时,vue报错:You may have an原创 2021-03-22 17:38:11 · 5015 阅读 · 0 评论 -
vue 返回前一个页面操作
需求描述点击返回按钮返回到前一个页面当没有前一个页面时,默认跳到首页1. 方法一此方法根据浏览器默认的历史记录操作 window.history 。但是此方法存在一个问题:当前一个页面并非本网站(为第三方)页面则会跳到第三方页面如:从 baidu.com --> https://bscproject.org/#/project/1点击返回时会跳到 baidu.com并不会跳到 https://bscproject.org/具体实现方法:<a href="javas原创 2021-03-02 16:24:51 · 3811 阅读 · 0 评论 -
echarts5.0 去掉 hover 折线变粗方法
发现问题今天 echarts 版本更新至5.++,发现鼠标悬停在折线图上,折线变粗,这个效果和我的需求相悖,所以想办法去掉此效果解决过程emphasis折线图的高亮状态。属性:scale:boolean 类型,默认true。表示是否开启 hover 在拐点标志上的放大效果。lineStyle:包含属性:{ color , width , type , shadowBlur , shadowColor , shadowOffsetX , shadowOffsetY , opacity }原创 2021-02-19 19:02:27 · 3792 阅读 · 0 评论 -
阻止 form input 输入框按回车自动提交表单
发现问题:写东西时发现form 表单 中的 input 在 按下回车键(enter)时自动提交表单,而且在地址栏中显示提交的内容,这个东西就很鸡肋,我如果填的是密码,就会感觉这东西很不正规,那咱就找解决方法吧!解决过程在搜索时发现原来在 form 表单中只有一个 input 输入框时按回车键浏览器默认会触发表单提交,默认这两个字对 js 来说首先想到的就是 阻止浏览器默认行为,在此奉上一份vue 阻止事件冒泡,捕获方法文章,方便查阅解决方法找到问题的原因,那解决就很简单了,阻止浏览器默认行为不就得原创 2021-01-21 16:51:21 · 1095 阅读 · 0 评论 -
前端利用 i18n 实现多语言切换
前端实现多语言切换 : 实现前端页面的资源国际化一、vue 中引用 vue-i18n 实现国际化安装 vue-i18nnpm install vue-i18n新建语言文件包: cn.js / en.js …cn.jsexport default { lang: 'cn', hello: '你好',}en.jsexport default { lang: 'en', hello: 'hello',}新建一个 i18n.js 中引入 vue-i18n (前提是要.原创 2020-11-17 17:01:01 · 4804 阅读 · 0 评论 -
Node Sass could not find a binding for your current environment: OS X 64-bit with Node.js 14.x
因为最近升级了node,所以运行Vue项目 npm run serve 的时候报如下错误:error in ./node_modules/vue-loading-spinner/src/components/RotateSquare5.vue?vue&type=style&index=0&id=fa2cf838&lang=scss&scoped=true&Module build failed (from ./node_modules/sass-loa原创 2020-11-10 11:55:26 · 3014 阅读 · 1 评论 -
vue-resource解决Provisional headers are shown问题
前情提要用 vue-resource post请求数据时一直报跨域错误:has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.由于项目紧急所以改换 axios 请求,没有报任何错误,并且成功返回结果 。原原创 2020-07-13 14:24:48 · 5355 阅读 · 0 评论 -
vue axios 拦截器
若需要对http的请求参数做一些复杂的处理,统一的配置,或者对返回的结果进行处理,此时需要一个 拦截器 interceptors1.下载axiosnpm i axios2.配置参数// 引入axiosimport axios from 'axios'const qs = require('qs');// 解决跨域请求cookie问题axios.defaults.withCr...原创 2020-03-23 16:51:01 · 278 阅读 · 0 评论 -
js实现复制到粘贴板方法
js + clipboard 插件实现复制到粘贴板方法-兼容pc及移动端(ios/安卓)HTML: <div id="content”>复制改内容到粘贴板</div> <button id=“btn" data-clipboard-target="#content" data-clipboard-action="copy”>点击</butto...原创 2019-08-30 15:24:27 · 555 阅读 · 0 评论 -
js获取地址栏参数
采用正则表达式获取地址栏参数因为工作中遇到要获取地址栏中的query参数,所以直接列出代码:function GetQueryString(name){ var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); var r = window.location.search.substr(1).mat...原创 2019-08-30 15:18:26 · 200 阅读 · 0 评论 -
vue-cli 项目搭建
1. 初始化需要安装 nodevue-cli 2.x# 全局安装 vue-clinpm install --global vue-cli# 创建一个基于 webpack 模板的新项目vue init webpack my-project(my-project为自己项目的名称)# 打开项目运行cd my-projectnpm run devvue-cli 3.x# 全局安...原创 2019-11-27 17:27:18 · 377 阅读 · 1 评论 -
vue select下拉框数据v-model绑定默认不显示的问题
提高页面加载速度,前端代码注意的关键点今天遇到了一个问题,就是我循环出select内的数据以后,发现原本默认显示第一条的select框变成了空白,要选择后才有显示。我写的原始代码如下:<select v-model="token"> <option v-for="(item,index) in list" :value="index" :key="index">{...原创 2019-08-31 08:06:33 · 9101 阅读 · 2 评论 -
vue 动态生成二维码 qrcode
1.下载 qrcodenpm i qrcode2.在所需组件使用qrcode<template> <div> <img :src="qrcode" width="192"> </div></template>>import QRCode from 'qrcode'export default{ d...原创 2019-10-23 17:09:04 · 2925 阅读 · 0 评论 -
vue路由相对路径跳转
今天写东西遇到多层路由,路由之间跳转时需要相对路径,因此查了一下官网用到了append属性和router.resolve方法,因此列出具体的使用方法。今天写东西遇到多层路由,路由之间跳转时需要相对路径,因此查了一下官网用到了append属性和router.resolve方法,因此列出具体的使用方法。append 属性类型: boolean默认值: false设置 append 属性后...原创 2019-09-03 16:08:32 · 5533 阅读 · 3 评论 -
vue相同的路由根据参数不同 ,刷新数据
最近更新博客时需要在导航栏里增加一个分类的列表,但是分类的路由是同一个路由,只是后面的参数id不同,点击切换不同的列表时,发现URL正常了,但不是我想要的结果引子最近更新博客时需要在导航栏里增加一个分类的列表,但是分类的路由是同一个路由,只是后面的参数id不同,点击切换不同的列表时,发现URL正常了,但不是我想要的结果。因为就算路由发生了变化,数据还是没有变化,因为调用的依然是同一个组件,...原创 2019-09-03 16:11:04 · 1303 阅读 · 0 评论 -
vue/js 实现仿通讯录-列表滑动字母索引
最近写东西刚好遇到如下设计:要求实现地区按字母排序加上侧边索引点击侧边索引滑动到指定字母列表页面滑动的时候顶栏序列号随之变化PC端鼠标悬浮,移动端触屏侧边索引实现以上两个效果步骤从country.json获取countryList数据提取侧边栏字母并排序将countryList按照字母分类排序对侧边栏进行操作不废话直接上代码代码有一丢丢长,如果看不下去可以直接 ...原创 2019-09-03 16:26:19 · 6342 阅读 · 6 评论 -
vue 获取当前路由
vue怎样才能获取到当前的路由遇到的问题在项目中需要对不同路由下的导航切换不同的样式,而导航是公共部分,因此我需要获取当前路由,通过判断路由设置不同的样式实现方法具体代码如下,通过监听$route的变化,获取当前路由为this.$route.path:watch: { $route (to, from) { console.log (this.$route.pat...原创 2019-09-04 16:30:37 · 2040 阅读 · 0 评论 -
vue http请求工具vue-resource&axios的使用
vue http请求工具vue-resource 和 axios文章目录第一步:下载vue-resource/axios第二步:在main.js中引入工具第三步:在组件中引用post 请求参数问题第一步:下载vue-resource/axios//vue-resourcenpm install vue-resource//axios(axios 需要下载两个包 axios和vue-a...原创 2019-09-04 16:48:04 · 566 阅读 · 0 评论 -
vue 路由传参方式总结
文章目录vue常用的路由间传参方式一:使用```$route```方式二:使用 ```props```将组件与路由解耦```props```传参模式可以分为以下几种:1.布尔值模式 ```true```或 ```false```2.对象模式3.函数模式vue常用的路由间传参使用$route使用 props将组件与路由解耦方式一:使用$route此方法传递参数不在URL路径拼接显示...原创 2019-09-04 16:53:42 · 464 阅读 · 0 评论 -
vue 组件间传值方式
文章目录vue不同组件间传值方式1.父组件向子组件进行传值2.子组件向父组件传值3.非父子组件进行传值vue不同组件间传值方式父传子子传父非父子传值1.父组件向子组件进行传值父组件:<template> <div> 父组件: <input type="text" v-model="name"> <br...原创 2019-09-04 17:43:14 · 465 阅读 · 0 评论 -
vue 阻止事件冒泡,捕获方法
要想了解 VUE 阻止事件冒泡和捕获方法,首先要了解一下 JS 事件和 JS 阻止事件冒泡,捕获方法1. js 事件的三阶段捕获阶段目标阶段:执行当前对象的事件处理程序冒泡阶段2. js 阻止事件冒泡,捕获阻止事件冒泡: event.stopPropagation() 或 event.cancelBubble = true (IE)阻止浏览器默认行为: event.preve...原创 2019-09-23 16:58:56 · 16488 阅读 · 1 评论