vue
文章平均质量分 83
前端架构师陈龙威
还是敲代码有意思
展开
-
前端-vue3-vue3相比vue2改了啥
vue的初始化改了:// 旧版let vm = new Vue({ el: '#app', data: {}})// 新版,且data必须为function了createApp({ data() { return {} }}).mount('#app')复制代码常用部分的改动新增部分:vue3新增的最大亮点就是新加了setup,几乎替代了data,methods,mounted等生命周期,且setup中无法访问this 新增...原创 2021-10-14 14:01:05 · 587 阅读 · 0 评论 -
vue-鉴权的两种方法之路由拦截
vue中鉴权的两种方法常用的鉴权有两种:一种是路由拦截,一种是动态路由。路由拦截通过vue-router的beforeEach方法进行每一次路由访问的拦截,判断拦截信息中是否有鉴权要求或者权限校验,以此来实现鉴权。如果权限不够,访问的路径虽然存在但会被拦截。动态路由在登录后根据用户信息以及权限动态地添加正确的权限路由,如果权限不够,访问的路径是不存在的。比较路由拦截实现起来相对简单,只需在登录的时候保存用户权限信息,然后编写路由的时候将需要鉴权的路由加上权限信息,然后在beforeEach拦原创 2020-11-09 22:26:42 · 6061 阅读 · 0 评论 -
vue的keep-alive的正确用法
keep-alive的正确用法实现:我有3个页面,一个index页面,包含点击进入分类sort页面和进入详情detail页面两个功能一个sort页面,包含上划加载,进入详情detail页面两个功能一个detail页面,展示页面详情我要实现的:从index点击进入detail页面,回退仍旧处于之前进入的位置;点击进入sort页面,回退仍旧处于之前进入的位置;点击进入sort页面...原创 2019-06-25 22:44:14 · 3524 阅读 · 0 评论 -
用vue简单写一个音乐播放器
简单地写一个功能比较全的音乐播放器前言因为音乐播放器是一个很可能在项目遇到的东西,早写总比晚写好。趁没事先写个。思路一个音乐播放器该有的东西:封面,歌名,专辑,作者控制器(上一首,下一首,暂停播放)进度条(总进度,缓存进度,播放进度,播放时间,总时间,进度拖拽按钮)播放方式(单曲循环,顺序播放,随机播放,列表循环)声音(总声音长度,当前声音长度,声音长度拖拽按钮)播放...原创 2019-06-11 13:46:09 · 12281 阅读 · 6 评论 -
vue之自定义组件的制作,简单到你怀疑人生
最近项目做完了,闲来无事,重新读了一遍vue官方文档,发现了以前很多没有的东西以及自己没注意的方法。自定义组件就相当于方法封装,在写项目遇到像类似的代码,第一想法就是我得把它封装起来,其实自定义组件也差不多。废话不多说,我们开始吧。首先,要有思路:官方提供了自定义组件接收参数的方法---prop,以及向外传递信息的方法---$emit,既然对外互通的方法有了,那么方法就一目了然了,...原创 2019-05-29 18:05:02 · 2371 阅读 · 0 评论 -
vue之超简单的自定义插件的制作原理
引子:读到vue官网教程的最后一课:插件,教学有点简单,看完比较懵逼,所以找了大神的资料作为参考:参考资料: 官方:https://cn.vuejs.org/v2/guide/plugins.html 大神劳卜:https://www.cnblogs.com/luozhihao/p/7414419.html解读:插件不同于组件,官网中的组件为Vue....原创 2019-05-29 18:04:00 · 477 阅读 · 0 评论 -
vue之重读文档,记录一些比较重要的东西
v-model和v-bind的理v-model:双向绑定v-bind:单向绑定修饰符.stop 阻止事件继续传播,向上或向下.prevent 阻止默认事件.capture 捕捉事件,先在本元素上处理,然后向下传递.self 捕捉事件,只在本元素上处理.once 只启动一次.passive按钮修饰符常用于登录回车提交或者搜索提交<input type=...原创 2019-05-30 10:30:33 · 194 阅读 · 0 评论 -
vue之mixin,component,slot的真正用法
引子最近刚好重读vue文档,发现了自己之前不用的mixin混入,才发现以前重复写的代码是多么愚蠢。对于现在的vue来说,dom结构重复的话可以用组件封装,js方法重复的话可以用mixin混入,css重复的话可以用@import引入,那么,当你开发一个功能相似,ui布局相差不多的页面时,只需抽取重复部分,一个超级简单的即插即用的代码模块就这么诞生了!!!例子比如我们写多个根据渠道判定ui以及...原创 2019-05-30 10:02:28 · 1643 阅读 · 0 评论 -
vue-cli2.x配置开发,测试,生产环境,打包后无报错正常运行
最近项目比较紧,但是ui又没出,本来打算跟着原型先敲,结果瞥了一眼被咔嚓掉的上一版ui,溜了溜了,这特喵明明是两个项目啊,产品,你给我出来,我保证打不死你(ー`´ー)。在等新ui的时候无聊,刚好想起之前vue-cli2.x开发时一直没配测试环境,刚好弄下吧,于是百度了,是的,有现成的我就抄现成的了,我就是这么偷懒,然后找了百度前几个测试了下,好吧,我觉得吧,自己写的才是最合适的。为了通用性...原创 2019-03-20 17:41:53 · 3749 阅读 · 1 评论 -
【转载】vue-router路由懒加载(解决vue项目首次加载慢,长时间白屏)
vue-router路由懒加载(解决vue项目首次加载慢)本文转自博客园-李俊涛-原文地址懒加载:----------------------------------------------------? 也叫延迟加载,即在需要的时候进行加载,随用随载。为什么需要懒加载? 像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进...转载 2018-09-03 11:50:11 · 4203 阅读 · 0 评论 -
【转载】vue项目中配置favicon图标
vue项目中配置favicon图标转载于-csdn-xum222222-原文地址如上图所示,页面顶部的小图标会让页面显得高大上,一般把这种图标叫做favicon图标。利用vue-cli脚手架搭建的项目,如果不手动配置,页面中是不会显示favicon图标。不配置是这样子的:favicon图标的配置也很简单,vue-cli默认帮我们安装了html-webpack-plugin(...转载 2018-09-05 14:23:35 · 256 阅读 · 0 评论 -
【转载】vue优化-页面加载时间-代码分割从三方面来选择
VueJS + Webpack 代码分割的三种方式转载自-搜狐-搜狐号:web前端开发,原文地址2017-09-19 21:44程序设计/搜狐对单页应用实行代码分割,是提高页面加载速度的一种很好的方式。因为用户不必在一次请求里加载完所有的代码,能够更快的看到页面并进行交互,这将会提升用户体验(特别是在移动端);同时因为 Google 会给加载缓慢的网站降权,代码分割也对 SEO 有...转载 2018-09-04 13:58:35 · 1259 阅读 · 0 评论