vue.js
关注
分享
扫一扫
1学习者1
不为失败找理由只为成功找方法
展开
-
使用vue 刷新页面后state数据被清空的问题（刷新总是跳转到登陆页面）
在实际的vue项目中，当我们的应用遇到多个组件之间的共享问题时，通常会用到Vuex（一个状态管理的插件，可以解决不同组件之间的数据共享和数据持久化），解决组件之间同一状态的共享问题。因子：Vuex优势：相比sessionStorage，存储数据更安全，sessionStorage可以在控制台被看到。 Vuex劣势：在刷新页面后，vuex会重新更新state，所以，存储的数据会丢失。言而总之：实际问题：在vue项目中，使用Vuex做状态管理时，调试页面时，刷新后state上的数据消失了，该如何原创 2020-09-28 14:03:33 · 3042 阅读 · 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 · 28688 阅读 · 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 · 5949 阅读 · 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 · 9675 阅读 · 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 · 9046 阅读 · 3 评论 -
谷歌浏览器安装Vue Devtools插件（国内的谷歌浏览器如何安装插件）
国内的谷歌浏览器安装插件还确实是个问题，下面的教程是安装vue插件，也是向别的博主学习盒实践，记录分享给需要的朋友。我这里用到webstorm这个编辑器，默认你也会用，这样更简单分享第一步：下载源码第二步：下载好后解压缩进入vue-devtools-master工程目录，用webstorm打开这个项目执行npm install 或者有淘宝版的执行 cnpm install然后执行 npm build...原创 2020-07-03 16:05:26 · 16699 阅读 · 9 评论 -
网页Request Headers请求头和Response Headers响应头
Request HeadersAccept:告诉服务器，客户机支持的数据类型Accept-Encoding:告诉服务器，客户机支持的数据压缩格式Cache-Control：缓存控制，服务器通过控制浏览器要不要缓存数据Connection:处理完这次请求，是断开连接还是保持连接Cookie:客户机通过这个可以向服务器带数据Host:访问的主机名Upgrade-I...转载 2020-02-03 01:05:43 · 2622 阅读 · 0 评论 -
宝塔nginx运行vue项目刷新404问题解决
我的项目是webpack构建的，因为我做一切开发都想要希望要从一个标准的构建去编码所以，我的项目在node下运行，开发，调试是没有一点问题的，npm run build也是完全OK的，vue路由是history模式把build出来的dist文件夹部署到生产环境，使用nginx的时候，问题就来了我的问题描述：如果从首页打开，点击任何页面都能够正常访问，而当你处在某个页面（非首页）的时...原创 2019-09-08 01:48:16 · 7458 阅读 · 1 评论 -
Element组件 Drawer 抽屉的关闭问题
场景我使用的Drawer 抽屉是从上往下开的效果，点击搜索图标，从上往下开没问题，输入关键字搜索，搜索出来的列表放置于搜索栏下面，所以使用了一个子组件问题就来了搜出来的列表item，点击任意一条，地址栏的路由是变化了，但是这个Drawer 抽屉不会主动关闭，解决思路把父组件关于Drawer的实例，传到子组件去，代码如下再在子组件里通过pros接收 ，代码如下...原创 2019-09-07 06:09:23 · 27015 阅读 · 3 评论 -
vue实现监听滚动条
// 组件挂载后添加监听事件mounted () { window.addEventListener('scroll', this.handleScroll)},methods: { // 我这里监听的是侧边的滚动条 handleScroll: () => { // 滚动时，距离顶部的距离 var scrollTop = document.document...原创 2019-09-06 07:36:07 · 2612 阅读 · 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 · 19437 阅读 · 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 · 3289 阅读 · 0 评论 -
vue路由传参的三种基本方式
一： getDescribe(id) {// 直接调用$router.push 实现携带参数的跳转 this.$router.push({ path: `/describe/${id}`, })方案一，需要对应路由配置如下： { path: '/describe/:id', name: 'D...原创 2019-09-04 09:17:23 · 411 阅读 · 0 评论 -
vue axios解决post传参数问题
我相信遇到这个问题的兄弟们，不带参数的情况下都是没有问题吧，如果有问题，百度吧，好解决，答案都比较靠谱这里主要针对带参数的情况，坑多另外，我默认你用postman带参测试接口是没问题的不多说，直接上实例供参考吧，1、2可以跳过1、安装axiosnpm install axios --save2、添加axios组件import Axios from 'axios...原创 2019-09-03 01:29:59 · 18150 阅读 · 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 · 780 阅读 · 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 · 129 阅读 · 0 评论 -
vue.js框架：数组的各种变异方法
今天阅读vue官网的学习教程，看到一个观察数组的变异方法。变异方法？？？excuse me??什么东西？？guide就给了这么一堆东西：原来这些方法如下： push() pop() shift() unshift() splice() sort() reverse()Vue 包含的这些方法，它们会主动触发视图的更新（即前端数据会自动...原创 2019-02-12 17:59:38 · 570 阅读 · 0 评论 -
vue-js 特殊变量$event常识
背景如果我们要阻止默认事件，在 chrome 等浏览器中，我们可能要写一个：event.preventDefault();而在 IE 中，我们则需要写：event.returnValue = false;jquery ，跨浏览器的实现，我们统一只需要写：event.preventDefault();vue 中的 event 对象相比于 jquery，vue 的...原创 2019-02-13 10:56:36 · 9995 阅读 · 0 评论 -
使用vue-CLI构建vue工程项目
之前整理的一篇 vue-cli 新手教程，出乎意料意外的达到了 9W+ 的点击量，诚惶诚恐，为了让更多小伙伴有更好的体验，所以特意整理了这个新版本的。欢迎有问题的小伙伴留言~~~vue2是对新手很友好的MVVM框架，有完善...原创 2019-02-13 18:46:35 · 432 阅读 · 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 · 2946 阅读 · 0 评论 -
Vue介绍-Vue简单应用-Vue基本用法
什么是Vue？1、Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。2、Vue 只关注视图层， 采用自底向上增量开发的设计。3、Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。Vue可以用来做什么？Vue可以做从简单到复杂的前端单页应用，随处...转载 2019-02-19 16:08:23 · 702 阅读 · 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 · 49645 阅读 · 19 评论 -
开发模式下浏览器不支持ES6
在工程项目下安装babel:cnpm install babel-preset-stage-2 --sava-dev然后在工程项目下找到.babelrc文件打开并在这个位置添加这个参数，如下图最后，cnpm run dev重启一下项目即可...原创 2019-03-07 13:46:06 · 333 阅读 · 0 评论 -
vue项目打包成APP
转载自https://blog.youkuaiyun.com/weixin_40969472/article/details/79005356事先准备，开发完成的web app项目（也可以利用vue-cli脚手架构建vue模板项目），npm run dev可以正常预览的项目1，将项目目录下config文件内index.js中asset...转载 2019-03-07 14:07:21 · 1604 阅读 · 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 · 1823 阅读 · 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 · 4816 阅读 · 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 · 3629 阅读 · 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 · 4290 阅读 · 2 评论 -
vue.js框架的生命周期：常用钩子函数
//组件实例化之前执行的函数beforeCreate:function () {alert("组件实例化之前执行的函数")},//组件实例化完毕执行的函数created:function () {alert("组件实例化完毕执行的函数")},//组件挂载前，页面仍未展示，但虚拟Dom已经配置beforeMount:function () {alert("组件挂载前，页面仍未展...原创 2019-02-17 21:46:38 · 578 阅读 · 1 评论