vue_前端技术_乐学笔记

vue3+TS 自定义指令：长按触发绑定的函数

vue3+TS 自定义指令：长按触发绑定的函数而然间看到一个在vue2中写的长按触发事件的自定义指定，想着能不能把他copy到我的vue3项目中呢。编写自定义指令时遇到的几个难点1.自定义指令的类型在ts中写任何东西都要考虑到类型的问题，自定义指令的类型问题依然存

03-08
Vue生命周期 vue生命周期几个阶段

官网解释一、Vue的生命周期Vue 实例有⼀个完整的⽣命周期，也就是从开始创建、初始化数据、编译模版、挂载Dom - 渲染、更新 - 渲染、卸载等⼀系列过程，称这是Vue的⽣命周期。Vue2生命周期：1.beforeCreate（创建前）数据观测和初始化事件还未开始，此时 dat

03-08
vue 中安装并使用echart

本文为博主原创，转载请注明出处：1.安装echart 依赖：　　安装命令： npm install echarts --save　　在vscode 的终端窗口进行执行，如图所示：　　执行完之后，查看项目中的echart 版本依赖是否添加成功：　　package-lock.json 中有具体的echart 依赖

03-08
day04-Vue01

Vue011.Vue是什么？Vue（读音/vju:/，类似于view）是一个前端框架，依据构建用户界面Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或者项目整合支持和其他类库结合使用开发复杂的单页应用非常方便Vue是Vue.js的简称官网：Vue.js - 渐进式 JavaScr

03-08
Vue + Element 自定义上传封面组件

前一段时间做项目，频繁使用到上传图片组件，而且只上传一个封面，于是想着自定义一个图片封面上传组件。先来看一下效果：第一张图片是上传之前，第二张图片是上传成功后，第3张图片是鼠标放上去之后的效果！首先整理需

03-08
基于ZR.VUE 前端的改造,页面刷新报错

问题描述:前后端分离开发,分开部署. 页面刷新直接报404 错误的解决办法提示: 先在 .env.development 中配置 VUE_APP_BASE_API , 将 '/' 替换为后端地址 'http://localhost:8888/'如果是对应的发布的正式环境,也要修改 .env.production 的VUE_APP_

03-08
Vue3 企业级优雅实战 - 组件库框架 - 9 实现组件库 cli - 上

上文搭建了组件库 cli 的基础架子，实现了创建组件时的用户交互，但遗留了 cli/src/command/create-component.ts 中的 createNewComponent 函数，该函数要实现的功能就是上文开篇提到的 —— 创建一个组件的完整步骤。本文咱们就依次实现那些步骤。（友情提示

03-08
vue-3 this概念

一、this概念官方是这样说的：在 setup()内部，this 不会是该活跃实例的引用因为 setup() 是在解析其它组件选项之前被调用的，所以 setup() 内部的 this 的行为与其它选项中的 this 完全不同这在和其它选项式 API 一起使用 setup() 时可能会导致混淆啥意思呢

03-08
vue3和百度地图关键字检索定位点击定位

效果图在index.html中引入百度地图开放平台去申请你的ak 非常的简单可以自己百度一下!-- 这个用官网给的有好多警告更具百度的把 https://api.map.baidu.com/getscript?v=2.0ak=xxxxxxxxxxxxxxxxxxxxx 换为这个就没有那么多报错了 --scripttype="text/j

03-08
Vue集成lodop插件实现打印功能 vue打印console

目录VUE简单使用lodop1.创建LodopFuncs.js文件2.在打印功能vue页面引入LodopFuncs3.执行打印方法4.打印接口函数官网样例说明5.完整页面示例VUE 集成LODOP插件打印Lodop、C-Lodop使用说明及样例http://www.lodop.net/LodopDemo.htmlVUE简单使用lodop1.创建Lodo

03-08
Vue3+TypeScript 项目中，配置 ESLint 和 Prettier

接上篇：从0搭建vite-vue3-ts项目框架：配置less+svg+pinia+vant+axios文档同步项目gitee：https://gitee.com/lixin_ajax/vue3-vite-ts-pinia-vant-less.git 一、Eslint：用于检测代码安装eslint相关依赖yarn add eslint eslint-plugin-vue @typescript-esli

03-08
一文带你了解Vue3中toRef和toRefs的用法 vue $refs的用法

toRef 顾名思义，不是ref 响应式数据，给它转成ref 响应式数据通俗易懂的理解： templateh3姓名：{{ person.name }}/h3h3年龄：{{ person.age }}/h3h3薪资：{{ person.job.j1.salary }}/h3button @click="person.name += '!'"修改姓名/buttonbutton @click="

03-08
解决Vue路由导航报错:NavigationDuplicated: Avoided redundant navigation to current location

目录一、描述问题二、报错原因三、解决方法1、安装vue-router3.0以下版本2、为每一个Promise添加一个回调函数3、修改VueRouter原型对象上的push/replace方法四、原理分析五、额外补充1、路由导航方式2、Promise函数总结点击vue路由跳转，控制台报错：Avoide

03-08
Vue+jsPlumb实现连线效果(支持滑动连线和点击连线)

目录前言实现前言最近在做一个互动题板管理项目，主要负责开发互动题板的连线题，由于时间紧凑，一番search之后决定使用jsPlumb来做，本身jsPlumb做的是可以滑动连线的，奈何产品要同时兼容点击，我想做过拖拽的前端小伙伴知道，拖拽和点击两者是有冲突问题;

03-08
vue 自动生成swagger接口请求文件的方法

前端: vue-element-admin后端: .net core (6.0)找了很多自动生成的代码的，感觉不太行，可能是我不太懂。所以自己根据swagger.json去生成了js请求文件。后端很简单，就不说了，只要能访问到swagger的地址就可以，主要是前端。这个生成的比较简单，你们可以根

03-08
AntV+Vue实现导出图片功能

目录一、业务场景：二、问题描述：三、具体实现步骤：四、完整代码五、效果展示：一、业务场景：AntV 组织图操作完毕以后，需要点击按钮将画布以图片的形式导出二、问题描述：官网上有4个方法，我用的是graph.toFullDataURL(callback, type, imageConfig)三、

03-08
Vue中四种操作dom方法保姆级讲解 vue中如何操作dom

目录前言一、通过ref拿到dom的引用适用场景示例代码二、通过父容器的ref遍历拿到dom引用适用场景示例代码三、通过子组件emit传递ref适用场景示例代码四、通过:ref将dom引用放到数组中适用场景示例代码前言最近主管提出了许多优化用户体验的要求，其中很多涉及

03-08
Vue状态管理工具Vuex工作原理解析 vuex五种状态

目录一、什么是vuex二、vuex的工作方式三、vuex的使用场景四、工作流程五、vuex的核心API六、应用七、vuex的工作流程一、什么是vuexVuex是vue项目的状态管理器(状态管理工具)。vue项目的状态是通过vue实例(组件)绑定的变量来体现。所以也可以说vuex是用来管理

03-08
vue实现导入json解析成动态el-table树表格

目录一、需求描述二、界面展示三、代码实现一、需求描述前段时间接到一个需求是做一个类似接口文档的显示功能，将一段json数据贴到里面就可以自动解析出json数据的每个字段的类型和层级关系，用element组件的树表格的形式展示，并且可以手动新增、修改和删除

03-08
Vue透传Attributes使用解析

透传是vue中一种特性，官方的解释是：“透传 attribute”指的是传递给一个组件，却没有被该组件声明为 props 或 emits 的 attribute 或者 v-on 事件监听器。最常见的例子就是 class、style 和 id。这句话解释过来就是一些不被prop定义的属性直接添加到子组件

03-08