![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue.js
1学习者1
不为失败找理由只为成功找方法
展开
-
使用vue 刷新页面后state数据被清空的问题(刷新总是跳转到登陆页面)
在实际的vue项目中,当我们的应用遇到多个组件之间的共享问题时,通常会用到Vuex(一个状态管理的插件,可以解决不同组件之间的数据共享和数据持久化),解决组件之间同一状态的共享问题。因子:Vuex优势:相比sessionStorage,存储数据更安全,sessionStorage可以在控制台被看到。 Vuex劣势:在刷新页面后,vuex会重新更新state,所以,存储的数据会丢失。言而总之:实际问题:在vue项目中,使用Vuex做状态管理时,调试页面时,刷新后state上的数据消失了,该如何原创 2020-09-28 14:03:33 · 2984 阅读 · 2 评论 -
vue在多方法执行完后再执行另一个方法(等待请求完数据再执行)async/await使用方法和Promise.all
vue在一个方法执行完后执行另一个方法用Promise.all来实现。Promise是ES6的新特性,用于处理异步操作逻辑,用过给Promise添加then和catch函数,处理成功和失败的情况ES7中新提出async搭配await,建议使用async搭配await。function fun1(){ return new Promise((resolve, reject) => { /* 你的逻辑代码 */ console.log("1");原创 2020-09-14 23:20:23 · 27141 阅读 · 2 评论 -
后台返回数据打印是[object object]的,报错:SyntaxError: JSON.parse: expected property name or ‘}‘ at line 1 column
今天基于这个问题纠结了一下午,导致这个问题的坑也是挺深的,查找问题最好是从这条数据的存储开始查找问题1:先确定后台接收数据后存储到数据库里有没有自动转义特殊字符,比如原始数据是:[{"user_id":20,"good":true}],这样的一个对象数组存入数据库是:[{"user_id":20,"good":true}]说明数据经过后端的逻辑处理,把前端的数据转义存储了解决这个问题,前端传参数组的时候先用JSON.原创 2020-09-12 22:18:59 · 5809 阅读 · 0 评论 -
Invalid options object. Copy Plugin has been initialized using an options object that does not match
报错:报错文件和代码:查看了官网也没有看出所以然,最后在npm官网上找打了原因错误配置:怎么看都没有错误最后参看一下这个npn官网找打了原因,地址:https://www.npmjs.com/package/copy-webpack-plugin更改正确的写法:总结原因:应该是版本更新后,语法不兼容导致的...原创 2020-08-01 15:23:53 · 9651 阅读 · 1 评论 -
vue报错 TypeError: merge is not a function
利用ncu -u升级去年的vue项目package.json里的所有依赖,目的是想增删改它去做另一个项目,却发生了这样一个错误:(如下)查找问题原因:这是webpack配置中区分环境配置文件中的插件webpack-merge的报错,所以,看源码吧报错文件:报错代码:分析原因通过阅读运行文件里的错误代码,溯源后,发现该方法向外暴露了一个对象export { merge, mergeWithCustomize, unique, customizeArray, custo原创 2020-08-01 14:54:16 · 8935 阅读 · 3 评论 -
谷歌浏览器安装Vue Devtools插件(国内的谷歌浏览器如何安装插件)
国内的谷歌浏览器安装插件还确实是个问题,下面的教程是安装vue插件,也是向别的博主学习盒实践,记录分享给需要的朋友。我这里用到webstorm这个编辑器,默认你也会用,这样更简单分享第一步:下载源码第二步:下载好后解压缩进入vue-devtools-master工程目录,用webstorm打开这个项目执行npm install 或者有淘宝版的执行 cnpm install然后执行 npm build...原创 2020-07-03 16:05:26 · 16487 阅读 · 9 评论 -
网页Request Headers请求头和Response Headers响应头
Request HeadersAccept:告诉服务器,客户机支持的数据类型Accept-Encoding:告诉服务器,客户机支持的数据压缩格式Cache-Control:缓存控制,服务器通过控制浏览器要不要缓存数据Connection:处理完这次请求,是断开连接还是保持连接Cookie:客户机通过这个可以向服务器带数据Host:访问的主机名Upgrade-I...转载 2020-02-03 01:05:43 · 2578 阅读 · 0 评论 -
宝塔nginx运行vue项目刷新404问题解决
我的项目是webpack构建的,因为我做一切开发都想要希望要从一个标准的构建去编码所以,我的项目在node下运行,开发,调试是没有一点问题的,npm run build也是完全OK的,vue路由是history模式把build出来的dist文件夹部署到生产环境,使用nginx的时候,问题就来了我的问题描述:如果从首页打开,点击任何页面都能够正常访问,而当你处在某个页面(非首页)的时...原创 2019-09-08 01:48:16 · 7395 阅读 · 1 评论 -
Element组件 Drawer 抽屉的关闭问题
场景我使用的Drawer 抽屉是从上往下开的效果,点击搜索图标,从上往下开没问题,输入关键字搜索,搜索出来的列表放置于搜索栏下面,所以使用了一个子组件问题就来了搜出来的列表item,点击任意一条,地址栏的路由是变化了,但是这个Drawer 抽屉不会主动关闭,解决思路把父组件关于Drawer的实例,传到子组件去,代码如下再在子组件里通过pros接收 ,代码如下...原创 2019-09-07 06:09:23 · 26874 阅读 · 3 评论 -
vue实现监听滚动条
// 组件挂载后添加监听事件mounted () { window.addEventListener('scroll', this.handleScroll)},methods: { // 我这里监听的是侧边的滚动条 handleScroll: () => { // 滚动时,距离顶部的距离 var scrollTop = document.document...原创 2019-09-06 07:36:07 · 2585 阅读 · 0 评论 -
vue 实现页面静态化
实现思路使用 this.$router.push(location) 来修改 url,完成页面路由跳转 使用params来隐式传递url的参数,它类似post,url看不出,使用query来传递参数的话,类似get,url一定会被格式化为http://www.xxx.com/index?id=123,而不能自定义,以html后缀结尾代码示例:路由部分{ path: '/sha...原创 2019-09-05 20:28:45 · 19248 阅读 · 4 评论 -
vue router-link 添加点击事件
在vue学习中遇到给router-link 标签添加事件@click 、@mouseover等无效的情况我想要做的是v-for遍历出来的选项卡,鼠标移上去出现删除标签,移除标签消失的效果原代码:<router-link v-for="(item, index) in pageMenuList" :to="{ path: item.listLink }" @mouseove...原创 2019-09-04 23:49:07 · 3215 阅读 · 0 评论 -
vue路由传参的三种基本方式
一: getDescribe(id) {// 直接调用$router.push 实现携带参数的跳转 this.$router.push({ path: `/describe/${id}`, })方案一,需要对应路由配置如下: { path: '/describe/:id', name: 'D...原创 2019-09-04 09:17:23 · 382 阅读 · 0 评论 -
vue axios解决post传参数问题
我相信遇到这个问题的兄弟们,不带参数的情况下都是没有问题吧,如果有问题,百度吧,好解决,答案都比较靠谱这里主要针对带参数的情况,坑多另外,我默认你用postman带参测试接口是没问题的不多说,直接上实例供参考吧,1、2可以跳过1、安装axiosnpm install axios --save2、添加axios组件import Axios from 'axios...原创 2019-09-03 01:29:59 · 18070 阅读 · 0 评论 -
vue使用axios并存数据到state
npm安装npm install axios --savemain.js导入// 引入axios,并加到原型链中import Axios from 'axios'import QS from 'qs'Vue.prototype.$axios = AxiosVue.prototype.qs = QS各子模块中使用,通过原型链 this.$axios ......get...原创 2019-09-02 04:10:00 · 749 阅读 · 0 评论 -
vue.js常用命令
安装webpack:npm install webpack webpack-cli -g 安装vue-cli:npm install -g vue-cli 用 vue-cli 来构建项目:vue1.x——vue init webpack vue-demovue2.x——vue init webpack-simple vue-demo 安装路由:npm ...原创 2019-02-17 22:46:20 · 112 阅读 · 0 评论 -
vue.js框架:数组的各种变异方法
今天阅读vue官网的学习教程,看到一个观察数组的变异方法。变异方法???excuse me??什么东西??guide就给了这么一堆东西:原来这些方法如下: push() pop() shift() unshift() splice() sort() reverse()Vue 包含的这些方法,它们会主动触发视图的更新(即前端数据会自动...原创 2019-02-12 17:59:38 · 528 阅读 · 0 评论 -
vue-js 特殊变量$event常识
背景如果我们要阻止默认事件,在 chrome 等浏览器中,我们可能要写一个:event.preventDefault();而在 IE 中,我们则需要写:event.returnValue = false;jquery ,跨浏览器的实现,我们统一只需要写:event.preventDefault();vue 中的 event 对象相比于 jquery,vue 的...原创 2019-02-13 10:56:36 · 9887 阅读 · 0 评论 -
使用vue-CLI构建vue工程项目
之前整理的一篇 vue-cli 新手教程,出乎意料意外的达到了 9W+ 的点击量,诚惶诚恐,为了让更多小伙伴有更好的体验,所以特意整理了这个新版本的。欢迎有问题的小伙伴留言~~~vue2是对新手很友好的MVVM框架,有完善...原创 2019-02-13 18:46:35 · 413 阅读 · 0 评论 -
vue路由守卫
全局守卫router.beforeEach((to,from,next)=>{ //alert("还没有登录,请先登录!"); //next(); //console.log(to); //判断store.gettes.idLogin === false if(to.path == "/Login" || to.path == "/Register"){ ...原创 2019-02-19 15:33:19 · 2925 阅读 · 0 评论 -
Vue介绍-Vue简单应用-Vue基本用法
什么是Vue?1、Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。2、Vue 只关注视图层, 采用自底向上增量开发的设计。3、Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。Vue可以用来做什么?Vue可以做从简单到复杂的前端单页应用,随处...转载 2019-02-19 16:08:23 · 673 阅读 · 0 评论 -
{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
npm run dev 错误提示:{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.治标的解决方法:找到你的工程文件夹里的 YourProName\node_modules\vue-loader\lib\template-compiler\index.js//将以下代码if ...原创 2019-03-04 11:50:29 · 49203 阅读 · 19 评论 -
开发模式下浏览器不支持ES6
在工程项目下安装babel:cnpm install babel-preset-stage-2 --sava-dev然后在工程项目下找到.babelrc文件打开并在这个位置添加这个参数,如下图最后,cnpm run dev重启一下项目即可...原创 2019-03-07 13:46:06 · 304 阅读 · 0 评论 -
vue项目打包成APP
转载自https://blog.csdn.net/weixin_40969472/article/details/79005356事先准备,开发完成的web app项目(也可以利用vue-cli脚手架构建vue模板项目),npm run dev可以正常预览的项目1,将项目目录下config文件内index.js中asset...转载 2019-03-07 14:07:21 · 1582 阅读 · 0 评论 -
vue开发小程序Demo
1-准备电脑安装好node.js环境,安装好npm,安装好微信web开发者工具,选择一款你喜欢的编辑器,我用的是WebStorm2-打开webStorm,新建一个项目空间然后在终端执行以下命令,我这里是Windows下的WebStorm自带的Terminal我是在红色区域输入的命令 ,执行以下命令# 全局安装 vue-cli $ npm install --global vu...原创 2019-03-07 19:04:25 · 1787 阅读 · 1 评论 -
Error: Cannot find module 'webpack-cli'--解决方案
npm install webpack-cli -g 全局安装解决今日赠语:哈佛大学研究心理学表示:1、床乱糟糟的人,比穿整洁的人,创造力平均要高出50%2、经常迟到的人,比不迟到的人,幽默感平均要高出70%3、饭量大的人,比饭量小的人,情商平均要高出90%4、爱丢三落四的人更淡泊名利5、爱睡懒觉的人更具同情心...原创 2019-08-31 03:29:15 · 4794 阅读 · 0 评论 -
常用的vue轮播组件
common vue-slidera vue slider component without jQuery.**events included: ** auto animation,hover on buttons, click the button.main theory: change the pisition of images container when the curren...转载 2019-09-01 00:11:14 · 3596 阅读 · 0 评论 -
vue中的js引入图片,必须require进来
vue怎样能把assets里面的图片拿出来?1.在img标签里面直接写上路径:<img src="../assets/a1.png" class="" width="100%"/>2.利用数组保存再循环输出:return { imgs: [ {url: require('@/assets/slide1.png'), index: 0},...原创 2019-09-01 01:06:44 · 4248 阅读 · 2 评论 -
vue.js框架的生命周期:常用钩子函数
//组件实例化之前执行的函数beforeCreate:function () {alert("组件实例化之前执行的函数")},//组件实例化完毕执行的函数created:function () {alert("组件实例化完毕执行的函数")},//组件挂载前,页面仍未展示,但虚拟Dom已经配置beforeMount:function () {alert("组件挂载前,页面仍未展...原创 2019-02-17 21:46:38 · 552 阅读 · 1 评论