vue3来喽~ 第42页

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

＜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状态管理事件事件事件传参事件修饰符数组变化监听计算属性Class绑定Style绑定侦听器v-model表单的输入绑定模板引用Vue组件组件的生命周期钩子组件嵌套关系组件注册组件数据传递props传递数组，对象类型验证Props实

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

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

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

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

实现响应式变化---自适应页面（各种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基础：单文件组件介绍

介绍Vue的单文件组件(即*.vue文件，简称SFC，全称是singlefilecomponent)是一种特殊的文件格式，使我们能够将一个Vue组件的模板、逻辑与样式封装在单个文件中。下面是一个单文件组件的示例：exportdefault{data(){return{greeting:'HelloWorld!'}}}{{greeting}}.greeting{color:red;font-weig

whatever who cares·2024-01-14 02:02

vue3基础：计算属性

计算属性来描述依赖响应式状态的复杂逻辑。模板中最好不好写复杂的逻辑计算，否则会让模板变得臃肿，难以维护。选项式api中exportdefault{data(){return{}},computed:{wholeName(){return*****}}}组合式api中import{reactive,computed}from'vue'constwholeName=computed(()=>{retu

whatever who cares·2024-01-14 02:02

vite+vue3创建项目及开发常见的问题

whatever who cares·2024-01-14 02:32

vue3基础：组件注册

组件注册一个Vue组件在使用前需要先被“注册”，这样Vue才能在渲染模板时找到其对应的实现。组件注册有两种方式：全局注册和局部注册。全局注册我们可以使用Vue应用实例的.component()方法，让组件在当前Vue应用中全局可用。import{createApp}from'vue'importAppfrom'./App.vue';importHelloWorldfrom'./components

whatever who cares·2024-01-14 02:30

Vue3-路由知识点

一、路由工作模式1.history模式优点:URL更加美观,不带有#，更接近传统的网站URL缺点:后期项目上线，需要服务端配合处理路径问题，否则刷新会有404错误constrouter=createRouter({history:createWebHistory()，//history模式}）2.hash模式优点:兼容性更好，因为不需要服务器端处理路径缺点:URL带有#不太美观，且在SEO优化方面

大嘴史努比·2024-01-14 02:18

Vue3-完成任意组件之间的传值

一、props（只限于父子之间，不嫌麻烦可以不断传）父给子传值，子接收defineProps父给子传事件，子接收defineProps，并触发事件的时候传值，然后父通过事件的回调函数拿到子传的值二、mitt（自定义事件）首先需要在utils文件夹下引入mitt，三步骤：引入，调用，暴露然后是在需要传值之间的组件引入mitt，先绑定事件，用来组件之间传值，然后传值的组件触发这个事件。一般来看，接收的