vue
文章平均质量分 90
我不喜欢打代码
一名前端程序员。。。
展开
-
vue服务端渲染(vue-ssr)的理解(仅限个人理解,不供参考)
开篇说明:文章资料内容参考vue-ssrssr与csr什么是服务端渲染1. 什么是服务端渲染(ssr)?SSR是Server Side Render简称;页面上的内容是通过服务端渲染生成的,浏览器直接显示服务端返回的html。服务端渲染是一种方式,不限定语言,不管是以前的jsp,php,asp.net还是现在的node.js,都可以做服务端渲染的事情。服务端渲染把一部分的视图业务逻辑交给服务端,这让服务端承受压力。2. 什么是浏览器端渲染 (CSR)?CSR是Client Side Ren原创 2021-06-18 10:44:52 · 1470 阅读 · 0 评论 -
vue中的nextTick实现局部刷新(一)
vue中的nextTick今天在开发过程中我又遇到了很神奇的东西在vue中使用nextTick没有效果促使我去查了一下这个api的用法才发现我一直都在"乱用"和"滥用"这个nextTick我们先来看一下vue文档中对nextTick的解析这里首先我们第一个看明白的是vue更新DOM时,是异步的。可以看一下我下面的这个局部div刷新的小例子<div v-if="isAlive" >{{msg}}</div>data(){ return:{ msg:"内容",原创 2020-12-09 20:24:27 · 895 阅读 · 0 评论 -
vue接入海康萤石云npm包,开发视频模块
vue接入海康萤石云npm包,开发视频模块因为公司项目的需要,需要接入海康萤石云平台的npm包来开发公司的视频模块我们目前做的是公司的视频直播模块ui设计采用的是公司的视频窗口ui好了,我们先看一下这个npm包的md文档萤石云GitHub安装和引入方式可以参考里面的,注意引用方式不同,调用的类也不同这里我们采用npm引入的方式来调用与文档里面的用法一致我们需要先创建一个dom节点注意,如果初始化视频时没有设置长度和宽度那么就会铺满这个dom元素,所以这个dom元素一定要设置长度和宽度原创 2020-12-05 16:30:44 · 1715 阅读 · 0 评论 -
uni-app | 封装一个二级国内城市选择器(citypicker)
uni-app | 封装一个二级国内城市选择器(citypicker)在实际uniapp,微信小程序,h5的项目中,经常用到picker官方的定义:从底部弹起的滚动选择器。支持五种选择器,通过mode来区分,分别是普通选择器,多列选择器,时间选择器,日期选择器,省市区选择器,默认是普通选择器。一共有5种模式,有满足用户需求的省市区选择器。再看看该模式的文档我们可以看到兼容性来说,还是不太好。而且只能是三级,与实际需求不太符合,那这样我们就来自己基于原生的picker封装一个二级citypicke原创 2020-12-01 13:24:05 · 1611 阅读 · 0 评论 -
vue实际项目接入websocket
在实际vue项目中,我有一个接入服务端websocket的需求调试了一段时间终于成功了,记录一下1.配置ws socket() { //socket()连接方法 let wssString = window.location.href.indexOf("/a") === -1 ? "wss:测试地址/ws" : "wss:正式地址/ws" let ws = new WebSocket(wssString); this.ws = Stomp.over(ws);原创 2020-11-18 11:08:25 · 470 阅读 · 0 评论 -
vue使用xlsx包解析xlsx表格文件成json格式
根据实际项目需求,需要前端去解析Excel文件成json格式传给后端这时候我就想到了xlsx包,有直接转化为json的方法说干就干1.安装和引入相关包(jquery好像是xlsx需要安装的依赖) "jquery": "^3.5.1", "xlsx": "^0.16.8"然后npm install一下2.在vue文件中引入import XLSX from "xlsx"; 3.准备一个解析的excel文件,开始前端接入 <div class="imp原创 2020-11-18 10:17:23 · 1085 阅读 · 0 评论 -
封装axios请求函数
在实际的项目开发中,一定程度上的封装axios,管理请求的api有助于精简项目的代码,统一管理api,便于持续性开发。接下来就看看我在我自己的小项目中是如何封装的吧(可能会用到部分伪代码)1.安装axios(这一步就略过咯)2.在src/util/axios.js新建了axios.js3.在axios.js引入 import { cookieData } from "@/util/local"; import axios from "axios";在main.js引入 impor原创 2020-11-18 09:34:28 · 507 阅读 · 1 评论 -
封装cookie、sessionStorage、localStorage公共函数(vue)
封装cookie、sessionStorage、localStorage公共函数(vue)通常一个前端项目,我们最常用到的三个浏览器储存有三种:cookie、sessionStorage、localStorage这三种各有各的优势在项目快速搭建的过程中,我通常会写一个公共js文件,方便调用他们// local操作const localData = function(method, name, obj) { /* * 参数说明: * method:get获取,set存入或覆盖,c原创 2020-11-03 11:00:41 · 418 阅读 · 0 评论 -
Vue实现路由懒加载
Vue路由懒加载这是个大部分Vue搭建的项目常用的写法可以提高Vue首屏加载的速度虽然已经学会,但是还是想记录一下避免以后可能少用Vue的时候我还能在这里温故知新import Vue from 'vue'import Router from 'vue-router'import login from '@/view/login/login' // 正常的import引入import error from '@/view/error.vue'import error2 from '@/vie原创 2020-11-03 10:18:03 · 120 阅读 · 0 评论 -
Vue打包app实现检查更新功能
Vue打包app实现检查更新功能最近接收到一个需求,就是把移动h5的代码打包成安卓app这个确实很符合这个时代“一套代码,多处编译”的趋势而且混生App发展到这个时期也已经可以做到很多原生app所能做到的事情我的项目是使用Vue搭建的,我选择的打包方式是使用HbuilderX打包而这次的需求是app的检查更新功能(未上架各类市场)开始这个需求之前,我构思了一下思路,大概如下1.app会有一个版本号,可以根据版本号来判定是否更新2.可以让后端编写接口,返回当前发布版本号(需要更新的版本号),原创 2020-11-03 09:40:19 · 1140 阅读 · 0 评论 -
Vue.js下使用vue-full-calendar的那些坑(二)
Vue.js下使用vue-full-calendar的那些坑(二)上次提到在开发日程模块时,本小白用到了vue-full-calendar组件,但是这个组件并没有提供很多原版才有的api,这就需要我们自己去发掘了下面是vue-full-calendar所提供的鼠标点击事件和渲染函数//event点击事件@event-selected="eventClick"// day的点击事件@da...原创 2019-11-08 10:28:06 · 3356 阅读 · 2 评论 -
Vue.js下使用vue-full-calendar的那些坑(一)
Vue.js下使用vue-full-calendar的那些坑(一)近期本实习生接到一个任务就是用大日历组件开发一个日程管理的功能,刚刚接到这个任务时我立马想到了full-calendar的日历组件,因为它接口多,功能强大,但是在vue下使用该full-calendar就得用vue版本的vue-full-calendar,这就导致了一些问题,就是vue-full-calendar没有很详细的api...原创 2019-11-08 09:51:42 · 7353 阅读 · 22 评论 -
vue项目中引入jquery和jqueryui
vue项目中引入jquery和jqueryui之前一直不喜欢在vue里面引入jq的东西,因为和vue的理念是背道而驰的,但是后来因为项目需求难以解决,不得不引入入jquery去解决,才感叹jq还是很强大的啊真香嘻嘻我的项目是基于vue 2.0的。3.0的可能会有些不同,但是应该问题不大了首先,我们得在package.json文件中的dependencies添加 "jquery": ...原创 2019-11-08 11:41:10 · 1950 阅读 · 0 评论