vue.js
文章平均质量分 78
黑山老妖橙
前端开发工程师,小菜,想要成为真正的大神。不仅精还宽,目前在成为精的路上努力着。
展开
-
vue-router params与query使用及区别
前置知识url的语法大多数的url都是由9个部分组成<scheme>://<user>:<password>@<host>:<port>/<path><params>?<query>#<frag>scheme方案名称即协议名称,表示用哪种协议访问服务器,如http、httpsuser用户:某些方案访问资源时需要的用户名,有些服务器要求输入用户名密码才会允许用户访问数据,如ftppass原创 2021-08-15 21:29:13 · 1175 阅读 · 0 评论 -
vue-router导航守卫全解析
导航守卫vue-router实例方法提供了守卫导航的方法,可以将我们的代码逻辑植入到路由导航过程中。主要分为全局、单个路由共享、组件级全局router.beforeEach()作用:导航前置守卫 在路由跳转之前进行判断和拦截,一般用来做一些进入页面的限制,比如未登录不能进入某些页面当一个导航触发时,全局前置守卫按照创建顺序调用。守卫是异步解析执行,此时导航在所有守卫 resolve 完之前一直处于 等待中。参数to:Route对象,即将要进入的目标from:Route,当前要离开的路由原创 2021-08-13 20:39:05 · 595 阅读 · 2 评论 -
vue+element分页数据生成排名
背景项目采用vue+element,其中有一个table数据采用后端分页形式,但需要展示一个排名,后端未返回需前端处理。实现思路排名是由页码pageNum+序号index组合生成的,第一页数据,采用序号+1即可,但第一页index为9的数据排名为10,当序号为9时采用页码+0第二页数据,采用页码-1+序号+1即可比如11、12、13,但第二页index为9的数据排名为20,当序号为9时采用页码+0总结来看,逻辑应该为如下:如果序号为9,则返回页码pageNum+‘0’如果序号不为9且原创 2021-03-11 00:25:55 · 1799 阅读 · 2 评论 -
vue3.0介绍
vue3.0源码组织方式与vue2.x版本相比,vue3.0的变化如下:源码组织方式的变化,全部采用ts编写,采用monorepo将独立功能提取到不同包中增加CompositionApi,90%以上的api兼容2.x,解决2.x版本中开发大型项目中超大组件过大不好拆分重用的问题性能提升,重写了虚拟dom、同时使用proxy重写响应式采用vite打包工具,在开发阶段不需打包便可直接运行项目源代码组织方式采用ts重写,帮我们进行类型检查使用monorepo管理项目结构,一个源代码分为不同的原创 2021-02-16 15:42:41 · 1916 阅读 · 0 评论 -
vue 处理组件边界情况
在vue文档中有处理组件边界情况的api:$root:存储到根实例中parent/parent/parent/children,可以访问父组件、子组件的属性,也可以进行修改$refs:可以访问子组件依赖注入provide/inject$root我们在创建vue实例的时候可以将数据挂载到根节点```//main.jsnew Vue({ render: h => h(App), data: { title: '根实例 - Root' }, methods:原创 2020-11-06 14:11:41 · 391 阅读 · 0 评论 -
vue 全局组件与局部组件的注册方式及适用场景
组件其实也是一个Vue实例,因此它在定义时也会接收:data、methods、生命周期函数等。不同的是组件不会与页面的元素绑定,否则就无法复用了,因此没有el属性。但是组件渲染需要html模板,所以增加了template属性,值就是HTML模板data必须是一个函数,不再是一个对象。全局组件全局组件的概念组件在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中。使用方式为<组件名></组件名>全局组件注册方式Vue.component('组.原创 2020-09-15 20:45:18 · 1235 阅读 · 0 评论 -
vue-cli3 如何打包成zip压缩文件
前言目前在我司,采用前后分离的方式开发,这就会面临一个问题。那就是部署到服务器时如何部署?我们之前的方式是:执行打包命令生成文件夹-> 将文件压缩成zip -> 将zip上传至服务器 ->解压缩 -> 重启服务。在测试阶段每天都要回归bug,所以每天都要重复执行上述操作。有没有更自动化一些的方式来实现呢?就有了自动化部署,但我在研究自动化部署前,其实我是想在打包的时候自动生成zip文件,然后本地的脚本读取zip并上传至服务器,还有一种思路就是上传脚本可以进行打包压缩zip等。因为原创 2020-08-06 15:10:32 · 3123 阅读 · 0 评论 -
vue-router 的使用与基础篇解析
开篇源码仓库为:https://gitee.com/wx_142da4773a/vue-router-demo.git基础篇起步可以自己创建项目也可以从我的gitee上拉取代码进行练习~我采用了vue create 来创建项目并选择了router特性。选择过程会询问以下问题vue create vue-router-demo 创建一个vue项目请选择预置Please pick a preset: (Use arrow keys)default (babel, eslint)Manua原创 2020-07-23 18:48:38 · 1602 阅读 · 0 评论 -
vue+axios 下载二进制流文件及兼容MacOS问题
vue项目中需要实现下载文件,后端不是给到文件地址,而是返回二进制文件流。相关知识:后端响应给我们二进制流文件,我们需要拿到相关信息并创建一个a标签并实现click,然后给下载的文件起个名字。给下载文件起名字有两种方式:(1)固定值+时间戳(一般都加上时间戳)(2)后端将文件名放到response的headers中返回,我们取值当做文件名。我们此次需求为第二种,名称后端定。后端...原创 2020-03-16 23:11:49 · 477 阅读 · 0 评论 -
element-ui upload组件 实现多文件上传
需求:我司要求实现多文件上传,且要求使用formData传递参数。环境:vue+element-ui+axios实现:1. 使用element-ui upload组件搭建上传文件页面,页面示例如下:代码如下: <template> <div> <el-upload :multiple="true" class="uploa...原创 2019-12-04 14:19:52 · 6832 阅读 · 7 评论 -
webpack-dev-server 不是内部或外部命令,也不是可运行的程序 解决方案
我看了网上的 一些解决方案,说是webpack版本不对,但我按照提示操作后依然不行;要先确认是否安装了webpack-dev-server,如果没有安装,安装便可以解决;粗暴的解决方案是删除node_modules,重新npm install -g看看你的package.json中dependencies没有webpack-dev-server,如果没有,对应安装就可以了。执行...原创 2019-02-18 20:18:02 · 17932 阅读 · 3 评论 -
vue-cli-service不是内部或外部命令,也不是可运行的程序
遇到这个问题,很可能是网络原因导致vue-cli-service没有安装成功解决方案:删除node_modules,重新安装。建议淘宝镜像安装cnpm install原创 2019-02-01 10:57:32 · 26257 阅读 · 0 评论 -
vue.js 监控 视频播放
可以实现当用户暂停时执行我们想要的操作,比如记录用户的播放时长等Multi Sourcevar video1=document.getElementById("audio");var bofang=document.getElementById("bofang");var yinliang=document.get原创 2017-12-21 19:02:26 · 6313 阅读 · 0 评论 -
vue.js 在微信公众号内实现视频播放
环境:我司从事在线教育行业,想要将老师的讲课视频实现在线播放并监控用户播放时长关键词:vue.js、微信公众号、video视频播放1. 微信公众号内可以直接使用video进行视频播放2. 微信公众号内的视频无法自动播放,即使你加了autoplay="true",网友们说可以将视频上传至腾讯视频,我们服务器是阿里云所以没尝试3. ios手机中的播放可以不全屏播放,但是安卓手机点击播放原创 2017-12-21 18:59:46 · 9846 阅读 · 0 评论 -
vue下拉加载插件 之vue-infinite-loading
假设你的项目已经可以正常运行(1) 安装淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org (安装插件有时需要翻墙,为了避免这种情况我直接安装了淘宝镜像 ) (2) 安装插件 cnpm install --save vue-infinite-loading(3) 在需要的页面中引入vue-in原创 2017-11-30 16:32:13 · 2872 阅读 · 0 评论 -
vue中使用轮播图 vue-awesome-swiper
1. 首先安装 npm install vue-awesome-swiper --save 若是提示网络错误可能被和谐了,可以使用npm镜像。若已经是可以省略di2步2. 设置为国内镜像 npm configset registry https://registry.npm.taobao.org --global 3. 在main.js中引入import Vue原创 2017-10-24 15:26:24 · 690 阅读 · 0 评论