![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
VUE
檀小泡泡
希望大家多多的点赞点赞,评论
展开
-
vuex页面刷新数据丢失的解决办法
在vue项目中用vuex来做全局的状态管理, 发现当刷新网页后,保存在vuex实例store里的数据会丢失。原因:因为store里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载vue实例,store里面的数据就会被重新赋值初始化解决思路:将state的数据保存在localstorage、sessionstorage或cookie中(三者的区别),这样即可保证页面刷新数据不丢失且易于读取。localStorage: localStorage的生命周期是永久的,关闭页面或浏览器之后local原创 2021-04-12 22:46:06 · 627 阅读 · 0 评论 -
vue-cli在不同环境下赋予变量不同的值
在开发环境下,可以自己赋值;在生产环境下,我则希望直接通过window.location.pathname获得。在创建vue-cli时会自动配置环境变量,生产环境是production,开发环境是development然后在.js和.vue中都可以通过process.env.NODE_ENV获得环境变量的值。因此如果要设置一个在不同环境下不同的变量,可以通过process.env.NODE_ENV作为key值。比如:<script> export default { na原创 2021-04-05 20:48:07 · 370 阅读 · 0 评论 -
vue路由 导航守卫(全局守卫、路由独享守卫、组件内守卫)
转自:https://www.jianshu.com/p/691379025334原创 2021-02-04 11:26:11 · 141 阅读 · 0 评论 -
vue路由的两种模式,hash和history的区别
转自:https://www.cnblogs.com/lbcxq/p/12036788.html1.直观区别:hash模式url带#号,history模式不带#号。2.深层区别:hash模式url里面永远带着#号,我们在开发当中默认使用这个模式。如果用户考虑url的规范那么就需要使用history模式,因为history模式没有#号,是个正常的url适合推广宣传功能也有区别,比如我们在开发app的时候有分享页面,那么这个分享出去的页面就是用vue或是react做的, 咱们把这个页面分享到第三方原创 2021-02-03 20:39:12 · 1391 阅读 · 0 评论 -
vue axios全攻略
https://www.cnblogs.com/libin-1/p/6607945.html原创 2021-01-28 15:24:28 · 84 阅读 · 0 评论 -
Vue的响应式原理及总结
详看:https://www.cnblogs.com/jiajialove/p/11323105.htmlVue 的响应式原理是核心是通过 ES5 的保护对象的 Object.defindeProperty 中的访问器属性中的 get 和 set 方法,data 中声明的属性都被添加了访问器属性,当读取 data 中的数据时自动调用 get 方法,当修改 data 中的数据时,自动调用 set 方法,检测到数据的变化,会通知观察者 Wacher,观察者 Wacher自动触发重新render 当前组件(子组原创 2021-01-27 15:19:11 · 100 阅读 · 0 评论 -
Vue中的computed属性、watch属性
参考原文:https://www.cnblogs.com/gunelark/p/8492468.html直接看原文较好。自己贴了一部分,有空再贴另一部分。自己的理解:computed用来监控自己定义的变量,该变量不在data里面声明,直接在computed里面定义,然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理;computed比较适合对多个变量或者对象进行处理后返回一个结果值,也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化,举例:购物车里面的商品列表和总金额之原创 2021-01-25 17:00:25 · 113 阅读 · 0 评论 -
vue-cli3与vue2的区别;vue-cli3项目搭建
3.0 新加入了 TypeScript 以及 PWA 的支持• 部分命令发生了变化:下载安装 npm install -g vue@cli删除了vue list创建项目 vue create启动项目 npm run serve打包项目 npm run build-productionnpm run build-test• 默认项目目录结构也发生了变化:移除了配置文件目录,config 和 build 文件夹移除了 static 文件夹,新增 public 文件夹,并且 ind原创 2021-01-01 16:23:21 · 2054 阅读 · 0 评论 -
微信分享wx.config配置时遇到invalid signature错误的解决办法
每次解决完问题,都想回到过去糊自己一巴掌。。。1 若JSSDK已配置仍遇到invalid signature错误,一定参考“附录5-常见错误及解决方法”部分有检查步骤可参考,一定要先看再开发!!浪费了多少大好时光,流下悔恨的泪水。。2 具体需要:1)设置ip白名单需要有开发权限 管理员权限 开发>基本配置>白名单>查看 IP白名单 多个IP用回车分隔。2) 设置域名白名单公众号设置—功能设置—js接口安全域名第3点的txt文件要放到域名下,保证随时可以访问。https:/原创 2020-12-22 11:28:02 · 3157 阅读 · 0 评论 -
vue引入自定义字体otf、ttf字体的方法
1 在src/assets下新建font文件夹,文件夹中包含以下文件2 新建font.css@font-face { font-family:'ALPH'; src:url('Alibaba-PuHuiTi-Regular.otf');}@font-face { font-family: 'YSBT'; src:url('ysbthei.ttf');}3 在项目中(main.js)引入刚刚加载进来的字体import './assets/font/font.css'在m原创 2020-12-08 15:55:41 · 5371 阅读 · 0 评论 -
chrome浏览器起不来项目,火狐浏览器报错[WDS] Disconnected!
vue页面中报错 [WDS] Disconnected!原因:因为用了全局代理软件,所以需要将 config/index.js中{host:localhost}改为{host: 127.0.0.1}重启项目即可原创 2020-11-30 16:01:29 · 584 阅读 · 0 评论 -
组件间传递信息
1 prop父子组件<!-- 父组件 --><template> <div> <my-child :parentMessage="parentMessage"></my-child> </div></template><script> import MyChild from '@components/common/MyChild' export def转载 2020-06-01 18:08:29 · 230 阅读 · 0 评论 -
Vuex2
转自:https://www.jianshu.com/p/2e5973fe1223一、初识VueX1.1 关于VueXVueX是适用于在Vue项目开发时使用的状态管理工具。试想一下,如果在一个项目开发中频繁的使用组件传参的方式来同步data中的值,一旦项目变得很庞大,管理和维护这些值将是相当棘手的工作。为此,Vue为这些被多个组件频繁使用的值提供了一个统一管理的工具——VueX。在具有VueX的Vue项目中,我们只需要把这些值定义在VueX中,即可在整个Vue项目的组件中使用。1.2 安装由于Vu转载 2020-06-01 09:52:05 · 199 阅读 · 1 评论 -
Vuex1
Vuex 和单纯的全局对象有以下两点不同:1 Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新。2 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化,从而让我们能够实现一些工具帮助我们更好地了解我们的应用。store/index.jsimport Vue from 'vue'i原创 2020-05-29 14:33:47 · 150 阅读 · 0 评论 -
Vue中filter的使用
在Vue中filter过滤器是一个非常强大的功能。个人觉得称它为加工车间会更加贴切一些。过滤器可以用来筛选出符合条件的,丢弃不符合条件的;加工车间既可以筛选,又可以对筛选出来的进行加工。一、filter的作用是:对值进行筛选加工。二、使用的地方有两个位置,和两个方式。1 {{ msg | filterA }}双括号插值内。2 <h1 v-bind:id=" msg | filterA">{{ msg }}</h1>v-bind绑定的值的地方。(msg为需要filter转载 2020-05-28 10:22:29 · 2750 阅读 · 0 评论 -
新版vue-cli脚手架:npm run serve 起项目起到百分之几卡住了
新版vue-cli脚手架太坑爹了,npm run serve起到百分之几卡住不动了。经历了删本地分支-新建本地分支,循环之后,定位–发现是一个vue组件引入的一个组件的components没写,引入组件参数是空的,即:file-list.sync=""。这也太不智能了,哪怕报个错呢,这就起不来了。。坑!!...原创 2020-05-26 11:02:41 · 3150 阅读 · 0 评论 -
npm ERR! missing script: dev解决方案,新旧版vue-cli命令
运行命令npm run dev 出现 npm ERR! missing script: dev 的错误这是因为vue 版本问题,新版本"@vue/cli-service": “^4.1.0”,使用 npm run serve 来运行项目转载 2020-04-27 14:57:51 · 2077 阅读 · 0 评论 -
VUE中设置全局变量,在组件中引用、修改它
main.jsimport global from './components/global/global'Vue.prototype.global = global;global.jsexport default{ messNum:'',//未读消息数量 setmessNum (messNum) { this.messNum = messNum }}zuji...原创 2020-04-17 16:14:55 · 1400 阅读 · 0 评论 -
VUE this.$route 和 this.$router
this.route和this.route 和 this.route和this.router :this.$route 是路由【参数对象】,所有路由中的参数, params, query 都属于它this.$route.matched[0].namethis.$router 是路由【导航对象】,用它 可以方便的 使用 JS 代码,实现路由的 前进、后退、 跳转到新的 URL 地址th...转载 2020-04-03 12:01:48 · 874 阅读 · 0 评论 -
vue v-for
1、v-for循环普通数组i:索引原创 2020-03-18 15:49:51 · 94 阅读 · 0 评论 -
vue swiper animate如何使用
先安装:npm install animate.css --save上代码:main.js:import animated from 'animate.css'Vue.use(animated)HTML:<div class="ani" swiper-animate-effect="bounceInDown" swiper-animate-d...原创 2019-12-03 18:05:23 · 2907 阅读 · 9 评论 -
swiper的使用 在vue中
swiper的安装与使用:https://github.com/surmon-china/vue-awesome-swiper以下代码转自:https://www.cnblogs.com/scale/p/9294516.html(链接里面有详细解释步骤)代码:main.jsimport VueAwesomeSwiper from 'vue-awesome-swiper'import...转载 2019-11-21 14:58:20 · 213 阅读 · 0 评论 -
vue对象数据改变,页面不更新
vue框架内:响应数组赋值给数组:this.proList=response.list并增加属性‘markOpen’,采用等式赋值之后,通过Vue.set赋值改变属性值,页面也不会更新。必须一开始mounted请求就是Vue.set对新增属性赋值,之后通过Vue.set改变属性值页面才会更新。两种方法可实现页面更新:1 this.$set(this.proList[i],'markOp'...原创 2019-11-12 11:06:19 · 963 阅读 · 0 评论 -
Module build failed: Error: Loading PostCSS Plugin failed: Cannot find module './features/meter'
npm run dev的时候报这个错,将根目录下的.postcssrc.js文件里的内容注释就可以了。。。不知道别的会不会有影响。。。。。原创 2019-10-21 14:52:58 · 5838 阅读 · 5 评论 -
vue-cli脚手架build目录中的webpack.base.conf.js配置文件
此文章用来解释vue-cli脚手架build目录中的webpack.base.conf.js配置文件此配置文件是vue开发环境的wepack相关配置文件,主要用来处理各种文件的配置关于注释当涉及到较复杂的解释我将通过标识的方式(如(1))将解释写到单独的注释模块,请自行查看上代码// 引入nodejs路径模块var path = require(‘path’)// 引入utils工具...转载 2019-04-19 11:43:01 · 688 阅读 · 0 评论 -
vue项目中element升级
1 cnpm install2,安装高效升级插件 cnpm install -g npm-check-updates3,查看最新的版本:npm-check-updates 简写:ncu4.修改package.json里面element-ui的版本号,“element-ui”: “^1.4.7”。5.cnpm install element-ui(是根据package.json的版本号...原创 2019-04-19 14:27:11 · 570 阅读 · 0 评论 -
搭建vue框架
1 安装Hbuilder2 Hbuilder中设置cmd3 安装node.js输入node查看是否成功4 安装淘宝镜像,npm install - g cnpm –registry = https://registry.npm.taobao.org,cnpm查看是否成功5 安装vue-cli,cnpm install -g vue-cli输入:vue,回车,若出现vue信息说明表示...原创 2019-05-15 17:45:08 · 857 阅读 · 2 评论 -
灵活的vue
1 prop在循环数组中的应用:<el-form label-width="26%" ref="productAdd" :model="prodList" :rules="rules"> <!--####循环开始--> <div v-for="(item,key) in prodList" :key="key" :class="{ pageMargi...原创 2019-06-14 13:27:43 · 225 阅读 · 0 评论 -
【vue.js】生命周期——beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDesotry、destoryed
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script src="vue.js"></script></head><bod...原创 2019-07-02 15:30:55 · 1942 阅读 · 0 评论 -
axios全局请求参数设置,请求及返回拦截器
应用场景:1,每个请求都带上的参数,比如token,时间戳等。2,对返回的状态进行判断,比如token是否过期代码如下:axios.interceptors.request.use( config => { var xtoken = getXtoken() if(xtoken != null){ config.headers['X-Token'] = xtok...转载 2019-06-28 16:06:43 · 3370 阅读 · 0 评论 -
vue方法内的方法使用this的问题
在vue中的setTimeout使用this不能识别,在外面加上一句就好了。updated(){ let _this=this; setTimeout(function(){_this.treeLoading=false},3000)}原创 2019-07-30 16:33:47 · 2005 阅读 · 0 评论 -
vue中的ref属性
首先ref的引用是相当于一个DOM节点(如果是子组件则指向的是其实例),而且是一个string类型的值。通俗的将就类似于原生js用document.getElementById("#id")但是只是类似,他们的不同点是Vue是操控虚拟DOM ,也就是说在渲染初期并没有这个ref的属性,这个属性是在创建Vue实例以后才被加到虚拟DOM中的。所以在官方文档的最后提醒开发者不能将ref的结果在模版...原创 2019-08-15 16:13:14 · 509 阅读 · 0 评论 -
vue-devtools chrome 开发工具
1.github下载地址:https://github.com/vuejs/vue-devtools有Git的同学直接 git clone https://github.com/vuejs/vue-devtools2.下载安成之后打开cmd进入vue-devtools文件夹把依赖装好npm install 之后再进行npm run build(最好装一个cnpm,cnpm run build)...转载 2018-10-09 09:53:40 · 79 阅读 · 0 评论