Vue3状态管理第48页

Uncaught TypeError: Cannot read properties of undefined (reading ‘remove‘)

在Vue3中，你可能会遇到“UncaughtTypeError:Cannotreadpropertiesofundefined(reading'remove')”这样的错误，这通常是因为在组件销毁时，尝试访问已经被销毁的元素或事件监听器

花~海·2024-01-14 20:13

vue3滑块验证使用vue3-slide-verify，宽度自适应

vue3-slide-verify地址：https://gitee.com/monoplasty/vue3-slide-verify，使用方法gitee上面写得挺详细的，在这里增加点补充。

敲代码的77·2024-01-14 20:23

vue3-template的使用

在vue3里面template只有俩种情况使用1.根据某个状态渲染多个模板的v-ifv-else2.插槽的场景周杰伦退出登录请先登录免费注册我的订单会员中心帮助中心关于我们手机版

古迪红尘·2024-01-14 20:23

vue3-treeshaking

Vue3.0中Treeshaking特性？举例说明？

thewar196·2024-01-14 20:52

vue3学习-生命周期函数

选项式API组合式APIbeforeCreate/createdsetupbeforeMountonbeforeMountmountedonMountedbeforeUpdateonBeforeUpdateupdatedonUpdatedbeforeUnmountonBeforeUnmountunmountedonUnmounted//生命周期的使用//1.引入函数import{onMounted

是老虎是狮子不是大象·2024-01-14 20:50

vue3-provide和inject

1.作用场景：顶层组件向任意的底层组件传递数据和方法，实现跨层组件通信2.跨层传递普通数据1.顶层组件通过provide函数提供数据2.底层组件通过inject函数获取数据顶层组件//1.顶层组件提供数据provide('data-key','thisisroomdata')底层组件import{inject}from'vue';//2.接收数据constroomData=inject('data

是老虎是狮子不是大象·2024-01-14 20:50

vue3-模板引用

//1.调用ref函数->ref对象consth1Ref=ref(null)constcomRef=ref(null)//组件挂载完毕之后才能获取onMounted(()=>{console.log(h1Ref.value);console.log(comRef.value);})父组件绑定之后结果默认情况下在子组件中constname=ref('testname')defineExpose({n

是老虎是狮子不是大象·2024-01-14 20:18

1、Vue3.0 第一个地图

OpenLayers是一个用于开发WebGIS客户端的高性能、功能丰富的JavaScript库,用于在Web上创建交互式地图。OpenLayers支持的地图来源包括GoogleMaps、Yahoo、Map、微软VirtualEarth等，用户还可以用简单的图片地图作为背景图，与其他的图层在OpenLayers中进行叠加，在这一方面OpenLayers提供了非常多的选择。除此之外，OpenLayer

星星编程·2024-01-14 20:01

vue3+threejs可视化项目——搭建vue3+ts+antd路由布局（第一步）

yma16·2024-01-14 20:40

页面下拉，元素悬浮置顶实现

目录实现技术实现目标实现演示演示说明实现步骤注意事项结语实现技术vue2、js原生命令（ps:vue3只是操作dom些许不同，可自行百度）实现目标页面初始时，元素保持原有位置；页面下拉时，元素置顶实现演示演示说明页面中操作框

ooxuyu·2024-01-14 19:04

vue3环境下，三方组件中使用echarts，无法显示问题

问题描述：vue3中，使用了三方组件primevue的侧边栏Sidebar，在其中注册echartsdom节点，无法显示，提示dom不存在问题分析：使用原生div，通过document.getElementById

ooxuyu·2024-01-14 19:29

Vue3-47-Pinia-修改全局状态变量值的方式

说明修改全局状态变量的值，是一个比较常规而且常见的操作。本文就介绍四种常见的操作。由于OptionStore和SetupStore在修改的时候略有不同，所以本文也会将不同点体现一下。全局状态变量的定义包含了OptionStore和SetupStore两种定义方式；在下面的修改操作中会根据这两种不同的定义来分别阐述。//导入defineStoreAPIimport{defineStore}from'

NorthCastle·2024-01-14 18:49

Vue3-46-Pinia-获取全局状态变量的方式

使用说明在Pinia中，获取状态变量的方式非常的简单：就和使用对象一样。使用思路：1、导入Store；2、声明Store对象；3、使用对象。在逻辑代码中使用但是OptionStore和SetupStore两种方式定义的全局状态变量在获取的时候还是有简单的区别的：OptionStore:声明Store对象之后，可以直接使用属性，例如：【store.name】SetupStore:声明Store对象之

NorthCastle·2024-01-14 18:16

Vue3的响应式数据

在Vue3中，响应式数据使用ref和reactive函数来创建。

&ACE&·2024-01-14 18:36

使用vite创建vue3项目

1、使用管理员身份打开命令行窗口，输入命令:npmcreatevue@latestTypeScript语法选择是，其他依次选择否，创建完毕。2、创建完毕后打开项目，vscode会提示安装开发相关的插件，选择install3、打开vscode终端，输入npmi安装程序所需要的依赖包安装完毕后打开下述文件不会报错了，该文件是为了引入ts能辨别相关文件4、上述完成后，输入npmrundev可启动项目

毎天要喝八杯水·2024-01-14 18:34

vue3中setup函数语法糖

其中有两个script,一个定义组件名称，一个用来在setup中定义变量和函数进阶简化:1、安装插件npmivite-plugin-vue-setup-extend-D2、引用调用插件

毎天要喝八杯水·2024-01-14 18:34

Vue2&vue3的生命周期函数11个+监听属性+计算属性+vue内置的基本指令

一、vue2生命周期函数vue2里一共有11个生命周期函数，从vue创建、运行、到销毁总是伴随着各种事件，这些事件就称为生命周期.分别是创建、挂载、更新到销毁【常用的】⑴【beforecreate】实例创建前。vue完全创建之前，会自动执行这个函数。⑵【Created】实例创建后。这也是个生命周期函数，beforecreate执行完后会自动执行它。其中data的值是由在created中请求并初始化

我不是长安·2024-01-14 18:25

vue3 做一个后台管理用的轻量级路由 + 菜单

Vue3的后台管理的项目想要做个菜单的话，一般会使用VueRouter设置路由，然后用UI库的菜单组件（比如el-menu）设置各种属性，然后还需要考虑权限等问题。

自然框架·2024-01-14 16:42

Zustand 状态管理

Zustand状态管理安装创建Store给Store添加TS类型约束在页面使用Store返回Store中所有状态在Store中使用async异步方法使用ImmerMiddleware(中间件)更新深层嵌套的

OooooYi·2024-01-14 16:44

＜script setup＞中pinia的使用

1.安装Pinia：首先，在你的Vue3项目中安装Pinia。你可以使用npm或者yarn来安装Pinia。

HWL5679·2024-01-14 16:09

全面了解Vue3的 reactive 和相关函数（上）

从ES6的Proxy开始，到Vue3提供的各种函数，尽量的把自己的理解融入进来，当然目前水平限制，无法做到非常深入的程度。以后有更深的了解之后还会有新的见解。

自然框架·2024-01-14 15:06

Vue3 移动端自适应方案postcss-px-to-viewport

我的环境依赖名版本pnpm8.14.0Node16.20.1Vue3.3Vite5.0.8一、安装[email protected]二、配置

HaushoLin·2024-01-14 15:06

Vue3 如何使用移动端调试工具vConsole

1、安装pnpmivconsole2、在src/utils下新建vconsole.ts，写入以下代码//这是移动端控制台调试工具，需要调试就打开,不用就注释importvConsolefrom'vconsole'constvconsole=newvConsole()3、src/main.ts引入，需要调试就打开,，不用时就注释//这是移动端控制台调试工具，需要调试就打开,不用就注释import'@

HaushoLin·2024-01-14 15:05

vue3中ref和reactive联系与区别以及如何选择

vue3中ref和reactive区别与联系区别1、ref既可定义基本数据类型，也可以定义引用数据类型，reactive只能定义应用数据类型2、ref在js中取响应值需要使用.value，而reactive

给贝贝赚口粮·2024-01-14 15:41

Vue3使用IP地址访问（解决 ERR_CONNECTION_REFUSED）

Vue3使用IP地址访问问题Vue3项目，运行后，在本机浏览器中，直接使用localhost访问（或127.0.0.1），能够正确访问。

宋冠巡·2024-01-14 15:07

小白浅学Vue3

目录前端环境依赖管理NPM安装配置创建Vue项目模板语法文本插值{{}}v-html属性绑定条件渲染v-if、v-else-if、v-elsev-show列表渲染v-for状态管理事件事件事件传参事件修饰符数组变化监听计算属性

QGS-CD·2024-01-14 14:29

Spring Boot 3 + Vue 3 项目实战，手把手教你从零开始开发上线一套生产级别的 Java 系统

xxyopen·2024-01-14 14:36

Spring Boot+Vue3前后端分离实战wiki知识库系统之Spring Boot项目搭建

新建SpringBoot项目【标SpringBoot项目目录结构】两种创建Springboot的方式使用spring官网提供的构建选择自己需要的配置后下载压缩包解压后，使用IDEA引入项目，选择File→OpenFileorProject，选择解压后的文件夹，单击OK按钮，项目即可创建完成。直接使用IDEA创建选择SpringInitializrGroup：一般输入公司域名，比如百度公司就会输入c

gujunhe·2024-01-14 14:33

鸿蒙开发-UI-组件-状态管理

鸿蒙开发-序言鸿蒙开发-工具鸿蒙开发-初体验鸿蒙开发-运行机制鸿蒙开发-运行机制-Stage模型鸿蒙开发-UI鸿蒙开发-UI-组件文章目录前言一、什么是状态管理二、管理组件拥有的状态1.组件内状态@State

鸿蒙布道·2024-01-14 13:09

Vue3 子传父暴露数据 defineExpose

defineExpose属性：用于将子组件中的数据和方法，暴露给父组件，父组件再配合ref属性使用。语法格式//子组件：暴露数据和方法defineExpose({数据,数据,方法});//父组件：使用数据和方法ref名称.value.数据ref名称.value.方法()基础使用一、子组件：创建Child子组件，通过defineExpose暴露数据和方法。我是Child组件{{info.name}}

小吴吴吴呀·2024-01-14 13:17

【CSS扩展】VUE如何使用或修改element plus中自带的CSS全局变量来定义样式

elui中的自定义样式变量（方法一致）本萌新最近在写网页时使用到了elementplus中自带的CSS全局样式定义，本文将从CSS声明全局变量的方法出发，记录如何使用并自定义修改elementplus（vue3

音仔小瓜皮·2024-01-14 12:47

Vue3访问不到$refs？

我试过了,getCurrentInstance()的方法我试过//伪代码setup(){lettinymceDate=ref(null)constpublish=()=>{console.log("hfq",tinymceDate.value)}return{...}}都不行后面我试着在setup中使用setup(prop,context)使用context.$refs这样去访问.因为在我的理解中

长而不宰·2024-01-14 11:57

vue3实现动态侧边菜单栏的几种方式总结

基于自建json数据的动态侧边菜单栏后端接口json数据src/api/menuList.jsconstmenuList=[{url:'',name:'人员管理',icon:'icon-renyuan',menuId:1,children:[{url:'/user',name:'用户管理',icon:'icon-jurassic_user',menuId:1001,children:[]},{ur

村长在路上·2024-01-14 11:40

Vue3 store仓库数据间流转 Vuex4 + Pinia

上文讲了vue2数据流转处理的方法这文讲讲vue3Vuex在Vue3中可以使用Vuex4来进行状态管理和存取数据。

月下绯烟·2024-01-14 10:20

Cesium笔记初始化使用Vue-Cesium 组件

参考AVue3basedcomponentlibraryofCesiumJSfordevelopers|VueforCesiumVueforCesium,aVue3.xbasedcomponentlibraryofCesiumJSforGISerhttps

Y青阳·2024-01-14 10:53

vue3基础表单的输入绑定

表单的输入绑定意义在前端处理表单时，我们常常需要将表单输入框的内容同步给javascript中相应的变量。手动连接值绑定和更改事件监听器可能会很麻烦，v-model指令帮我们简化了这一步骤v-model有点类似于双向绑定表单的输入与绑定{{message}}{{check}}exportdefault{data(){return{message:"ismessage",check:false}}}

Msir_Modern·2024-01-14 09:51

vue3.0的学习笔试，持续更新，

笔记，跟着coderwhy老师的vue3.0+TS课程来整理的，有兴趣可以购买一下哦购买地址5-12邂逅Vue1、认识vue一套用于构建用户界面的渐进式框架渐进式：表示我们可以在项目中一点点来引入和使用

嘤嘤怪呆呆狗·2024-01-14 08:32

学习 vue2.X 这篇文章就够了

学习目标能够说出vue的基本用法能够说出vue的模板语法能够说出vue的常用特性能够基于vue实现案例效果1.2vue概述尤雨溪vue：渐进式JavaScript框架声明式渲染=>组件系统=>客户端路由=>集中式状态管理

嘤嘤怪呆呆狗·2024-01-14 08:31

vue3中watch同时监听多个值

watch([()=>state1.count,state2.value],([newVal1,newVal2],[oldVal1,oldVal2])=>{console.log('watch监听中的newVal：',newVal1,newVal2);console.log('watch监听oldVal：',oldVal1,oldVal2);})

貂蝉空大·2024-01-14 07:47

vue3-计算属性

计算属性模板中的表达式虽然方便，但也只能用来做简单的操作。如果在模板中写太多逻辑，会让模板变得臃肿，难以维护。根据作者今年是否看过书展示不同信息import { ref, reactive } from "vue"const author = reactive({ name: 'John Doe', books: [ '老人与海', '百年孤独',

王大可996·2024-01-14 07:49

Vue keep-alive的使用和原理解析

在本专栏中，我们将深入学习Vue.js的核心概念、组件开发、状态管理、路由和性能优化等方面的知识。无论你是初学者还

俊刚、·2024-01-14 06:47

Vue3+Vite连接高德地图JS API——地图显示、输入搜索

1开通高德地图Web端JSAPI服务1、进入高德地图API官网（https://lbs.amap.com/）：2、注册登录。3、进入控制台。4、点击“应用管理”，点击“我的应用”，创建新应用。5、添加Key，服务平台选择“Web端（JSAPI）”，白名单不要填写，勾选阅读并同意。点击提交后，就能看到Key已经生成，记住这里的Key和安全密钥。2配置Vue项目文件2.1简易方法因此直接下载官方提供的

阳排·2024-01-14 06:10

Vue3之异步组件

基本用法在大型项目中，我们可能需要拆分应用为更小的块，并仅在需要时再从服务器加载相关组件，就需要使用defineAsyncComponent这个API。也就是说当我们需要用到这个组件的时候才回去加载它。import{defineAsyncComponent}from'vue'constAdminPage=defineAsyncComponent(()=>import('./components/A

前端入门到入坑·2024-01-14 06:41

Vue中v-if与v-show区别详解

在本专栏中，我们将深入学习Vue.js的核心概念、组件开发、状态管理、路由和性能优化等方面的知识。无论你是初学者还

俊刚、·2024-01-14 06:44

实现响应式变化---自适应页面（各种css样式文字图片大小）

方法一：vue2.0及vue3.0rem配置Vue2.0配置postcss-px2remvue2.0及vue3.0rem配置参考链接:https://www.cnblogs.com/TreeCTJ/p/

夏花里的尘埃·2024-01-14 04:17

vue创建项目

$npmconfiggetregistry设置淘宝镜像地址$npmconfigsetregistryhttps;//registry.npm.taobao.ort/创建项目：使用vue-cli创建一个vue3.0

可地出溜·2024-01-14 03:58

两周掌握Vue3（四）：计算属性、监听属性、事件处理

文章目录一、计算属性1.什么是计算属性2.代码示例二、监听属性三、事件处理代码仓库：跳转当前分支：04一、计算属性1.什么是计算属性Vue中的计算属性具有以下作用：数据处理：计算属性可以用于对数据进行处理和计算，例如对原始数据进行格式化、筛选、排序等操作，以便在视图中直接使用处理后的数据。响应式更新：计算属性会根据其所依赖的响应式属性的变化而自动更新。这意味着当依赖的数据发生变化时，计算属性会自动

TracyCoder123·2024-01-14 03:35

两周掌握Vue3（五）：自定义指令、路由、ajax

文章目录一、自定义指令1.创建和使用自定义指令2.钩子函数3.使用参数二、路由1.创建一个router实例2.在components目录中创建组件3.将路由实例挂载到应用4.使用路由三、Ajax代码仓库：跳转当前分支：05一、自定义指令自定义指令是Vue.js框架提供的一个非常强大的特性，它允许开发者直接操作DOM，扩展Vue.js的能力。自定义指令的主要作用包括：封装常用操作：当你发现在多个组件

TracyCoder123·2024-01-14 03:34

Vue3 组件常用API封装

目录结构：1、插件：instanceimport{ref,reactive,watch,computed,onMounted,getCurrentInstance}from"vue";exportdefaultfunction(){let{proxy}=getCurrentInstance();console.log(proxy);proxy.ref=refproxy.reactive=react

meng_xiaoxiao·2024-01-14 02:05

vue3如何封装接口

你可以使用npm或yarn来安装：2.创建一个api.js文件来管理接口封装：3.在Vue组件中使用封装的接口：前言在Vue3中封装接口的主要目的是为了提高代码的可维护性、重用性和可读性。

锅盖哒·2024-01-14 02:35

推荐频道

Vue3状态管理