分类：vue

2021
05-28

Vue3状态管理的使用详解

背景随着Vue3的逐步应用，对状态管理的需求越来越多。起初是基于Vuex4进行状态管理的，但是Vuex4也暴露了一些问题。从个人角度来说，Vuex4类似于过渡期产品，对TypeScript的支持性并不完整。如果使用TypeScript编写组件，需要遵循一定步骤后，才可以正确进行类型推断，并且对modules的使用上也并不友好。Vuex核心贡献者KiaKing也表示Vuex5已经在计划中，并且能提供完整的TypeScript支持，那么在Vuex5面世之前，或者直接"舍弃"Vuex... 继续阅读 >
2021
05-25

vue-router钩子函数实现路由守卫

概述何为路由守卫？路由守卫有点类似于ajax的请求拦截器，就是请求发送之前先给你拦截住做一些事情之后再去发送请求，同样这里的路由守卫意思差不多；简单理解为就是你在进路由之前，首先把你拦住，对你进行检查；这是不是有点中学门口的保安？进来之前拦住，有学生证就进，没有学生证就不让进；当然，路由守卫不仅仅只是在你进入之前拦住你，还有其他的钩子函数进行其他操作；vue-router一共给我们提供了三大类钩子函数来实现路由... 继续阅读 >
2021
05-25

谈谈Vue中的nextTick

当数据发生变化之后，DOM视图并不会立即更新，如果我们在发生变化之后立马去获取某个节点或者某个节点的值，很有可能结果就是undefined；因为Vue实现响应式并不是数据发生变化之后DOM立即变化，而是按一定的策略进行DOM的更新；来看一个小demo：App.vue<template><divid="app"><divref="message">{{msg}}</div><divv-if="msg1">{{msg1}}</div><button@click="changeMsg">ChangetheMessage</button... 继续阅读 >
2021
05-25

Vue路由vue-router详细讲解指南

中文文档：https://router.vuejs.org/zh/VueRouter是Vue.js官方的路由管理器。它和Vue.js的核心深度集成，让构建单页面应用变得易如反掌。路由实际上就是可以理解为指向，就是我在页面上点击一个按钮需要跳转到对应的页面，这就是路由跳转；首先我们来学习三个单词（route，routes，router）：route：首先它是个单数，译为路由，即我们可以理解为单个路由或者某一个路由；routes：它是个复数，表示多个的集合才能为复... 继续阅读 >
2021
05-25

Vue中的父子组件通讯以及使用sync同步父子组件数据

前言父子组件通讯，可分为两种情况：1.父组件向子组件中传递数据2.子组件向父组件中传递数据一般情况下，1中情况可通过props解决数据传递的问题，这里就不多赘述了。子组件向父组件中传递数据主要谈谈2中情景的实现，有三种方式：一.通过props，父组件向子组件中传递数据和改变数据的函数，通过在子组件中调用父组件传过来的函数，达到更新父组件数据（向父组件传递数据）的作用（子组件中需要有相应的响应事件）二.通过在子... 继续阅读 >
2021
05-25

Vue中的父子组件通讯以及使用sync同步父子组件数据

前言父子组件通讯，可分为两种情况：1.父组件向子组件中传递数据2.子组件向父组件中传递数据一般情况下，1中情况可通过props解决数据传递的问题，这里就不多赘述了。子组件向父组件中传递数据主要谈谈2中情景的实现，有三种方式：一.通过props，父组件向子组件中传递数据和改变数据的函数，通过在子组件中调用父组件传过来的函数，达到更新父组件数据（向父组件传递数据）的作用（子组件中需要有相应的响应事件）二.通过在子... 继续阅读 >
2021
05-25

vue2.x 从vue.config.js配置到项目优化

vue2.x 从vue.config.js配置到项目优化 vue.config.js是一个可选的配置文件，如果项目的(和package.json同级的)根目录中存在这个文件，那么它会被@vue/cli-service自动加载。你也可以使用package.json中的vue字段，但是注意这种写法需要你严格遵照JSON的格式来写。前言在实际项目中优化也是经常需要做的事情，特别在中大型项目中降低打包体积大小，提高首屏加载时间是必不可少的，同时在面试中也是一个高频问题。本片文章我将从vue.config.js配置到项目优化... 继续阅读 >
2021
05-25

VUE的tab页面切换的四种方法

VUE的tab页面切换的四种方法 1.静态实现方法:效果图:<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>view的tab交互</title><linkrel="stylesheet"href="../css/demo.css"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"></head><body... 继续阅读 >
2021
05-25

如何启动一个Vue.js项目

一.Node.js与Vue1.1Node.jsNode.js是一个基于ChromeV8引擎的JavaScript运行环境。Node.js使用了一个事件驱动、非阻塞式I/O的模型。[Node是一个让JavaScript运行在服务端的开发平台，它让JavaScript成为与PHP、Python、Perl、Ruby等服务端语言平起平坐的脚本语言。发布于2009年5月，由RyanDahl开发，实质是对ChromeV8引擎进行了封装。Node对一些特殊用例进行优化，提供替代的API，使得V8在非浏览... 继续阅读 >
2021
05-23

Vue+Springboot实现接口签名的示例代码

1、实现思路接口签名目的是为了，确保请求参数不会被篡改，请求的数据是否已超时，数据是否重复提交等。接口签名示意图客户端提交请求时，将以下参数按照约定签名方式进行签名，随后将参数和签名一同提交服务端：1.请求头部分（header）appid：针对不同的调用方分配不同的appid。noce：请求的流水号，防止重复提交。timestamp：请求时间戳，验证请求是否已超时失效。2.数据部分Path：按照path中的参数将所有key=value进行拼接。Que... 继续阅读 >
2021
05-23

vue实现骨架屏的示例

骨架屏用途作为spa中路由切换的loading,结合组件的生命周期和ajax请求返回的时机来使用.（作为loading使用）。作为与用户联系最为密切的前端开发者，用户体验是最值得关注的问题。关于页面loading状态的展示，主流的主要有loading图和进度条两种。除此之外，越来越多的APP采用了“骨架屏”的方式去展示未加载内容，给予了用户焕然一新的体验。作为首屏渲染的优化Vue架构骨架屏思路大纲定义一个抽象组件，在抽... 继续阅读 >
2021
05-23

Vue nextTick的原理解析

使用过Vue的小伙伴们都知道，Vue里的nextTick可以获取到更新后的DOM,今天我就来讲解下nextTick里面究竟做了什么？开始讲解前，我们需要知道了解一个概念，那就是EventLoopEventLoopEventLoop翻译过来就是事件循环,一个EventLoop会包括一个或多个task队列，持续线程会从队列中取出最早进入队列的任务进行执行，被取出的任务就叫做macroTask(宏任务),每个macroTask都有一个任务源,每个macroTask处理完之后就从队列中取出下一... 继续阅读 >
2021
05-23

Vue自定义v-has指令,做按钮权限判断的步骤

应用场景以后台管理系统为例，每个用户所拥有的按钮权限不一样。管理员配置权限之后，用户登录时，从接口拿到按钮权限列表，然后根据后台数据判断显示哪些按钮。简单说一下，自定义指令Vue.js官网关于自定义指令的讲解cn.vuejs.org/v2/guide/cu…基础概念Vue除了核心功能默认内置的指令（v-model和v-show）还可以注册自定义指令。在Vue2.0中，代码复用和抽象的主要形式是组件。但有的情况下，仍需要对普通DOM元素进行底层操作，这... 继续阅读 >
2021
05-23

Vue自定义v-has指令,做按钮权限判断的步骤

应用场景以后台管理系统为例，每个用户所拥有的按钮权限不一样。管理员配置权限之后，用户登录时，从接口拿到按钮权限列表，然后根据后台数据判断显示哪些按钮。简单说一下，自定义指令Vue.js官网关于自定义指令的讲解cn.vuejs.org/v2/guide/cu…基础概念Vue除了核心功能默认内置的指令（v-model和v-show）还可以注册自定义指令。在Vue2.0中，代码复用和抽象的主要形式是组件。但有的情况下，仍需要对普通DOM元素进行底层操作，这... 继续阅读 >
2021
05-23

用vue设计一个数据采集器

场景在业务上现在有一个场景，当发生业务行为变化时，需要对各个模块的行为进行数据收集，数据用途可以用作回顾，也可以是例如监控这样的场景。核心问题说白了这个需求就是需要对各个模块状态变更进行记录，然后再格式化上传到服务端。解题思路有两种一种是状态监听，第二主动收集。状态监听状态监听优势快速实现利用状态管理和wacth的机制很快就知道不同模块的状态变更，然后就可以获取数据，再格式化数据，发送给服务端状态监听... 继续阅读 >
2021
05-23

SpringBoot+VUE实现前后端分离的实战记录

SpringBoot+VUE实现前后端分离的实战记录 一，前端VUE项目这里使用VUEUI创建一个VUE项目命令行输入vueui进入手动配置项目选中这三个点击下一步->点击创建项目用IDEA打开刚才创建的项目IDEA中的安装vue插件并重启IDEA控制台中输入vueaddaxios安装axios新建一个Show.vue在index,js的routes中配置它的路由编写Show,vue向后端请求数据并展示<template><div><table><tr><td>ID</td><td>姓名</td>... 继续阅读 >