vue文章/教程

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,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 团 »

如何利用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 »

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 属性注册和通 »

Vue如何实现移动端日历

本篇内容介绍了“Vue如何实现移动端日历”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! 先看看UI给的设计图和,需求是有数据的日期做标记,可以查看某一周/某一月的数据,周数据不用自定义,就按照日历上的 »

手把手教你拿捏vue cale()计算函数使用

目录 前言 cale()是什么 基本使用 灵活使用 注意 兼容性 结尾 前言 最近项目中遇到calc()方法不生效问题,本着究其所以然的想法,彻底查了一下calc的方法及使用,还有为什么项目中使用不生效的问题,最后总结出此文,解决方法放在结尾了 cale()是什么 calc是英文 »

Vue实现移动端日历的示例代码

工作中遇到一个需求是根据日历查看某一天/某一周/某一月的睡眠报告,但是找了好多日历组件都不是很符合需求,只好自己手写一个日历组件,顺便记录一下。 先看看UI给的设计图和,需求是有数据的日期做标记,可以查看某一周/某一月的数据,周数据不用自定义,就按照日历上的周数据截取. 实现效果 1. »

八个一看就觉得很棒的Vue开发技巧分享

目录 1.路由参数解耦 2.功能组件 3.样式范围 4.watch的高级使用 5.watch监听多个变量 6.事件参数$event 7.程序化事件监听器 8.监听组件生命周期 总结 1.路由参数解耦 通常在组件中使用路由参数,大多数人会做以下事情。 export default { »