Vue
关注
分享
扫一扫
文章平均质量分 55
艾欢欢
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
vue过滤器filter全局创建及使用
vue过滤器filter全局创建及使用在项目中经常用到的过滤器，优先考虑注册为全局的过滤器。创建在src目录下新建filters文件夹新建 filters/index.js// 超过n个字符显示...const formatStr = function(str, num) { if (str.length > num) { return str.substr(0, num) + '...' } return str}export { formatStr原创 2020-07-13 10:18:04 · 665 阅读 · 0 评论 -
前端axios+webpack解决跨域问题（不依靠后端，独立解决跨域）
前端axios+webpack解决开发环境跨域问题（不依靠后端，独立解决跨域问题）以 vue 项目举例：// ...axios.get('https://xxx.com/api/getinfo').then(res => { console.log(res);}).catch(err => { console.log(err)})直接这么写，会出现 跨域问题，接下来通...原创 2020-01-02 15:32:52 · 883 阅读 · 0 评论 -
vue-cli3项目打包优化
原始包大小以下主要操作都在文件 vue.config.js 下进行，如没有此文件，就在项目根目录下新建。1.去掉 .map 文件.map 文件的作用：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。有了 .map 就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。操作：module.exports = { // ... ...原创 2020-01-02 14:59:13 · 1911 阅读 · 0 评论 -
【vue项目实战】Vue工程化项目--猫眼电影移动端（四）
第四节底部导航vuex --参考：vuex 使用总结（详解）登陆验证、用户注册 --这里是使用vuex模拟数据库里的读存操作（结合真实数据库请参考【全栈初体验】Vue+Node+MySQL实现前后端分离开发）demo地址 ：第四节请 结合代码 看以下文字，建议 从第一节看起底部导航菜单样式为图标和字体的组合，布局使用弹性盒子即可。图标用到了iconfont...原创 2019-11-29 22:03:37 · 5708 阅读 · 4 评论 -
vue项目中使用AES实现密码加密解密（ECB和CBC两种模式）
区别ECB： 是一种基础的加密方式，密文被分割成分组长度相等的块（不足补齐），然后单独一个个加密，一个个输出组成密文。CBC： 是一种循环模式，前一个分组的密文和当前分组的明文异或或操作后再加密，这样做的目的是增强破解难度。（不容易主动攻击，安全性好于ECB，是SSL、IPSec的标准）代码实现先安装 crypto-jsnpm install crypto-js --save...原创 2019-08-12 14:56:09 · 3530 阅读 · 0 评论 -
vue中使用v-for时为什么不能用index作为key？
结论：更新DOM的时候会出现性能问题（复用）会发生一些状态bug为什么要用key？key 的特殊属性主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用 key，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。总...原创 2019-08-02 18:44:11 · 11105 阅读 · 0 评论 -
【全栈初体验】Vue+Node+MySQL实现前后端分离开发
前言这个 demo 是MVVM开发模式，我也写过一个前后端结合开发的完整系统 demoVue项目使用vue-cil3创建的。使用vue-cil2创建的项目也可以实现，只是配置代理服务器的时候有一点差别。后面分别针对这两个版本进行区分。数据库操作使用Navicat。数据库配置新建MySQL连接（参数可以自己配置，后面会用到）新建数据库新建数据表Node...原创 2019-05-29 17:13:32 · 9532 阅读 · 31 评论 -
vue中手动封装iconfont组件（三种引用方式的封装和使用）
在线使用 有时候会因网络问题影响用户体验；直接放在 本地使用 ，如果过多使用也会显得繁琐，所以就可以将其封装成一个组件，也方便维护。封装基于阿里巴巴图标库的项目图标。初次使用iconfont项目参考： 点我查看使用前的准备和三种引用方式介绍准备将项目内的图标下载至本地在了路径 src/assets 下新建文件夹 iconfont ，用来存放字体图标的本地文件解...原创 2019-05-07 14:15:38 · 2737 阅读 · 0 评论 -
在vue项目中(本地)使用iconfont字体图标的三种方式
使用前的准备和三种使用方式介绍，参考这里开始使用：点击下载到本地在了路径 src/assets 下新建文件夹 iconfont ，用来存放字体图标的本地文件解压下载到本地的字体图标文件，放到 iconfont 文件夹下如过项目中没有下载 css-loader 依赖包，就进行下载，否则会报错npm install css-loader -D然后在 main.js...原创 2019-05-06 19:14:01 · 8578 阅读 · 0 评论 -
使用vue-i18n实现中英文切换
源码地址安装 vue-i18nnpm install vue-i18n --save-dev新建中英文对照文件// zh.jsmodule.exports = { language: { name: "中文", current: "当前语言" }, navbar: { home: "首页", about: "关于我们", ...原创 2019-08-16 14:39:59 · 3116 阅读 · 0 评论 -
vue-i18n在单文件js中使用
示例：import Vue from 'vue'import VueI18n from 'vue-i18n'Vue.use(VueI18n)const i18n = new VueI18n({ locale: localStorage.getItem('userLanguage') : 'zh', messages: { 'zh': require('../asset...原创 2019-08-27 15:11:50 · 2672 阅读 · 0 评论 -
兼容IE时，判断是否为IE浏览器
目前只有IE浏览器支持ActiveX控件，判断浏览器是否支持ActiveX控件即可判断是否为IEif (!!window.ActiveXObject || "ActiveXObject" in window){ console.log('is IE') }else { console.log('is not IE')} ...原创 2019-08-31 15:21:56 · 637 阅读 · 0 评论 -
火狐浏览器图形验证码刷新不生效的问题（图片src重新赋值不生效的问题）
场景之一图形验证码刷新刷新方式：点击一次图片，就重新给src赋值一次，从而进行刷新。// 这种方式，谷歌浏览器正常刷新，火狐浏览器不会刷新ImageCodeSrc = BASE_URL + "/login/captcha.jpg"这样写在谷歌浏览器中是正常显示的，没有问题。但是火狐就会出现不刷新的问题。原因【由于指定的src与原来图片的src相同，所以在ie7、火狐浏览器下验证码不...原创 2019-08-31 16:38:43 · 2385 阅读 · 1 评论 -
vue中iframe使用详解，结合postMessage实现跨域通信
使用场景需求：在一个H5项目的页面中以url的方式嵌入另一个项目的页面。（不得不使用iframe）而为了兼容移动端api（封装的一个移动端api，iframe内嵌页面不生效），需要实现父子页面的通信 （使用postMessage）。iframe使用基本使用直接在页面嵌套iframe标签指定src即可使用iframe。<iframe src="xxx.html"></i...原创 2019-09-29 16:34:42 · 5296 阅读 · 0 评论 -
vue项目中点击非刷新按钮，页面刷新并且路由多了个问号解决方案
问题描述在vue项目开发过程中，点击查询或重置按钮，结果页面刷新了一遍后来发现路径变成了 localhost:8080/?#/login原因这是因为在 form 表单里，点击了button 按钮，触发了表单的默认事件，也就是触发了提交行为。解决方案使用 @click.prevent 阻止默认事件即可<button @click.prevent="handleChec...原创 2019-09-29 17:41:25 · 865 阅读 · 0 评论 -
前端js/vue下载后台传过来的流文件（如excel）并设置下载文件名
这里介绍两种方法，使用 Blob对象 和 使用 js-file-download但是 不管使用哪种方法，发送请求时都要设置 responseType如果不打算了解直接使用，请通过目录进入 四、主要完整代码方法一：使用Blob对象Blob对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。File接口基于Blob，继承了blob的功...原创 2019-09-30 13:41:59 · 16273 阅读 · 7 评论 -
【vue项目实战】Vue工程化项目--猫眼电影移动端（三）
vue工程化第三节组件化开发，标题部分多处用到的代码就在全局进行注册优化用户体验：当网速过慢时，显示加载动画。播放宣传片保留组件状态，避免重新渲染 keep-alive图片懒加载本节完整demo组件化开发（标题）思想：不同种类的组件，划分不同模块从首页进入详情页，标题文字会改变，也会多出一个返回按钮，但样式还是不变的，所以这里也可以拆分为一个组件（我不会告诉你们，是我在...原创 2019-05-06 15:10:23 · 8125 阅读 · 18 评论 -
在线使用iconfont字体图标
使用阿里巴巴矢量图标库在线使用案例三种使用方式介绍使用准备进入 阿里巴巴矢量图标库 ，登陆以后，搜索需要的图标，然后点击添加入库进入“我的图标库”（右上角购物车），点击添加至项目点击 + 图标创建一个新项目，然后把新图标加入到新项目中。(也可以按需添加到已有项目)进入我的项目，即可看到如下界面三种使用方式介绍unicode引用unicode是...原创 2019-04-30 15:24:07 · 5492 阅读 · 1 评论 -
Vue调试工具vue-devtools的安装与使用
简介vue-devtools是一款基于chrome浏览器的插件，用于调试vue应用，以提高调试效率。插件商店直接安装Chromehttps://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpdFirefoxhttps://addons.mozilla.org/en-US/f...原创 2019-03-25 19:09:13 · 873 阅读 · 0 评论 -
vuex 使用总结（详解）
什么情况下我应该使用 Vuex？Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 store 模式就足够您所需了。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成...原创 2019-04-10 15:24:11 · 6010 阅读 · 1 评论 -
vuex的简单安装和使用（附vuex使用总结和详解）
Vue 的状态管理工具 Vuex安装# 安装vuexnpm install vuex --save使用在 src 目录下新建文件夹 store，再在新建文件夹下新建 index.js 文件，这个文件我们用来写一些模块并导出 store 的文件，代码示例：import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex);expo...原创 2019-04-10 16:03:09 · 6153 阅读 · 2 评论 -
页面刷新后，vuex中数据丢失、初始化的解决方案 vuex-persistedstate
场景之一应用API进行用户身份验证，将登录状态保存为Vuex状态中的布尔值。当用户登录时，设置了 登录状态 并相应地有条件地显示 登录/注销 按钮。但是当刷新页面时，vue应用程序的状态将丢失并重置为默认值这导致的问题就是：即使用户登录了，但刷新页面时，登录状态 也会设置为**false，**这样即使用户保持登录状态，也会显示登录按钮而不是注销按钮…怎么做才能防止这种行为解决方案...原创 2019-04-11 15:02:21 · 1663 阅读 · 0 评论 -
vue中fullPath和path的区别
fullPath匹配路由，path匹配路径。例如：路由是：/path/:type真正路径是：/path/list那么此时path为/path/list，而fullPath为/path/:type原创 2019-04-09 15:04:03 · 27446 阅读 · 0 评论 -
Vue进阶，效率和优雅我都要
一、合理利用watch的immediate属性例如在组件创建时需要获取一次数据列表，然后监听数据的变化，根据数据改变重新获取列表。通常这么写：created(){ this.fetchPostList()}, watch: { changeValue(){ this.fetchPostList() } }但是...原创 2019-04-09 17:22:06 · 638 阅读 · 0 评论 -
Vue中router的beforeEach与afterEach钩子函数
在路由跳转的时候，我们需要一些权限判断或者其他操作。这个时候就需要使用路由的钩子函数。定义：路由钩子主要是给使用者在路由发生变化时进行一些特殊的处理而定义的函数。总的来说Vue提供了三大类钩子，和两种函数全局钩子某个路由的钩子组件内钩子两种函数：Vue.beforeEach(function(to,form,next){}) //在跳转之前执行Vue.afterEach...原创 2019-04-09 18:56:06 · 2211 阅读 · 0 评论 -
vuex中store存储store.commit和store.dispatch的区别及用法
代码示例：this.$store.commit('toShowLoginDialog', true);this.$store.dispatch('toShowLoginDialog',false);主要区别：dispatch：含有异步操作，可用于向后台提交数据写法： this.$store.dispatch('mutations方法名',值);commit：同步操作，...原创 2019-04-09 20:06:05 · 76625 阅读 · 3 评论 -
【vue项目实战】Vue工程化项目--猫眼电影移动端
这里是仿猫眼移动端。使用 vue-cli 创建项目。现在先把主框架搭起来，熟悉路由和组件，后面在 项目demo 持续贴出完整项目代码。vue初始化项目首先全局安装Vue脚手架——vue-clinpm/cnpm install vue-cli -g新建一个文件夹vue-demo，在该文件夹下打开命令窗口，并输入以下命令：vue init webpack vuedemo-maoyan ...原创 2019-04-16 13:42:46 · 33689 阅读 · 20 评论 -
【vue项目实战】Vue工程化项目--猫眼电影移动端（二）
vue工程化第二节添加内容和样式使用axios请求数据，参考这里添加局部左右滑动（即将上映页），参考 （左右滑动也可使用插件）组件化开发，相同代码可以提取出来作为一个组件来调用，减少代码量，提高代码可复用性路由传值跳转电影详情页，[参考]本节完整[demo参考]提高代码可复用性相同代码单独作为一个组件，提高代码可复用性。下面两个界面的红色框框，样式和内容都差不多，可以...原创 2019-04-20 18:11:41 · 13978 阅读 · 23 评论 -
vue-router 前端路由之路由传值
路由传值在前端的路由里面，我们在切换路由的时候，也相当于切换了页面，页面与页面之前有时候需要做到传值 ，这个时候就需要进行路由传值，在VueRouter里面，两个路由之间做跳转的时候，如何进行传值呢？普通跨页面传值：通过localStoragesetItem()getItem()通过search(地址栏? 后面的参数)VueRouter的路由传值VueRouter的路...原创 2019-04-20 18:22:57 · 6336 阅读 · 3 评论 -
vue-router 前端路由之编程式路由
如果要跳转一个路由，可以使用router-link的方式进行跳转，可是这样做有一定的局限性，假设，我们希望在进行路由跳转传入一些参数进去，这个时候，应该怎么操作呢？为了解决这一个问题，vue-router就推出了编程式路由，以编程的形式解决路由的跳转问题编程式路由的跳转常用的两种方式如下：通过path去跳转this.$router.push({ path: "/logi...原创 2019-04-20 19:06:12 · 1214 阅读 · 0 评论 -
axios 进行同步请求(async+await)
一般使用axios进行数据请求就是要使用异步请求，一些需求可以写在回调里面。如果一定要同步的话，async+await 了解一下？methods: { async funA(){ var res = await axios.post('') //这里的res就是axios请求回来的结果 }}...原创 2019-04-27 16:46:56 · 60604 阅读 · 2 评论 -
【vue-cli踩坑】Failed to load resource: net::ERR_FILE_NOT_FOUND或者build之后dist文件下的index.html不显示内容
通过vue-cli创建的项目npm run dev 运行开发环境可以看到效果，但是 npm run dbulid 之后，通过产生的dist文件下的index.html直接打开没显示，看不到效果，报错如下：知乎上：webpack.prod.conf.js 中output添加参数publicPath:’./’具体代码：在webpack.base.conf.js里output: { ...原创 2019-04-23 16:58:59 · 9127 阅读 · 11 评论 -
【前端性能优化】02--vue性能优化
template语义化标签，避免乱嵌套，合理命名属性等等标准推荐的东西就不谈了。模板部分帮助我们展示结构化数据，vue 通过数据驱动视图，主要注意一下几点v-show，v-if 用哪个？在我来看要分两个维度去思考问题，第一个维度是权限问题，只要涉及到权限相关的展示无疑要用 v-if，第二个维度在没有权限限制下根据用户点击的频次选择，频繁切换的使用 v-show，不频繁切换的使用 v-if...原创 2019-04-28 14:59:46 · 973 阅读 · 1 评论 -
vue中data里写return和不写的区别
vue中data里写return和不写的区别vue实例中不写return的代码：let app= newVue({ el:"#app", data:{ }, methods:{ }})在使用组件化的项目中data写return的代码：export default{ data(){ return { ...原创 2019-03-08 16:50:34 · 3879 阅读 · 0 评论