监听器vue

本文本记录了使用 Vue3+Vite+ElementPlus 从0开始搭建一个前端工程会面临的常见问题，没有技术深度，但全都是解决实际问题的干货，可以当作是问题手册以备后用。本人日常工作偏后端开发，因此，文中的一些前端术语描述可能不严谨，敬请谅解。重点是：这里记录的解决方案都是行之有效果的，拿来即可 ......

当我们使用MyBatis-Plus 使用 ID_WORKER 或者 ASSIGN_ID(雪花算法) 生成的id作为主键时，因为其长度,为19位，而前端一般能处理16位，如果不处理的话在前端会造成精度丢失，最后两位会变成00，如下图，感觉像是四舍五入后的效果。 处理这种问题有两种方案，要么后端出处理， ......

​ 技术博客：Vue中各种混淆用法汇总 摘要 本文主要介绍了在Vue中使用的一些常见混淆用法，包括new Vue()、export default {}、createApp()、Vue.component、Vue3注册全局组件、Vue.use()等，以及如何使用混淆器对代码进行加固，保护应用安全。 ......

​ 引言 Vue是一种流行的JavaScript框架，用于构建用户界面。它简单易用且功能强大，备受开发者喜爱。然而，在传输和存储过程中，我们需要保护Vue代码的安全性。混淆是一种有效的保护措施，可以加密和压缩代码，使其难以被理解和修改。本文将介绍Vue混淆的概念以及如何进行还原。 混淆 混淆是将Vu ......

注意： 使用 Hooks 来做的话，需要封装一个以 use 开头的函数，自定义 Hooks 有一个潜规则，就是要 use 开头 一、相关链接 ① 已经封装好可直接使用的：https://vueuse.org/core/useMounted/ ② 为什么要在Vue3中多使用Hooks？好处是啥？ ：  ......

1. 使用组件-效果展示（推荐） 1.2 安装组件依赖（默认是V6版本，旧版本V5.02） 官方文档地址（二级联动，三级联动包含教程）：https://www.npmjs.com/package/element-china-area-data npm install element-china-ar ......

版本 "mitt": "^3.0.1" 1、npm install mitt 2、项目下创建文件夹eventBus 建 myEventBus.js import mitt from 'mitt'export default mitt() 3、组件里监听 组件A import myEventBus f ......

1、npm install pinia 2、在项目目录建store文件夹创index.js import { createPinia,defineStore } from "pinia";const pinia = createPinia()pinia.state.valueconst token ......

一 、动态变换背景图片的实现 代码如下： <template> <div class="body" v-loading="loading" :style="{ backgroundImage:'url('+ bgi +')' }"> </div> </template> <script> data ......

VUE vue 渐进式 将复杂的东西给处理，只需要调用api 就可以 进行网页的设计 前端框架的 几乎都一样 vue： react:facebook angualr:谷歌 库的区别与库的区别 jquery库：对dom的操作 art-template库：模板引擎的渲染 高效 框架：大而全，简单渲染+请 ......

Rouer组件 可以构造单页引用 多页应用：mpa 每一个页面都是一个html文件 方便seo优化 单页应用：spa 知乎网站 掘进 百度移动端 单页用于取决情况： 1.用户群体比较多 原理：相当于一个a标签，导航栏上切换不同的视图 大部分做的vue 使用都是后台管理程序 在使用router是 vu ......

Vuex vuex 是专为vue.js应用程序开发的管理模式，它采用集中式储存管理应用的去全部组件状态，并以响应的规则邦正状态可以以一种可预测的方式变化 主要管理数据 使用vuex的时机，vuex相当于商店，谁都可以取买卖东西 当两个组件没有关系的情况下 1.如果项目中型或者大型，不推荐 使用 父子 ......

vue 树形选择器 主要用后端处理显示数据 根据 el-Element 官网可知，想要使用树形选择器 <el-tree-select> 就要提供以下形式的数据： data = [ { value: '1', label: 'Level one 1', children: [ { value: '1- ......

element Plus的虚拟化表格用的是lang=tsx,先安装 cnpm i @vitejs/plugin-vue-jsx 然后去vite.config.ts里加配置 import vueJsx from '@vitejs/plugin-vue-jsx' plugins: [ vue(), vu ......

这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 背景 最近心血来潮，想要在本地开发时，也用CDN的方式引入 Vue，想着既然通过CDN引入了，那么在项目中就没必要再 import Vue，然后把项目中引入 Vue 的地方都删掉，结果改完后，界面看似正常运行，但数据变更后，界面没有重新渲 ......

问题描述：layout下的navar组件中展示用户名，初始化时进入layout层会进入mouted中请求接口数据展示名称，但是在编辑弹框中编辑成功后，关闭弹框，此时不会走layout的mouted，因为layout组件的mouted已经加载过一次了，不手动刷新浏览器是不会走mouted生命周期的。那 ......

在明白原理之前，我们有很多表面现象、使用场景需要记忆。明白了原理后，你会发现它们已经不需要记了，因为从原理出发，你自己都能把它们推导出来，一切是那么的自然而然。感觉就是：这还用记吗？很明显嘛！ 之前我对vue的响应式原理，只是一知半解，导致开发中经常会出现疑问，比如：为什么有的数据它不响应？模板中用 ......

<script setup> import { computed, ref } from "vue"; // const blog = ref({ // title: "Vue3 基础教程", // content: "Vue3 在 Vue2 的基础上做了很多优化", // link: "https ......

场景：layout页顶部navar组件中展示用户名称，在修改用户名并关闭弹框后，navar组件中的name不能及时更新，需要手动刷新。如下： 1、在utils中写个方法watchStroage.js。对localStorage.setItem进行重新改造 2、在main.js中引入这个方法并使用 i ......

原文地址:vue3+tsx开发语法详解 - 知乎 很多组件库都使用了TSX的方式开发，主要因为其灵活性比较高，TSX和SFC开发的优缺点就不介绍了，这里主要说一下将SFC项目改造为TSX的过程。 安装JSX库 pnpm install @vitejs/plugin-vue-jsx -D 安装完之后在 ......

原文地址:在 vue3 中优雅的使用 jsx/tsx - 掘金 前言 相信 react 的伙伴对于 jsx/tsx 都不陌生吧，现在在 vue3 中也可以使用 jsx/tsx 语法拉。 安装插件（@vitejs/plugin-vue-jsx） vite官方提供了官方的插件来支持在vue3中使用jsx ......

npm init vue@latest 看需求选择 紧接着cd 到自己的项目文件下 npm i一下安装依赖 npm run dev 启动项目 ......

ref 接受一个内部值并返回一个响应式且可变的 ref 对象。ref 对象仅有一个 .value property，指向该内部值 <template> <div> <button @click="changeMsg">change</button> <div>{{ message }}</div> ......

主要是想在加载路由什么的之前先请求一些配置参数，毕竟我的情况是首页要根据不同的配置显示不同的路由组件 一般加载App.vue是这么写的 import { createApp } from 'vue' import App from './App.vue' createApp(App).mount(' ......

01. JS-介绍 什么是JavaScript? JavaScript（简称：JS） 是一门跨平台、面向对象的脚本语言。是用来控制网页行为的，它能使网页可交互。 JavaScript 和 Java 是完全不同的语言，不论是概念还是设计。但是基础语法类似。 JavaScript 在 1995 年由 B ......

项目代码同步至码云 weiz-vue3-template pina 是 vue3 官方推荐的状态管理库，由 Vue 核心团队维护，旨在替代 vuex。pina 的更多介绍，可从 pina官网 查看 特点 更简洁直接的 API，提供组合式风格的 API 支持模块热更新和服务端渲染 对TS支持更为友好 ......

function isOverflow(element) { return element.scrollWidth > element.offsetWidth; } let element = document.querySelector('.ellipsis-span'); let resizeO ......

效果如图： template部分： <view class="item"> <view class="box"> <view class="content"> <view class="head">优惠券</view> <view class="content-box1"> <view class= ......

内置指令 v-bind 单向绑定解析表达式，简写为:xxx v-model 双向数据绑定 v-for 遍历数组/对象/字符串 v-on 绑定事件监听，简写为@xxx v-if 条件渲染，动态控制节点元素是否存在 v-else 条件渲染，动态控制节点元素是否存在，与v-if一起用 v-show 动态控 ......

window.addEventListener("keydown", enterUp); // 点击回车键登录 const enterUp = (e: any) => { console.log("in enter up：", e); if (e.keyCode == 13 || e.keyCode ......