![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
Vue学习记录
浅端
用最少的文字,写最多的知识。
展开
-
制作一个UI插件上传npm及安装使用的步骤
目录一、制作npm插件。1、注册npm账号。2、本地创建项目。2.1、命令行使用vue-cli创建一个webpack项目。2.2、在src下新建testqzz。2.3、把下面代码分别复制进index.js和test.vue中。 2.4、上传到npm。二、安装npm插件到本地项目。2.1、安装插件。2.2、引入插件。2.3、使用插件。一、制作npm插件。1、注册npm账号。打开npm官网,使用邮箱注册一个账号(用记事本记...原创 2020-12-01 17:07:35 · 478 阅读 · 0 评论 -
JS三元运算符语法错误记录
前言:本篇文章仅谈JS中的三元运算符,php,java等语法有不同。今天写代码时三元运算符语法颠覆了我以往的认知!!!我们都知道if…else与"?:"都是判断使用的语句,个人习惯使用三元运算符,性能更优一点,而且代码更简洁舒服。详细可看说说三元运算和if…else的相同之处?如果你对三元运算符不太熟悉,推荐你看条件(三元)运算符 (? :)或者直接看我的例子:if…else式 let a; if (true) { a = 1; } else {原创 2020-11-27 11:29:37 · 706 阅读 · 0 评论 -
前端项目如何阻止手机键盘弹出
这是一个移动端项目出现的bug,其实也不能算是bug,省份键盘是自己写的,在input输入框触发focus事件时键盘显示。而同时focus事件也会唤醒手机的键盘,把我的省份键盘顶上去也正常。解决办法是把input输入框设置为readonly,这样就不会触发输入键盘了。写项目还是用别人的插件好用,自己写的坑自己踩,不断出现Bug,好烦。...原创 2020-11-26 09:54:33 · 842 阅读 · 0 评论 -
vue使用lang=“stylus“报错UnhandledPromiseRejectionWarning: TypeError: loaderContext.getResolve is not a f
报错:UnhandledPromiseRejectionWarning: TypeError: loaderContext.getResolveis not a function环境:"webpack": "^3.6.0","stylus": "^0.54.8","stylus-loader": "^4.3.0",错误原因:stylus-loader或stylus版本不兼容。我的解决办法:解决办法① 轻松版。修改package.json中的版本号,删除node_modules,重新原创 2020-11-25 10:08:44 · 300 阅读 · 0 评论 -
webpack配置生产、开发、测试环境及使用
最近做项目的时要区分各种环境的请求地址,基于vue-cli 3.x使用webpack模板创建的项目,所以没有build文件夹。想配置三个环境下的请求路径。1、根目录下新建三个文件.env.development、.env.test、.env.production文件(复制这三个文件名)2、分别写入如下代码:.env.development:NODE_ENV = 'development'VUE_APP_MODE = 'development'VUE_APP_API_URL = 'http://1原创 2020-09-17 15:33:19 · 532 阅读 · 0 评论 -
vue-router传参方式三种(举例详细)
以下例子全部采用a组件向b组件传参的方式。看一下界面,点击按钮跳转到b组件,并把参数传递过去。路由配置(index.js) routes: [ { path: '/', component: A }, { path: '/b', name:'b', // 这句特别重要 component: B } ]1.params。不多bb,看代码。给a组件里的按钮添加一个点击事件。 <butto原创 2020-09-17 11:36:20 · 911 阅读 · 0 评论 -
npm模块安装(开发环境、生产环境、全局安装)
npm 生产环境 开发环境 npm install XXX 不可用 不可用 npm install -save XXX 可用 不可用 npm install --save-dev XXX 不可用 可用 npm install -g XXX 不可用 不可用 npm install XXX 不...原创 2020-05-07 16:54:34 · 3138 阅读 · 1 评论 -
axios拦截器封装步骤(含代码)
最近做项目时用到了axios拦截器封装,记录一下,相信以后还会用到,直接来复制粘贴(/阴险脸)。先提供一个链接axios中文文档,看看API。我英语不好,你也是。拦截器有请求前拦截,请求响应后拦截,自定义拦截器,移除拦截器,文档里太详细,我再写出来就是浪费流量。关键的代码部分惭愧,这个代码的请求和响应不是我写的,我只是站在巨人的肩膀上,所以看的更远。当初搜拦截器的时候看到了博主的帖子,写的...原创 2020-04-30 16:14:07 · 783 阅读 · 0 评论 -
覆盖Vant自带样式
直入主题,猜你也是来看解决办法的/滑稽脸。解决办法:①找到你要覆盖的class。②在你新的样式上加!important(一定要记住)。③我使用的是Vue,我猜你也是。新建一个<style></style>(Vue中存在两个<style></style>)样式也能生效。这是因为我们平时默认生成的style都是这种带scope的<sty...原创 2020-04-29 23:28:55 · 4924 阅读 · 1 评论 -
Vue中的mixin混入用法简谈
首先要谈一下Vue的组件复用混入。组件常用混入方法是组件B复用组件A,网上查到的说法是相当于组件B在自己的内存中开辟了一块内存空间,然后根据父子组件传值的方法来互相交互。而mixin进来的方法属性是扩充了该组件的内容。mixin使得相同的方法能更多组件中复用。下面是简单的代码写法:mixin.jsexport default{ created() { con...原创 2020-04-03 17:46:40 · 262 阅读 · 0 评论 -
为什么选择Vue?
毫不避讳的说,入坑前端学了html,css,js之后,问了同学,Vue简单!这就是我学Vue的原因——但是不能拿到面试上去说这真正的原因,所以下面我要写几条高大上的理由。1.轻量级。Vue2.0mini版本72k(压缩后23k),React的大小为132k,angular的大小为144k,我也不知道这几十k的差距有什么用,现在4G普及,wifi普及,5G商用的时代,还差这几十k的流量吗?2.简...原创 2020-03-15 16:56:57 · 893 阅读 · 0 评论 -
MVC,MVVM是啥?
1.开题废话原创 2020-03-12 16:29:57 · 104 阅读 · 0 评论 -
better-scroll横向滚动无法循环
0.1.15版本的横向滚动写法,可以滚动this.slider = new BScroll(this.$refs.slider, { scrollX: true, scrollY: false, momentum: false, snap: true, snapLoop: this.loop, ...原创 2020-01-10 16:32:37 · 408 阅读 · 0 评论 -
vue使用axios跨域请求QQ音乐资源
学习慕课网Vue项目QQ音乐webApp,遇到的坑。由于需要请求QQ音乐资源,肯定会遇到跨域(CORE)问题,正常来说,jsonp是经典的解决办法,很遗憾,这里我失败了,并且没有找到解决出错的办法,然后百度到了一个axios配合proxy的解决方案。①在config的index.js文件对需要请求的链接进行配置。module.exports = { dev: { assetsSu...原创 2019-12-30 22:45:54 · 687 阅读 · 0 评论 -
webstorm格式化代码与eslint不一致
解决办法:https://www.cnblogs.com/yangmengsheng/p/9866691.html转载 2019-12-28 10:00:11 · 1920 阅读 · 0 评论 -
Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-
Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value.百度翻译:避免直接改变属性,因为当父组...原创 2019-12-19 09:36:01 · 1080 阅读 · 0 评论 -
eslint:language service execution timeout
今天webStorm打开Vue项目,出现了这个错误,上网查询无果…百度翻译走一波:eslint:language service execution timeouteslint:语言服务执行超时哦~~ 这个问题重启webstrom就能解决,告辞!...原创 2019-12-19 09:18:34 · 3388 阅读 · 1 评论 -
Vue之nextTick()
由于Vue是异步DOM更新,因此在created()钩子中的函数执行时,此时的DOM并未渲染完成,所以想要操作DOM,可以把需要执行的函数放进nextTick()中,它会在DOM渲染完毕时执行。...原创 2019-12-11 15:10:57 · 76 阅读 · 0 评论 -
vue2.0组件事件的发送与接收处理方式
今天学习视频使用vue1.0的$dispatch我这里毫无反应,查阅发现Vue2.0已经废除了这种方法。其中Vue2.0使用的一种方式是,在main.js中`new Vue`对象时在`data{}`中加入一个空Vue对象,我成功后的代码如下(这里为了不让篇幅过长,我只剪切了精华):main.jsnew Vue({ data: { eventHub: new Vue() /...原创 2019-12-10 20:17:23 · 282 阅读 · 0 评论 -
vue里的ref和refs
官方:ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例:refs :一个对象,持有注册过 ref 特性 的所有 DOM 元素和组件实例。我自己的话:ref用来给元素或者组件注册信息。refs是包含所有ref信息的对象。栗子:给元素注...原创 2019-11-24 18:09:09 · 794 阅读 · 0 评论 -
iconfont字体图标引用出现框框问题解决办法
问题描述: 编译完全没问题,控制台也出现了使用的iconfont类及unicode编码(这里我使用的是unicode编码,使用iconclose类也是同样的结果)解决思路: 由于在看视频做这个项目时使用的是stylus语法,我怀疑是把下载下来的css样式改为stylus导致出现这个bug,所以我一狠心,改回了css语法,问题解决!PS: 另外我在网上查询这个问题时,发现出现这种问题的原因是多种...原创 2019-11-18 19:11:47 · 7146 阅读 · 0 评论 -
iconfont报错These relative modules were not found: * ../fonts/icomoon.eot?o6crv1 in ./node_modules/_
vue引用iconfont字体文件,出现These relative modules were not found: …/fonts/icomoon.eot?o6crv1 in ./node_modules/_…解决办法:图中原来是url,改为url_loader就不会报错了。...原创 2019-11-17 12:18:59 · 822 阅读 · 1 评论 -
This dependency was not found: * !!vue-style-loader!css-loader? 解决方案
vue项目下样式使用stylus写,npm run dev之后出现:This dependency was not found:!!vue-style-loader!css-loader?{“minimize”:false,“sourceMap”:false}!../…/node_modules/vue-loader/lib/style-compiler/index?{“vue”:true,“...原创 2019-11-13 12:46:27 · 590 阅读 · 0 评论 -
Vue里watch与computed的区别
computed组合属性<template> {{this.firstName + this.lastName}} // 可以使用这种插入的方法, // 但是当计算量大的时候不便于维护 computed组合的名字:{{fullName}} // 所以后来出现了computed //(用来组合属...原创 2019-09-23 09:34:10 · 63 阅读 · 0 评论 -
解决vue里You may use special comments to disable some warnings.
一直卡这不动了解决办法原创 2019-09-20 20:29:12 · 510 阅读 · 0 评论 -
Vue父子组件通信——prop和$emit
总结① 父组件通过子组件的prop属性,将数据传送给子组件 (代码第三行的cityName就是子组件的属性)② 子组件通过$emit监测父组件中的事件(代码最后一行)父组件<template> <div id="father"> <son @btnClick="handleClick" :cityName="msg"&...原创 2019-09-21 16:00:26 · 255 阅读 · 0 评论