vue.js踩坑篇
仅针对vue项目开发,其中包括但不限于组件如何使用,常见问题统计,问题处理思路与方法,经验分享。
草巾冒小子
分享[前端技术主页] http://www.lzindex.com/
展开
-
解决http://localhost:3000/favicon.ico 的404 问题(含案例解析)
http://localhost:3000/favicon.ico 的404 问题解决办法原创 2021-12-09 19:30:00 · 4274 阅读 · 0 评论 -
Vue框架里使用Swiper - 安装篇
Vue框架里使用Swipernpm安装swipercnpm install swiperVue框架里使用Swiper如何在Vue项目中优雅的使用swiper插件原创 2021-05-31 20:29:11 · 896 阅读 · 0 评论 -
vue 监听渲染变化
vue v-for插入的动态dom树,如何操作class等原创 2020-12-14 10:42:48 · 797 阅读 · 0 评论 -
vue中class绑定函数
vue中class绑定函数vue+class类应用函数,增加class类名相关博客:v-for循环、v-if 动态判断+动态赋值+操作class类:(计算属性)强制绑定函数以上就是关于“vue之class 计算函数的类名绑定”的全部内容。...原创 2020-12-14 10:39:27 · 2511 阅读 · 0 评论 -
v-for获取(循环次数)对象的length长度
v-for获取(循环次数)对象的length长度用户场景:循环出来的样式第一个和最后一个的样式。用户根据循环出来的第几个,逐一判断,对应的增加不同的样式。代码如下:<div v-for="(class,index) in lessons" :key="index" :data-length="lessons.length"> 当前:第{{class.num}}节课. {{class.title}} / 共{{class.time}}分钟 开课时间:{{class.beg原创 2020-12-14 10:38:41 · 4979 阅读 · 1 评论 -
npm run dev (明明有.vue文件),却报错 cannot GET
npm run dev (明明有.vue文件),却报错 cannot GET原创 2020-11-21 01:17:22 · 338 阅读 · 1 评论 -
vue项目打包:npm run build 进程卡死
vue项目打包:npm run build 进程卡死?!解决方法也挺简单找到以下文件注销监测npm代码文件的路径和处理办法如下:(注释掉第19~25行的代码即可)以上就是关于“ vue项目打包:npm run build 进程卡死” 的全部内容。...原创 2020-11-18 00:57:30 · 4206 阅读 · 1 评论 -
cannot read prpperty ‘start‘ of undefined(问题记录)
cannot read prpperty ‘start’ of undefined(问题记录)此错误表示这个字段没有被声明,或者是声明此字段的关键词的取值为空。解决办法:声明字段并赋值为此undefined字段赋值案例演示与解说:methods内的部分代码如下:countDown(){ this.$ref.countDown.start();},最近使用vant 框架的 定时器countDown组件,在调用的时候报错‘start‘’ undefined;后来按照截图所示的错误巡查了原创 2020-11-18 00:56:26 · 1163 阅读 · 0 评论 -
vue (可读写)全局变量的 定义、任意调用、值的修改
vue (可读写)全局变量的 定义、任意调用、值的修改定义截图:打印结果:同样的调用方式,在login.vue中,打印结果如下:对比上述两次结果,发现Home.vue重写全局变量URL的值,仅对当前文件Home.vue有效;对其他文件,如Login.vue调用this.$root.URL的新值xxxxx无效;即:(调用结果仍为最初定义的值,而不是已经在其他文件下被重写的新值)。...原创 2020-11-18 00:42:06 · 1905 阅读 · 0 评论 -
vue应用axios.get请求的代码格式(2种)- 代码篇
vue应用axios.get请求的代码格式(2种)- 代码篇代码:axios.get(this.serverPath+'/supermarket/fruits/options?id='+id, { params: { //'id': id, //商品id(必传参数) }, headers: { 'Content-Type':'application/json', 'Authorization':this.token }}).then原创 2020-11-02 14:29:27 · 712 阅读 · 0 评论 -
vue跨域问题:proxy代理跨域
前端跨域,本地跨域,vue项目跨域问题疑问1:前端开发中解决浏览器的跨域问题 (推荐阅读)什么是跨域?为什么要跨域?解决“跨域”的五种常见方式:1. JSONP2. CORS跨域资源共享3. http proxy代理跨域(利用Webpack配置):推荐使用。疑问2:什么是“代理跨域” ?浏览器之间有CORS同源策略。因出于安全考虑,不同域之间不允许获取数据。(除了几个特殊的例子<img>、<script>、<audio>等标原创 2020-10-20 11:30:10 · 633 阅读 · 0 评论 -
vue 页面不置顶问题(页面内操作、页面跳转后) - 集合篇
文章目录vue 页面内切换dom,页面跳转后 都不置顶?一、页面内操作:二、页面之间跳转:2.1 代码截图 · 说明:2.2 增加代码 · 示下:三、拓展 · (直接置顶、滚动置顶)vue 页面内切换dom,页面跳转后 都不置顶?如何解决这种不置顶问题?解决办法,详情参考下文介绍:一、页面内操作:下述代码,解决了页面内操作,页面不置顶的问题。二、页面之间跳转:下述代码,解决了vue-router跳转到新页面后,页面不置顶的问题。2.1 代码截图 · 说明:2.2 增加原创 2020-10-16 14:34:15 · 869 阅读 · 0 评论 -
Property or method “id“ is not defined on the instance but referenced during render.Make sure ......
Vue报错: Property or method "id" 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 components, by initializing the property.报错解释:报错截图:报错分析:参考博客:点击前往原创 2020-09-15 13:17:27 · 5373 阅读 · 0 评论 -
vue+filter过滤器(多参数)传参 - 代码篇
vue+filter过滤器(多参数)传参 - 代码篇传1个参数//html{{aa | filterAa}}//jsfilters:{ filterAa(aa){ // 这额aa就是过滤器传入的参数 }}传2个参数//html{{aa | filterAa(bb)}}//jsfilters:{ filterAa(aa,bb){ // 这额aa就是过滤器传入的第一个参数 // 这额bb就是过滤器传入的第二个参数 }}传3个参数//h原创 2020-08-20 09:11:06 · 8368 阅读 · 1 评论 -
v-for 循环 @click 动态传参(参数动态)
@click="function('id_'+data.id)"原创 2020-05-25 01:49:41 · 7003 阅读 · 0 评论 -
vue锚点定位(代码通用) - 总结篇
vue锚点定位(场景案例)跨页面锚点当前页面锚点vue hash模式下的锚点vue history模式下的锚点相关文章https://segmentfault.com/q/1010000007888351原创 2020-04-15 23:07:43 · 5155 阅读 · 0 评论 -
【跨域问题】Vue简单封装axios—解决post请求后端接收不到参数问题
参考阅读:Vue简单封装axios—解决post请求后端接收不到参数问题原创 2019-12-03 14:58:29 · 1115 阅读 · 0 评论 -
vue+axios+qs序列化 “三步解析”【含demo实例】- 代码篇
序列化是一种用来处理对象流的机制:所谓对象流就是将对象的内容进行流化。可以对流化后的对象进行读写操作,也可将流化后的对象传输于网络之间。序列化是为了解决在对对象流进行读写操作时所引发的问题。对象、文件、数据,有许多不同的格式,很难统一传输和保存序列化以后就都是字节流了,无论原来是什么东西,都能变成一样的东西,就可以进行通用的格式传输或保存,传输结束以后,要再次使用,就进行反序列...原创 2019-11-20 16:31:59 · 3367 阅读 · 0 评论 -
vuejs粒子动画特效 npm安装插件vue-particles(particles.js) - 代码篇
demo黑客帝国粒子动画原创 2019-10-23 16:57:46 · 2239 阅读 · 0 评论 -
scoped父组件,如何控制子组件样式 - 方法篇
scoped父组件,如何控制子组件样式 - 方法篇需求场景:在vue组件中,在style标签上添加scoped属性,以表示它的样式作用于当下的模块,很好的实现了样式私有化的目的,这是一个非常好的机制。但是为什么要慎用呢?在实际业务中我们往往会对公共组件样式做细微的调整,如果添加了scoped属性,那么样式将会变得不易修改。初写这篇文章时,本人没有找到一个好的方法去解决这个问题,后来经过大伙...原创 2019-10-17 11:26:02 · 909 阅读 · 0 评论 -
v-for和v-if同时使用(案例分析:循环最新的前14条数据显示) - 踩坑篇
Vue官方文档:永远不要把 v-if 和 v-for 同时用在同一个元素上。官方文档: 避免 v-if 和 v-for 用在一起阅读上述文档:说明vue不支持二者放到同一个标签中使用否则真的会失效bug! <div class="item nohover"> <el-row :gutter="30"> <el-col :span="1...原创 2019-04-10 16:20:29 · 2547 阅读 · 0 评论 -
vue引用自定义.js文件 (常量抛出 + 地址三级联动为例)- 语法篇
vue如何引用自定义封装的 .js文件?比如一个时间插件,全局任意页面都有可能会用到,这时候需要把它封装成函数,供全局页面随意调用。如何操作,详细如下。以上就是关于“ vue引用自定义.js文件 - 语法篇 ” 的全部内容。...原创 2019-03-26 17:58:01 · 2138 阅读 · 0 评论 -
vue动态引入外部CDN导致线上项目页面无法显示 - 看了不亏
vue动态引入外部CDN导致线上项目页面无法显示 - 看了不亏也不知道是什么原因?总结一下,分析给大家看,继续。原因分析:cdn停更或版本迭代替换或路径变更,导致引入的文件不存在?vuejs 自己的一套 cdn解析 系统导致的?cdnjs有bug?为什么线上项目样式出不来?但是右键open in new tabs,发现cdn文件确实存在?为什么本地虚拟服务器跑同样的项目却可以正常显...原创 2019-03-22 16:05:58 · 6963 阅读 · 0 评论 -
vue引用自定义.css文件 - 语法篇
vue如何引用外部自定义的.css文件 ?一般都会因为存在权重或优先级设置的问题才会侧意引用;再者,就是固定封装好的组件等等的东西,才会引入。代码:<!-- Add "scoped" attribute to limit CSS to this component only --><style scoped>@import "../../../static...原创 2019-03-22 16:10:16 · 1820 阅读 · 0 评论 -
vuejs项目性能优化 - 总结篇
首页等页面加载慢?app.css文件过大?app.js文件过大?vendor文件过大?本着 “开发环境”、“测试环境”、“生产环境”,从以下几点入手:图片压缩(用PS压缩图片到最合适的大小)打包后app.css文件有1.22M 这个怎么优化?vue-cli打包后 app.css体积过大,请问这个可以怎么解决?app.js也很大了, 有没有使用组件异步加载如果有多用使用s...原创 2019-05-21 15:49:33 · 1544 阅读 · 0 评论 -
elementUI组件el-dropdown - 踩坑篇
效果图:正确的代码如下:<div class="it-after" v-if=" resume.phone != ''"> <p class="it-telphone clamp1">{{resume.phone}}</p> <div class="btn3"><el-button type="primary" icon="el-i...原创 2019-04-19 09:00:31 · 40338 阅读 · 1 评论 -
el-select下拉框组件el-option如何使用v-for动态渲染问题 - 方法篇
element-UI 下拉框el-select组件el-option的v-for问题我的代码:<template> <div id="htmlWrap"> <!--header--> <div class="bg545C64"> <NavMenuVue></NavMenuVue&a原创 2019-04-10 16:43:24 · 80309 阅读 · 5 评论 -
vue报错vue Cannot read property 'length' of undefined案例 - 分析篇
一个数组的length属性怎么可能没定义呢 ! 这种报错,一般都是与定义的数组有关。不要太看重错误提示去撞南墙找length,而是要想想你的代码哪里可能有错;简言之:要找自己代码的错误而不是(根据报错的相关提示来)找这个length属性。举例说明后台定义了一个API数据接口/mlistAllResume,供前端调用。因代码在 export default 定义的时候,将 数组对...原创 2019-04-10 16:20:52 · 7548 阅读 · 1 评论 -
Chrome本地安装vue-devtools调试工具的问题
浏览器devtools扩展程序用于调试Vue.js应用程序。文章目录浏览器devtools扩展程序用于调试Vue.js应用程序。一、 下载 · 调试工具:二、 下载完成之后,开始本地安装:三、 安装之后,测试调试工具是否OK。一、 下载 · 调试工具:github下载地址有 git 的同学 直接 git clone二、 下载完成之后,开始本地安装:打开cmd 进...原创 2018-12-28 18:36:53 · 799 阅读 · 0 评论 -
Vue调试神器vue-devtools - 插件下载&&安装
Google如何安装调试Vue的神器vue-devtools ?文章目录Google如何安装调试Vue的神器`vue-devtools` ?安装介绍:demo实例 - 演示代码:相关文章链接:1. https://github.com/vuejs/vue-devtools2. https://chrome.google.com/webstore/detail/vuejs-devtools/nh...原创 2018-11-20 18:47:49 · 3542 阅读 · 0 评论 -
vuejs项目开发环境搭建(ESlint安装)
vuejs项目开发环境搭建,有时候需要安装ESlint!eslint对ES6语法支持更好,可以通过eslint在团队开发中快速统一ES6的语法,精简代码,提高开发效率。全局安装 · 方法:cmd命令: cnpm install eslint -g以上就是关于“ vuejs项目开发环境搭建(ESlint安装) ” 的全部内容。...原创 2018-11-08 19:30:55 · 3337 阅读 · 0 评论 -
WebStorm 零起点搭建Vuejs项目 - 全程篇
WebStorm进行Vue.js项目的零起点、搭建、开发、浏览器测试近几个月一来,一直在研究vuejs的高级用法,无意中发现自己用的开发工具,已经无法满足自己的开发需求,严重阻碍了开发进程。索性抛弃了旧IDE,研究了一下webstorm这款新的编辑器。果然是事半功倍啊!为了更好更有价值的给大家提供参考,这里我们零起点开始,说明 “如何使用WebStorm进行Vue.js项目的零起点、搭建、开...原创 2018-11-06 17:55:27 · 14198 阅读 · 6 评论 -
cmd命令 - vue项目:单独安装vue-router
今天做测试的时候,发现之前的vue项目忘记安装vue-router为了让项目能重新跑起来,只能另外安装一下vue-router这里,总结一下,以供忘记的朋友呢参看。cmd 执行代码cd 项目文件夹npm install --save vue-router之后就会提示安装更新成功。暂未发现问题。以上就是关于“ cmd命令 - vue项目:安装vue-router ” ...原创 2018-10-16 16:09:51 · 4993 阅读 · 0 评论 -
vuejs项目如何修改node_mudule为公用文件?
vuejs修改node_mudule默认路径,多项目开发,可减少内存浪费 最近整理之前做过的项目的时候,发现转移的资源内存太大?! 查看了一下,发现之前每次都是单独引入vuejs、element-ui等等前端框架。 上手了之后,发现之前的这种做法,太浪费内存了,而且管理起来也不方便。 这里总结一下:将所有项目的vuejs和element-ui等通用框架部分...原创 2018-07-30 14:02:49 · 5832 阅读 · 5 评论 -
vue.js 编程导航,如何传递参数?
本文主要讲述:关于vue.js 编程导航,如何传递参数?原创 2018-05-11 01:06:08 · 1880 阅读 · 0 评论 -
vue.js踩坑之ref引用细节点
vue.js组件使用中的细节点vue不建议我们在代码里面操作DOM,但是,在处理一些极其复杂的动画效果,不操作DOM,单单靠vue的数据绑定是无法完成实际需求的效果的。这就需要我们必须操作DOM。如何操作呢?通过ref 引用的形式,来操作DOM。下面我们给一个需求:当点击div的时候,div里面的内容被打印出来。步骤如下:1.首先起一个引用的名字,比如hello:ref='...原创 2018-06-14 09:38:00 · 13080 阅读 · 0 评论 -
vue.js踩坑之单向数据流
vue.js父子组件之间的数据通信,细节总结 隐性规则:单行数据流 学前疑问: 1.父组件如何向子组件通信数据? 2.父组件可以直接修改子组件的数据!但是反过来绝对不可以!那怎么解决这个问题呢? 3.所谓的单向数据流,就是约束子直接改父,以避免上述情况的发生! 4.子组件如何向父组件通信数据? 要点简介: 1.父组件都是通过...原创 2018-06-14 09:38:23 · 2042 阅读 · 0 评论 -
vue.js踩坑之组件参数检验与非props特性
vue组件参数检验与非props特性 学前疑问: 什么是组件参数检验? 组件参数校验都有哪些属性设置?分别表示什么意思? 什么是props特性?何为非props特性?如何判断? 重要代码如下:父组件通过属性content向子组件chhild进行参数hello world的传递, 而子组件可以对父组件传递过来的内容进行约束。 通过prop...原创 2018-06-14 13:31:55 · 1506 阅读 · 0 评论 -
vue.js项目中,关于element-ui完整引入、按需引入的介绍
Element-ui引入方式,简单说来有两种:完整引入、按需引入 下面就这两种方式,简单说一下如何操作,详细请参考官网相关文档;1. 完整引入import Element from 'element-ui';//样式文件,需单独引入import 'element-ui/lib/theme-chalk/index.css';对应的代码,如下:Vue.use(El...原创 2018-05-21 10:55:43 · 24331 阅读 · 0 评论 -
如何使用router-link对象方式传递参数?
如何使用router-link对象方式传递参数? 疑问:(判断和传参) 点击导航栏目,js如何判断自己点击的是哪个具体栏目? 它们是如何传参的? 效果图解说:A. 点击选择【屈原“查看详情”】之前B. 点击选择【屈原“查看详情”】之后要点总结:在vue-router中,有两大对象被挂载到了实例this; $route(...原创 2018-05-11 01:05:43 · 79679 阅读 · 2 评论