Vue

Vue导航守卫使用教程详解

目录 守卫参数 守卫返回值 全局守卫 全局前置守卫 全局解析守卫 全局后置钩子 单个路由独享守卫 组件级守卫 完整的导航解析流程 总结 作用:通过跳转或取消的方式守卫导航 植入方式: 全局守卫 单个路由独享守卫 组件级守卫 守卫参数 to: 即将要进入的目标路由 fr »

Vue组件的通信方式详解

目录 组件间通信的概念 组件间通信解决了什么? 组件间通信的分类 组件间通信的方案 props传递数据 $emit 触发自定义事件 ref EventBus $parent 或 $root $attrs 与 $listeners provide 与 inject vuex 小结 组件 »

vue实现excel表格的导入导出的示例

目录 一、下载xlsx插件 二、通过element-ui组件的upload组件上传文件 三、把选择的Excel文件把文件内容转化为二进制 四、通过插件中的xlsx.read()读取二进制数据 五、通过xlsx.utils.sheet_to_json()把表格一中的数据转化为JSON格式 六、把读取 »

Vue处理循环数据流程示例精讲

以往我写前端页面的时候都是使用theamleaf模板引擎,模板引擎的原理其实就是服务端进行页面的渲染,这里需要说一下,渲染的意思实际上就是将相应的数据变成html标签,比如我们使用了 th:each 标签,那么在服务端,就会用for循环将数据装填成html代码。 那么我们也可以使用vue框架进行页 »

Vue使用lodash进行防抖节流的实现

目录 Lodash debounce throttle Lodash 在Vue中,可以通过使用Lodash库中提供的防抖和节流函数来有效地控制事件的触发次数,以提高页面性能。具体实现如下: 安装 Lodash 库 npm install --save lodash 导入 debou »

Vue分页查询怎么实现

我编写了一个简单的前端页面用来查询数据,页面一共有几个逻辑 具体的效果可以看下面的演示 下面就来看一下具体的实现步骤。 首先看一下vue的代码 <script type="text/javascript"> Vue.createApp({ da »

Vue结合高德地图实现HTML写自定义信息弹窗全过程

最近在写项目的时候有个需求就是根据点击地图上的点展示对应的信息,弹窗看着还挺花哨的。我在高德地图官网上还有各大平台找了如何自定义弹窗,可给出的大多数都是通过JS写HTML结构,我感觉这种不仅不好布局,而且可读性和维护性都不如直接写HTML好。于是我就在想,能不能在HTML里写这个弹窗呢? 答案是: »

Vue笔记

1. 邂逅Vuejs 1.1 简单认识一下Vuejs Vue是一个渐进式的框架,什么是渐进式呢? 渐进式意味着你可以将Vue作为应用的一部分嵌入其中,带来更丰富的交互体验 或者你希望将更多的业务逻辑使用Vue实现,那么Vue核心库以及其生态系统。 比如Core+Vue-router-Vuex,也可 »

lengyingmofeng 前端

vue项目中使用TDesign的方法

目录 前言: 一、使用vue-cli手脚架创建vue项目 二、配置vue及vue模板编译器版本 三、安装tdesign-vue和less 四、测试 常见错误 前言: 本文只介绍如何在vue项目中配置TDesign,不涉及vue项目的创建 tdesign-vue是TDesign 适配桌 »

一文带你上手Vue新的状态管理Pinia

目录 Pinia 和 Vuex Pinia 核心特性 Pinia 使用 访问 state getters 更新和 actions 支持 VueDevtools 模拟调用接口 跨模块修改数据 Vuex 作为一个老牌 Vue 状态管理库,大家都很熟悉了 Pinia 是 Vue.js 团 »

Vue2和Vue3中常用组件通信用法分享

目录 Vue3 组件通信方式 Vue3 通信使用写法 1. props 2. $emit 3. expose / ref 4. attrs 5. v-model 6. provide / inject 7. Vuex 8. mitt Vue2.x 组件通信方式 Vue2.x 通信使用写法 »

如何利用vue实现登陆界面及其跳转详解

1.做登录框 步骤: (1) 创建vue项目,使用vite方式创建;npm init vue@latest (2)项目结构:  src:代码书写位置; app.vue:根组件; main.js:将根组件与首页进行连接; index.html:首页; package-lock.jso »

Vue实现模糊查询filter()实例详解

需求:在输入框里输入内容,包含相关内容的值被筛选出来; 图示: 最初的代码: <body> <div id="box"> <input type="text" @input="handleInput()" v-model="myte »

一个前端大佬的十年回顾 | 漫画前端的前世今生

回到十年前,前端技术就像一名戴着厚重眼镜的书呆子,总是小心翼翼,被各种各样的浏览器兼容性问题欺负(就像在小学被欺负一样)。 作者:京东科技 胡骏 引言 岁月如梭,十载流年 前端技术,蓬勃向前 HTML,CSS,JavaScript 演绎出璀璨夺目的技术画卷 回到十年前,前端技术就像一名 »

Jcloud

GitHub Pulse 是什么?它是否能衡量 OpenTiny 开源项目的健康程度?

Pulse 是“脉搏”的意思,就像一个人要有脉搏才能算是一个活人,一个开源项目要有“脉搏”才能算是一个“活”的开源项目,这个单词非常形象地表示了开源项目的健康程度。脉搏是正常的,开源项目才是健康的。 Pulse 是“脉搏”的意思,就像一个人要有脉搏才能算是一个活人,一个开源项目要有“脉搏 »

kagol

JavaScript的三大前端框架Vue和Angular和React

目录 背景介绍 Angular React Vue 详细分析 Vue React Angular 再谈Vue和React的生态系统 Vue React 今天就来好好分析分析这三个框架。 背景介绍 Angular Angular 是 Google 在 2010 年发布的 »

vue中如何解决qs问题

这篇文章主要介绍“vue中如何解决qs问题”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“vue中如何解决qs问题”文章能帮助大家解决问题。 什么是查询字符串 查询字符串是一个包含在URL中的参数列表,用于将数据传递给Web应用 »

vue如何在组件里面注册组件

这篇文章主要介绍“vue如何在组件里面注册组件”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“vue如何在组件里面注册组件”文章能帮助大家解决问题。 在组件内部注册组件的方式,有两种方法:通过 components 属性注册和通 »