Vue
文章平均质量分 72
vue基础、总结
学学学无止境
热爱技术与生活。
展开
-
Hybrid App(原生+H5)开发
国内推出的JavaScript bridge跨平台混合开发框架官方提供了Android/ios版本,真正实现跨平台DSBridge支持同步及异步调用(DSbridge是唯一一个支持同步调用的javascript bridge)无需iFrame,性能好Github地址混合开发的一个主要流程:1.根据需求规划,哪些业务是H5负责,哪些是原生端负责2.定制一份约束双端的协议以用来对应方法的一一对应性(什么方法做什么事,参数、方法名、同步异步)原创 2023-11-04 22:24:51 · 2212 阅读 · 0 评论 -
Vue+Vant封装通用模态框单选框组件
title:标题showList:展示列表的数据actionVal:当前列表数据中被选中的值dialogType:弹框的类型(0-列表 文字 图标;1-列表 文字 radio;2-自动以内容)onlyCancel:是否只显示取消按钮,true只显示取消按钮,false:既显示取消按钮,又显示确定按钮。因为有些是需要点击单选框某项之后直接关闭模态框触发回传事件,有些是需要点击确定按钮再触发,所以这里做了一个区分。原创 2023-04-22 22:00:32 · 3154 阅读 · 1 评论 -
从Vue2到Vue3,Vue3变了什么?
1 setup函数1.1 参数 setup(props,context)• props:父组件传递过来的属性• context:SetupContext,即是setup函数的上下文1.1.1 参数1 props如果想在setup函数中使用父组件传递过来的props,则是通过props这个参数获得。在Vue2中我们是可以同个this.props的形式获取props,但是在Vue3之后setup函数中不允许使用this,当然还有一个注意点是,你再setup函数接收父组件传递的props参数,但是在se原创 2023-01-07 17:50:47 · 1018 阅读 · 0 评论 -
Vue+iview将表格table以excel文件导出的几种方式
前言在日常工作中,若是经常跟后台管理系统打交道的朋友想必对导出excel表格这种需求肯定很熟悉吧。不过我也问了身边的一些岗位为后端工程师的朋友,他们说在公司的话一般导出excel表格的工作一般由后端来做,前端只需要调用接口即可。我的话,由前端导出或者后端导出的两种方式我都有做过,以此想记录一下,总结一下我是如何针对不同的方式将表格数据以excel的格式导出的。同时呢,若文章中有不足的地方,也欢迎大家的指正,相互学习~后端导出如果你在工作中,导出excel表格这个工作主要放在后端的话,那么就会比较简单原创 2022-11-26 17:31:09 · 5685 阅读 · 0 评论 -
Vue中使用v-if多次切换相同模板问题
问题描述下面是使用两个相同结构的表单来记录不同角色的登录信息,这里首先使用了v-if进行切换,当条件为true的时候显示第一个表单,当条件为false的时候显示第二个表单,但是这也就暴露除了问题所在。我在第一个表单进行操作的时候,填入错误的信息的时候,这时候表单会出现校验不通过的错误提示吗,而我切换到第二个表单的时候,却发现第一个表单的错误提示自上而下的出现在我没有操作过的第二个表单上。原创 2022-11-20 19:00:49 · 965 阅读 · 0 评论 -
一文搞懂《前后端动态路由权限》--后台控制篇
前言 本文主要针对后台管理系统的权限问题,即不同权限对应着不同的路由,同时侧边栏的路由也需要根据权限的不同异步生成。我们知道,权限那肯定是对应用户的,那么就会涉及到用户登录模块,所以这里也简单说一下实现登录的和权限验证的思路。登录:当用户填写完账号和密码后向服务器验证是否正确,验证通过后服务端会返回一个token,拿到token之后,前端则会将token保存到本地并且保存到Vuex中(持久化,防止刷新丢失;另外你也可以保存到cookie中,用于记住用户的登录状态),接着前端会根据toke原创 2022-11-20 16:58:18 · 1685 阅读 · 0 评论 -
冒泡事件在Vue中的应用
什么是事件冒泡?一想到“冒泡”这两个词会想到什么?想必然,那就是气泡自下而上的从水底往上生的场景,但是我们也知道,水在往上升的过程中,也会经历不同的高度。由此场景,那么想必然,冒泡的原理就可以很轻易的被理解啦。我们知道,我们平时缩写的所看到的页面,都是由文档流即DOM树组成的,那么当我们在一个时间出发某个时间的时候,这个事件就会像这个气泡一样,从DOM树的底层,逐步向上传递,一直到DOM的根节点。当然,这事件冒泡的过程中,需要注意的一个点事,只有子元素和父级元素都有绑定原创 2022-11-19 13:50:23 · 3719 阅读 · 0 评论 -
关于Vue与React的一些对比与总结(中)
在上篇文章中已经将Vue和React中的背景、核心思想、组织形式、数据管理(props、data VS state)、组件数据交互、class与style、生命周期、事件处理进行了对比与总结,那么这篇文章主要是对比总结Vue中与react中的条件渲染(v-if VS &&)、是否显示(v-show VS style+class)、列表渲染(v-for vs map)、计算属性(computed vs useMemo+useCallback)、watch vs render、ref、表单(v-...转载 2022-08-30 11:41:43 · 757 阅读 · 0 评论 -
Vue+iView中在table表格中使用render函数嵌入input,实现双向数据绑定
最主要的思想:修改input的值之后,修改原本tableList中该row下shelveNumber数据,后面手动勾选的时候(勾选的也是tableList的数据),然后根据table中的@on-selection-change事件,将这个勾选项push到selectList中(用来保存需要回显的数据)...原创 2022-08-02 15:14:19 · 4212 阅读 · 0 评论 -
Vue组件封装以及父子组件的通信
这里举例一个简单的场景,在多个父组件中有个初始化密码的按钮,需要每次初始化之后弹出结果,成功时弹出初始化成功,并附有账号和密码,且可复制,初始化失败的是弹出错误提示“操作失败”,下面则封装这个初始化这个结果弹框提示:...原创 2022-07-10 15:21:10 · 627 阅读 · 0 评论 -
axios请求中以params或body形式传递参数的区别
axios请求中以params或body形式传递参数的区别原创 2022-06-29 22:25:34 · 11777 阅读 · 1 评论 -
Http请求中的Content-Type
前阵子公司接回了一个旧的项目,刚开始的时候没有注意看前端设置的content-type,然后与后端同事进行接口联调的时候就,有时候发现数据就是对不上,后面看了一下代码中的axios请求相关设置,才发现是自己走坑了!主要是在请求拦截和响应拦截这块的处理,请求拦截这块是设置了默认的请求content-type是使用application/x-www-form-urlencoded...原创 2022-06-26 14:42:28 · 5172 阅读 · 0 评论 -
代码优化策略【持续更新】
1.前端文件下载1)a标签的download在a标签中 href属性表示的是你存储的文件路径,download属性表示的是你下载的时候该文件的命名<a href="example.jpg" download>点击下载</a><a href="example.jpg" download="test">点击下载</a> // 指定文件名// 检测浏览器是否支持download属性const isSupport = 'download' in原创 2022-05-19 21:16:21 · 2443 阅读 · 0 评论 -
Vue中.env|.env.development|.env.production文件说明
0.介绍模式是Vue CLI项目中一个重要的概念,默认情况下,一个Vue CLI项目有三种模式:developemt 模式用于vue-cli-service serve test 模式用于vue-cli-service test:unit production 模式用于vue-cli-service build 和vue-cli-service test:e2e当运行vue-cli-service命令时,所有的环境变量都从对应的环境文件中载入。如果文件内部不包含NODE_ENV变量,它的值取决原创 2022-04-17 17:26:52 · 34489 阅读 · 8 评论 -
Vue+element-ui后台管理系统的插槽功能随笔总结(2)
这里主要举例用户管理下的对于用户的状态以及操作快的插槽功能,其他的便是大同小异。使用template便可以使用插槽,只要你在template中使用slot-scope="scope"便可以得到这一列的属性的所有数据,在实际使用的时候,你可以在控制套输出scope看看有什么属性你是可以用到的,便可以通过scope.row去获取。...原创 2021-12-26 16:57:25 · 481 阅读 · 0 评论 -
Vue+element-ui后台管理系统表单实现商品添加随笔总结(1)
0.话不多说,先上效果图跳转 当点击添加商品的时候跳转到'add'路由页面,所有商品信息的操作均在‘goods’路由页面中进行。2.add路由页面3.tabs切换效果其中添加商品的页面由多个部分组分,每二个部分之间的切换主要由tabs来切换4.整体结构1. 具体实现1.1 <el-steps>主要是用来控制每个tabs的流程1.2 &...原创 2021-12-26 16:43:52 · 1815 阅读 · 0 评论 -
Vue中的axios拦截器
1.请求拦截1.1 介绍:拦截器包括请求拦截器与相应拦截器,可以在请求发送前或者相应后进行拦截处理。在axios对象上有一个interceptors属性,该属性又有request和response两个属性。axios.interceptors.request和axios.interceptors.response对象提供了use方法,分类设置请求拦截器与响应拦截器。 use()方法支持两个参数,第一个参数是类似于Promise的resolve函数,第二个参数是类似于...原创 2021-12-17 23:33:59 · 1656 阅读 · 0 评论 -
Vue中使用全局过滤器
1.自定义全局时间过滤器1.1 首先在mian.js入口文件中定义全局过滤器如下(全局定义,则任何一个组件可以使用)//定义时间格式化的过滤器,用于将毫秒转换为标准格式的时间Vue.filter('dateFormat', function (originValue) { //将需要过滤的日期转成日期格式 const dt = new Date(originValue) //获取年份 const y = dt.getFullYear() //获取月份,不足两位的前面将以0补齐原创 2021-12-09 22:13:55 · 2351 阅读 · 0 评论 -
Vue后台管理系统之实现分页功能
效果图:功能描述:显示数据的总数目 可选择每天的显示条数 点击页码跳转到指定页数 输入页码可跳转到指定页1.功能实现1.1 结构 <!-- 分页 --> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.原创 2021-12-05 11:13:57 · 3985 阅读 · 2 评论 -
vue中使用vue-table-with-tree-grid实现商品的分类显示(table-tree)
1.下载插件1.1可以通过vue ui在项目管理器中下载项目,具体流程如下:点击查看详情可以查看这个插件的相关使用以及demo链接:https://github.com/MisterTaki/vue-table-with-tree-grid2.使用插件根据官方的介绍,聚义有两种使用方式,这里采用的第二种2.1 引入:import TreeTable from 'vue-table-with-tree-grid'Vue.component('tree-ta..原创 2021-12-05 09:56:39 · 1368 阅读 · 0 评论 -
Vue中的路由守卫
理解:路由守卫主要时用来根据路由进行跳转的时候进行的一系列操作‘1. 全局前置守卫顾名思义,前置守卫主要是在你进行路由跳转之前根据你的状态去 进行一系列操作(全局前置是为在路由初始化以及跳转之前都会触发)你可以使用router.beforeEach注册一个全局前置守卫(Each:每个,即在任意一个路由跳转的时候都会触发)每个守卫方法接收三个参数:to:Route:即将进入目标的路由对象 from:Route:当前导航正要离开的路由 next:function:一定要调用该方法...原创 2021-12-01 11:36:32 · 4519 阅读 · 1 评论 -
Vue基础知识的加深理解
1. 计算属性与方法的区别在vue模板渲染中,当为某个元素绑定方法时,那么模板每次渲染的时候,这个方法都会被执行一次,因为method没有缓存。不同的是,computed计算属性具缓存功能,即当你为元素绑定的是计算属性的时候,由于计算属性具有缓存功能,因此模板每次渲染的时候,不会重新去执行这个计算属性,而是找到这个计算属性的缓存之,当且计算属性依赖的属性发生变化的时候,才会重新去执行这个属性。1.1 计算属性的完整写法每一个计算属性都具有两个方法,get()与se...原创 2021-11-29 21:55:24 · 2768 阅读 · 8 评论 -
Vue中的路由
1.相关理解1.1 vue-router的理解 vue的一个插件库,专门用来实现SPA应用1.2 对SPA应用的理解但也Web应用 整个应用只有一个完整的页面 点击页面中的导航链接不会刷新页面(而类似于a标签则会默认刷新页面),指挥做页面的局部更新 数据需要通过ajax请求来获取1.3 路由的理解路由理解:一个路由(route)就是一组映射关系(key-value),多个路由需要看路由器(router)进行管理 前端路由:key是路径,value是路由组件基...原创 2021-11-29 21:50:21 · 2448 阅读 · 0 评论 -
node开启简单服务部署前端页面
1. 具体步骤如下1.1 新建文件夹:demo1.2 在这个文件夹根目录执行命令进行项目的初始化:npm init(只有这样才可以使用express),然后ile名字之后一直按回车键即可:1.3 编写相关代码(在项目根目录新建一个server.js的文件)const express = require('express')const app = express()app.use(express.static(__dirname + '/static'))app.get('/per原创 2021-11-29 21:11:27 · 2095 阅读 · 0 评论 -
uni-app中组件之间的通信
1.组件创建2.组件的生命周期3.组件之间的通信3.1 父传子3.2 子组件传递给父组件原创 2021-11-06 16:08:45 · 368 阅读 · 0 评论 -
uni-app中表单修改用户信息
总结部分:其中主要包括两个部分,一是用户信息的存储,二是用户信息的更改 对于用户的信息,因为这是在整个App中都是需要用到的,因此一般讲用户的信息保存在本地缓存中。每次需要用户信息的时候,只需要判断本地缓存中是否存在即可。 对于用户信息的保存,一般是在你登录的时候,后台便将用户信息一同返回,此时你变可以将信息与用户token值一同保存。但是如果后台没有给你返回,一般也会有个人信息的请求,这时候你便可以判断用户是否登录了,如果登录了便请求个人信息的接口,根据接口返回的数据(即用户信息保存) 通常需要原创 2021-11-06 15:43:34 · 3447 阅读 · 0 评论 -
vue循环列表中绑定:key的作用
首先按官网介绍的,可以主要用在Vue的虚拟Dom算法,在新旧节点对比时辨识VNodes。使用key时,它会基于key的变化重新排列元素顺序,并且会移除key不存在的元素。有相同父元素的子元素必须有独特的key,重复的key会造成渲染错误。vue中循环列表时,绑定:key的值往往有两种方式,一是将循环列表的索引值index作为key,而是根据返回数据中的唯一标识作为key。不管以什么方式绑定key,key的值在列表中必须是唯一的,可以使用index的原...原创 2021-09-22 10:00:28 · 3023 阅读 · 1 评论 -
Vue的Object.defineProperty中数据代理
描述:Object.definePropert()方法会直接在一个对象上定义一个新的属性,或者修改一个对象的现有属性,并返回此对象详细说明可以查看官方文档:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects1.语法Object.defineProperty(obj,prop,descriptor)参数obj 要定义属性的对象 prop 要定义或修改的属性的名称或者Symb..原创 2021-09-05 11:43:33 · 279 阅读 · 1 评论 -
浅谈Vue种的$nextTick机制
浅谈Vue种的$nextTick机制nextTick出现的前提因为在Vue种,其数据的变化和页面的渲染是异步的,即是我们在事件种修改了数据时,视图并不会立即更新,而是等在同一个事件循环(这里就涉及到了事件的循环机制)的所有数据都变化后,再执行视图的更新.官方介绍Vue.nextTick([callback,context])参数{Function} [callback]{Object} [contect]用法在下次DOM更新循环结束之后执行回调,在修改数据之后立即使用这个方法,转载 2021-01-10 09:55:12 · 533 阅读 · 0 评论 -
如何在vue项目中引入echarts
问题:我在vue项目中使用npm install echarts --save下载echarts时,然后导入的时候发现一致提示如下错误:后来在网上找发现时版本问题,当我使用上述命令下载时,下载的echarts版本时5.0的后来我参考该博主的方法:https://blog.csdn.net/weixin_44874618/article/details/110647652重新安装就可一正常使用的效果如下:具体代码如下:1.在main.js中全局引入2.随便创建一个要显示echarts图的原创 2020-12-11 23:32:34 · 5191 阅读 · 1 评论 -
vue中使用发布订阅的方式进行vue组件之间的通信
说明:绑定事件监听—订阅消息pubsub.subscrib(名称,参数)触发事件—发布消息-----pubsub.publish(名称,参数)1.安装pubsub-jsnpm install --save pubsub-js2.以实例说明pubsub的用法在上图中,我们头部header需要向后台发送关键字,后台根据得到的关键字进行相应的操作,返回项目需要的数据,main组件就是需要利用返回后台的数据据,进行页面的渲染(这要明白,发送ajax请求必然是在main组件中,header组件的作用原创 2020-12-10 15:42:55 · 492 阅读 · 0 评论 -
在vue中使用axios访问API
axios是一个基于Promise的,发送http请求的工具库一、特点:从浏览器中创建 XMLHttpRequests(和原生的Ajax相同都是基于XMLHttpRequest()对象的二次封装)从 node.js 创建 http 请求(可以在Node环境中配合Express()使用实现异步的数据交互)支持 Promise API(Axios是基于Promise()对象进行的二次封装,完美支持Promise()对象的所有Api是让异步的数据交互变得更加简单,方便).拦截请求和响应1)拦截请求:原创 2020-12-10 15:05:10 · 1125 阅读 · 0 评论 -
vue-cli脚手架+bootstrap实现响应式的留言小demo总结
总结:1.使用bootstrap实现响应式布局2.如何在vue项目中使用bootstrap:https://blog.csdn.net/weixin_46872121/article/details/1109337423.实现父组组件、爷孙隔代直接之间组件通信4.实现模块化思想(拆分组件)响应式布局:...原创 2020-12-09 22:57:33 · 339 阅读 · 0 评论 -
如何在vue中引入bootstrap
vue如何引入bootstrap最近在玩全栈,自然少不了vue的使用。使用vue-cli生成的项目想引入bootstrap,需要先安装相应的npm包,然后在代码中显示引入。1.安装依赖包: cnpm install bootstrap --save-dev cnpm install jquery --save-dev cnpm install popper.js --save-dev2.将bootstrap全局引入。在项目中根目录西main.js中添加如下代码:import 'bo转载 2020-12-09 20:16:47 · 7726 阅读 · 1 评论 -
前端的鉴权问题以及项目api请求模块的封装
1.前端的鉴权问题分析:考察前后端分析的鉴权思路解析:1.首先要明白什么时前端鉴权?在传统色的项目中都是后端鉴权,然后通过进行拦截,跳转,对应操作。而现实时前后端分离项目,也就是前端项目和后端服务器进行了剥离,因此后端无法通过session来存储你任意一个前端项目域名下的身份信息,所以jwt鉴权问题就应运而生了;换句话说,后端不再提供会话的身份存储,而是通过一个鉴权的接口将用户的身份。登录时间,请求端口,协议…等信息组装成一个加密的串返回给前端,前端拿到了这个串,就可以认为自己登录成功。这个加原创 2020-12-05 22:15:37 · 605 阅读 · 0 评论 -
vue中如何解决页面刷新之后vuex中的数据消失问题以及vue-router如何传递参数
1.vue中如何解决页面刷新之后vuex中的数据消失问题分析:考察的是如何将vuex数据进行本地持久化解析:-由于vuex中的数据是存于内存中的,页面刷新重置会导致数据归零,也就是所谓的消失。将数据本地持久化可以解决这个问题数据本地持久化所用到的技术是本地存储sessionStorage或者localStorage两者之间的差异是存储期限不一样,sessionStorage当关闭浏览器时数据也随之小时。而localStorage时永久保存在本地实施方案:state的持久化,也就是分别需要原创 2020-12-05 21:16:04 · 558 阅读 · 1 评论 -
vue中keep-alive的缓存
1.没有使用缓存的时候,每一次路由之间的跳转,组件都会被销毁然后重新创建,因此也会重新请求数据,因此可以使用keep-alive缓存机制(实现如用户点击某个列表项跳到其他路由组件时,返回还是上次点击的地方),从而优化了性能。2.当然,不是所有组件都需要进行缓存处理,因此可以在配置相应的路由时,为其加上meta属性,属性类型为boolean,用于判断是否需要缓存总:(使用包裹需要缓存的数据,不需要缓存的则不包裹)/*当该路由需要缓存时*/<keep-alive> <ro原创 2020-12-05 20:48:01 · 181 阅读 · 0 评论 -
vue中的watch如何监听和深度监听某个对象
watch的基本用法:export default { data(){ return { name:'张三' } }, watch:{ /*name函数是对应的那个数据名字*/ name(newValue,oldValue){ } }说明:有个原则是,监听谁,那么监听的函数名就是谁的名字,函数中接收两个参数,第一个参数是最新变化的值,第二个参数是上一次变化的值;除了可以监听data中的数据,也可以监听计算属性,或者一个函数的计算杰哥以上是简单原创 2020-12-05 20:37:18 · 653 阅读 · 0 评论 -
vue中配置proxy跨域代理
说明:配置代理,这个代理实质是虚拟的服务器,当客户端发送请求给服务端时,代理会拦截下来,进行处理,然后再转向服务器服务器与服务器之间的请求不会出现跨域的问题。然后服务器接收到请求后,将数据返回代理,代理再转送给客户端;因此,跨域问题解决!...原创 2020-12-05 19:12:45 · 1517 阅读 · 0 评论 -
vuex的简单使用
3.4.引入模块化modules管理全局数据4.原创 2020-12-03 23:56:11 · 79 阅读 · 0 评论