E-COM-NET
首页
在线工具
Layui镜像站
SUI文档
联系我们
推荐频道
Java
PHP
C++
C
C#
Python
Ruby
go语言
Scala
Servlet
Vue
MySQL
NoSQL
Redis
CSS
Oracle
SQL Server
DB2
HBase
Http
HTML5
Spring
Ajax
Jquery
JavaScript
Json
XML
NodeJs
mybatis
Hibernate
算法
设计模式
shell
数据结构
大数据
JS
消息中间件
正则表达式
Tomcat
SQL
Nginx
Shiro
Maven
Linux
vue3踩坑记
Vue3
封装全局函数式组件
文章目录前言一、函数式组件是什么?二、创建一个函数式组件1.封装toast组件2.创建应用实例3.注册插件(可省略)Q&A:补充一些注释①:为什么采用调用函数方法的方式去控制显隐②:函数式组件的这两个文件之间的联系三、调用1.注册插件后在.vue文件内获取全局方法2.可不注册插件,在.vue或.js文件内直接调用方法四、优化改进1、单例模式(推荐)2、多个提示弹窗3、简化传参总结扩展阅读前言相信大
前端咸鱼翻身
·
2024-02-08 18:22
封装组件
vue.js
前端
vue3
+ts 引入高德地图并使用地图选点和搜索
引入高德地图npmi@amap/amap-jsapi-loader--save在index.html引入window._AMapSecurityConfig={securityJsCode:'',//你的密钥}创建map.vue组件确定{{item.name}}地址:{{item.address}}import{shallowRef,defineEmits,defineComponent,ref,
久爱@勿忘
·
2024-02-08 18:21
vue.js
elementui
前端
vue3
挂载全局方法
比如某个js方法,项目很多地方都能用到,每次去重新写一遍太麻烦,放在一个js里面,每次去引入也懒得引,就可以挂载在全局上1.创建tool.js文件,里面放常用的方法consttools={getCurrentTim(){constcurrentTime=newDate();constyear=currentTime.getFullYear();constmonth=currentTime.getM
一个打工仔的笔记
·
2024-02-08 18:49
vue.js
javascript
前端
vue3
的全局组件,函数和变量
vue3
的全局组件,函数和变量全局组件:use关键字importMyUIfrom'@/components'constapp=createApp(App)app.use(MyUI)app.mount('
monana6
·
2024-02-08 18:49
Vue3
vue.js
前端
javascript
Vue3
水印(Watermark)
APIs参数说明类型默认值必传width水印的宽度,默认值为content自身的宽度numberundefinedfalseheight水印的高度,默认值为content自身的高度numberundefinedfalselayout水印的布局方式:平行布局parallel;交替布局alternate‘parallel’|‘alternate’‘alternate’falserotate水印绘制时,
theMuseCatcher
·
2024-02-08 18:48
less
Vue3
ts
vue3
typescript
components
Vue3
使用全局函数或变量的两种常用方式
例如:想要在index.ts中创建getAction函数,并可以全局使用:import{http}from'@/utils/axios'exportfunctiongetAction(url:string,params:object){returnhttp.request({url:url,method:'get',params:params})}方式一:使用依赖注入(provide/inject
theMuseCatcher
·
2024-02-08 18:15
ts
Vue2
vue.js
前端
javascript
Vue3
创建项目方式及步骤
一、使用vue-cli创建1、文档链接为:https://cn.vuejs.org/guide/quick-start.html#creating-a-vue-application2、使用的语句有:npminstall-g@vue/cli======之前已安装vue--version======确保版本在4.5.0以上vuecreate项目的名称选择Manuaselectfeatures选上Ty
一起来学计算机
·
2024-02-08 17:42
vue3.js
vue.js
javascript
前端框架
创建一个VUE项目(vue2和
vue3
)
背景:电脑已经安装完vue2和
vue3
环境一台Mac同时安装vue2和
vue3
https://blog.csdn.net/c103363/article/details/136059783创建vue2项目
c103363
·
2024-02-08 17:39
vue.js
前端
javascript
Vue----导航守卫
文章目录3.5导航守卫3.5.1全局前置守卫3.5.2守卫方法的3个形参3.5.3next函数的3种调用方式3.5.4控制后台主页的访问权限src/router/index.js3.5导航守卫Vue2与
Vue3
萤火虫的小尾巴
·
2024-02-08 17:05
Vue
学习笔记
vue.js
javascript
前端
Vue
前端框架
vue3
配置自动导入API和组件
1.
vue3
自动导入原理:预加载前,该插件自动按需导入了,在本vue文件中使用api和组件而编写代码的时候,就无需import了注意并不是全局导入,并不会影响到资源文章目录1.
vue3
自动导入2.API
野生切图仔
·
2024-02-08 17:14
VUE3
必备
vue.js
前端
vue3
:25—其他API
目录1、shallowRef和shallowReactive2、readonly与shallowReadonlyreadonlyshallowReadonly3、toRaw和markRawtoRawmarkRaw4、customRef1、shallowRef和shallowReactiveshallowRef1.作用:创建一个响应式数据,但只对顶层属性进行响应式处理。2.用法:letmyVar=s
有蝉
·
2024-02-08 17:11
vue3
javascript
开发语言
ecmascript
#
Vue3
:shallowRef--shallowReactive--readonly--shaloowReadonly--toRow--markRow--customRef--Teleport--传
shallowRef----一层这整体修改性能更高浅层次的.value一层可以后面的层次就不行了shallowReactive–关注第一层绕开深度响应。readonly–只读属性letsum1=ref(0)letsum2=redaonly(sum1)letcar1=reactive({barnd:'奔驰',options:{color:red}})letcar2=readonly(car2)sha
前端xiaolibao
·
2024-02-08 16:39
Vue3篇
vue.js
前端
#
Vue3
:组件通信--props-emit = definEmit([‘submit‘])---子传父--mitt--v-model--provide inject--pinia--slot
v-model.numbernanoiduuid生成唯一idpinia菠萝可以修改数据countStore.sum=1批量修改contStore.$patch({sum:222})actions:increment(value){//this代表当前的store}}storeTorefs$subscribe订阅—刷新不会丢失组合式return{}组件通信-props字传父父传子-自定义事件cons
前端xiaolibao
·
2024-02-08 16:09
Vue3篇
vue.js
vue3
的常用功能
`目录下所有`vue`组件并以组件的文件名为组件的名称2.2、使用这个插件2.3、为全局组件添加类型提示三、函数式图片预览四、手动封装`svgIcon`组件五、封装拖拽钩子函数六、`vscode`中`
vue3
小马甲丫
·
2024-02-08 14:24
#
vue3
javascript
前端
vue3
Vue3
+elementplus实现弹窗功能
父组件:constprizeDialogVisible=ref(false);constopenPrizeDialog=()=>{prizeDialogVisible.value=true;};constgetPrizeMsessage=(params)=>{console.log('333',params);};子组件:取消保存props:{prizeVisible:{type:Boolean,
与月儿漫邀
·
2024-02-08 13:54
javascript
前端
vue.js
vite+vant+
vue3
新闻客户端app(三)
一、文章搜索1.1创建组件并配置路由1、创建src/views/search/index.vue2、然后把搜索页面的路由配置到根组件路由(一级路由){path:'/search',name:'search',component:Search},3、在home.vue配置路由跳转1.2页面布局Search组件提供了search和cancel事件,search事件在点击键盘上的搜索/回车按钮后触发,c
与月儿漫邀
·
2024-02-08 13:53
前端
vue3
项目keepAlive使用方法详解
常用的用法是将组件或者路由缓存,现有的用法vue2.x与
vue3
.x有部分差别。以下主要将keepaliev在
vue3
.0中的用法。
Trank-Lw
·
2024-02-08 13:47
前端
vue.js
javascript
前端
(杂项笔记)VS Code好用的插件推进
Simplified)LanguagePack3、CodeSpellChecker4、JavaScript(ES6)codesnippets5、MithrilEmmet6、PathIntellisense7、
Vue3
Snippets8
玻璃瓶和纸飞机
·
2024-02-08 12:19
开发学习
笔记
vue3
.0 watch函数案例
App.vue代码:importDemofrom'./components/Demo'exportdefault{name:'App',components:{Demo}}Demo代码:当前求和为:{{sum}}点我+1当前的信息为:{{msg}}修改信息姓名:{{person.name}}年龄:{{person.age}}修改姓名增长年龄import{ref,reactive,watch}fro
前端程序员路易
·
2024-02-08 12:20
vue
vue.js
前端
Vue3
之watch的最简用法
watch用法参数一:要监测的值或值数组。(也可直接放入对象,不建议)参数二:回调函数。接收两个参数,newValue和oldValue。参数三:配置项对象。immediate、deep…1、监测一个ref数据。letsum=ref(0);watch(sum,(newVal,oldVal)=>{console.log('sum的值被改变了',oldVal+'==>'+newVal);});2、监测
雨落Liy
·
2024-02-08 12:20
Vue
vue.js
javascript
1024程序员节
vue2/3项目中使用Vue Carousel 3D实现 Carousel 3D 轮播
文档为英文,中文可参考这位
Vue3
D轮播插件vue-carousel-3d_memory_zzz的博客-CSDN博客以上API过少,可以使用ref绑定,通过onSlideChan
毒蚊子D
·
2024-02-08 12:19
vue.js
javascript
前端
3d
vue3
中 watch、watchEffect区别
通过官网上的介绍得出如下简单的结论1、watch是惰性执行,也就是只有监听的值发生变化的时候才会执行,但是watchEffect不同,每次代码加载watchEffect都会执行(忽略watch第三个参数的配置,如果修改配置项也可以实现立即执行)2、watch需要传递监听的对象,watchEffect不需要3、watch只能监听响应式数据:ref定义的属性和reactive定义的对象,如果直接监听r
默默无闻的小人物
·
2024-02-08 11:37
基于Naive UI封装的loading自定义指令
NaiveUI是一个
Vue3
的组件库。
小木木爸
·
2024-02-08 10:35
前端小屋
前端
格子表单GRID-FORM | 文档网站搭建(VitePress)与部署(Github Pages)
格子表单/GRID-FORM已在Github开源,如能帮到您麻烦给个星GRID-FORM系列文章基于
VUE3
可视化低代码表单设计器嵌套表单与自定义脚本交互文档网站搭建(VitePress)与部署(GithubPages
集成显卡
·
2024-02-08 10:53
格子表单/GRID-FORM
低代码/Low-Code
静态网站
github
vue-cli引入Element Plus(element-ui),修改主题变量,定义全局样式
Element官网:ElementPlus-Theworld’smostpopular
Vue3
UIframework1、安装element-plusnpminstallelement-plus--save2
shawxlee
·
2024-02-08 10:53
Element
Vue
CSS/Sass
vue
vuecli
elementui
scss
样式
VUE3
基础
一、认识
vue3
及
vue3
的优势1、框架层面响应式底层API的变化,proxy数组下标的修改,对象动态添加属性;
vue3
对ts的支持比vue2更强;
vue3
增加了组合式API,增强了逻辑组合能力配套的工程化工具也有了更新
煸橙干儿~~
·
2024-02-08 10:11
VUE基础
vue.js
javascript
前端
Vue3
.0(四):Composition API的使用
CompositionAPI认识CompositionAPI前几篇文章中主要用OptionsAPI进行编写代码,但是有一些弊端OptionsAPI弊端在OptionsAPI中,有data、watch、computed、methods以及生命周期函数各种各样的选项而一个变量,为了实现某个功能,会分散在各个选项中,不利于代码的维护此时CompositionAPI就出现了使用setup函数可以将大部分选
前端大菜鸟_
·
2024-02-08 09:23
Vue3.0
vue.js
javascript
前端
vue3
之 组合式API—生命周期函数
vue3
的生命周期API生命周期函数基本使用1️⃣导入生命周期函数2️⃣执行生命周期函数传入回调import{onMounted}from'vue'onMounted(()=>{//组件挂载完毕mounted
jiojio在学习勒
·
2024-02-08 09:52
React
vue.js
javascript
前端
搭建
vue3
.0 项目
安装脚手架卸载原来的脚手架npmuninstallvue-cli-g下载新的脚手架npmuninstallvue-cli-g或者npminstall--global@vue/cli@nextvuecreate
vue3
hegege
·
2024-02-08 08:52
想要用Npm发布一个自己的组件包
踩坑记
录(webpack,rollup)
底下这个写的很详细,看完就懂https://blog.csdn.net/xjl271314/article/details/106220492/关于如何基于antd封装自己的react组件并发布到npmhttps://zhuanlan.zhihu.com/p/80754775我自己遇到的一些问题,走的弯路。1、npmlink方便调试$#先去到模块目录,把它link到全局$cdpath/to/my-
sasaraku.
·
2024-02-08 07:25
前端
vue3
mathjax 数学公式
安装pnpminstallmathjax新建文件@/util/mathjax.jswindow.MathJax={tex:{inlineMath:[["$","$"],["\\(","\\)"],],//行内公式选择符displayMath:[["$$","$$"],["\\[","\\]"],],//段内公式选择符},startup:{ready(){MathJax.startup.defaul
xsjCoding
·
2024-02-08 06:46
vue.js
前端
javascript
若依
vue3
单文件上传/多文件上传/前后台代码
个人记录,代码不完善见谅.多文件上传前端:constupload=reactive({//设置上传的请求头部headers:{Authorization:"Bearer"+getToken()},//上传的地址url:import.meta.env.VITE_APP_BASE_API+"/data/upload"});constfileList=ref([])/*文件提交*/constsubmit
xsjCoding
·
2024-02-08 06:46
vue.js
javascript
前端
Vue3
循环展示静态资源
加一个方法constgetImageUrl=(url)=>{returnnewURL(`/src/${url}`,import.meta.url).href;}展示的时候调用方法数组内的img属性,不能以"/"开头!!![{id:1,name:'111',description:``,img:'assets/indices/_rp_image_2024-01-24_440c98f0-ba8f-11
xsjCoding
·
2024-02-08 06:45
前端
javascript
vue.js
vue3
mathjax2.7.7 数学公式
1.index.html代码部分MathJax.Hub.Config({extensions:["tex2jax.js"],jax:["input/TeX","output/HTML-CSS"],tex2jax:{inlineMath:[["$","$"],["\\(","\\)"]]}});2.在需要使用数学公式的vue页面调用方法onMounted(()=>{setTimeout(MathJa
xsjCoding
·
2024-02-08 06:35
mathjax
Vue -
Vue3
封装组件(更新中...)
组件目录1、穿梭框DataTransfer2、按钮组3、顶部导航菜单4、弹窗组件5、特色按钮5、PDFWordExcel预览插件6、编辑器1、穿梭框DataTransfer示例应用示例组件代码import{ArrowLeft,ArrowRight,Search}from"@element-plus/icons-vue";import{computed,getCurrentInstance,onMo
青柠t
·
2024-02-08 06:39
笔记
前端
Vue-
Vue3
集成编辑器功能
1、安装依赖编辑器插件需要安装@wangeditor/editor和@wangeditor/editor-for-vue两个插件npminstall@wangeditor/editor--save
vue3
青柠t
·
2024-02-08 06:02
vue.js
编辑器
javascript
如何在
Vue3
使用 jsx & tsx
首先,恭喜一下React,再过4个月,就达成了两年无更新记录反观隔壁的Vue,稳定迭代更新之前写React的时候,最喜欢的是JSX/TSX语法,把HTML组件当做JavaScript/TypeScript代码片段处理constApp:React.FC=({title})=>{const[count,setCount]=useState(0);//return({title}Youclicked{c
楷鹏 : )
·
2024-02-08 05:10
react.js
javascript
ecmascript
vue
前端
Vue3
中使用element-plus菜单折叠后文字不消失
今天使用element-plus中国的导航菜单时,发现菜单栏折叠起来时文字不会自动消失,因为element-plus中内置了菜单折叠文字自动消失的,使用collapse=true/false即可,但在实际使用中出现了一下问题:折叠以后文字并没有消失,查资料说是el-menu子标签中不能含有div,但是排查了后也没有使用div,最后发现是因为我的一级导航没有包裹到标签中,因为是直接使用了一个简易的非
浮生若梦777
·
2024-02-08 05:57
vue.js
前端
elementui
[N-139]基于springboot,vue宠物领养系统
开发工具:IDEA服务器:Tomcat9.0,jdk1.8项目构建:maven数据库:mysql5.7系统分前后台,项目采用前后端分离前端技术:
vue3
+element-plus服务端技术:springboot
IT教程资源_
·
2024-02-08 02:02
javaweb毕设成品项目
开发工具
源码下载说明
spring
boot
vue.js
宠物
vue3
-内置组件-KeepAlive
KeepAlive是一个内置组件,它的功能是在多个组件间动态切换时缓存被移除的组件实例。基本使用默认情况下,一个组件实例在被替换掉后会被销毁。这会导致它丢失其中所有已变化的状态——当这个组件再一次被显示时,会创建一个只带有初始状态的新实例。在下面的例子中,你会看到两个有状态的组件——A有一个计数器,而B有一个通过v-model同步input框输入内容的文字展示。尝试先更改一下任意一个组件的状态,然
王大可996
·
2024-02-08 01:39
vue3
vue.js
前端
javascript
vue
vue3
- 15.keepAlive缓存组件
vue3
-keep-alive组件缓存首先keep-alive是
vue3
内置的组件,作用是对组件的数据进行缓存,这样可以优化性能,减少数据重新渲染或数据重新请求,提升用户体验我们新建两个组件,在每一个组件里面写一个
啦啦朵朵
·
2024-02-08 01:39
vue.js
前端
javascript
vue3
中的内置组件KeepAlive
是一个内置组件,它的功能是在多个组件间动态切换时缓存被移除的组件实例。注意:KeepAlive只应用于动态组件,静态组件不可以一、基本使用1、创建keepAlive的页面defineAsyncComponent的作用:在需要时从服务器加载相关组件markRaw作用:标记一个对象,使其永远不会再成为响应式对象应用场景:有些值不应被设置成响应式时,例如复杂的第三方类库等当渲染具有不可变数据源的大列表时
雁落成空
·
2024-02-08 01:39
vue3
详解与应用
前端
vue
elementui
vue3
:26—新的内置组件
目录TeleportSuspenseTeleport什么是Teleport?Teleport是一种能够将我们的组件html结构移动到指定位置的技术当在元素中的css使用了filter滤镜属性的时候,会导致内部fixed元素定位发生错误,即不再相对viewport进行定位,而是相对整个filter属性的容器元素(父元素)进行定位。这个时候就需要用到teleport了。我是一个弹窗我是弹窗中的一些内容
有蝉
·
2024-02-08 01:54
vue3
前端
vue.js
javascript
vue3
:27—全局API转移到应用对象
app.componentapp.configapp.directiveapp.mountapp.unmountapp.usemain.tsimport{createApp}from'vue'importAppfrom'./App.vue'importHellofrom'./Hello.vue'//创建应用constapp=createApp(App)//全局组件app.component('He
有蝉
·
2024-02-08 01:54
vue3
vue.js
前端
javascript
vue3
:28— Vue 2 对 Vue 3 的所有非兼容性改变。(
vue3
学习笔记终)
非兼容性改变|
Vue3
迁移指南过渡类名v-enter修改为v-enter-from、过渡类名v-leave修改为v-leave-from。keyCode作为v-on修饰符的支持。
有蝉
·
2024-02-08 01:54
vue3
vue.js
javascript
前端
vue3
:24—组件通信方式
目录1、props2、自定义事件(emit)3、mitt(任意组件的通讯)4、v-model【封装ui组件库用的多,平时用的少。和vue2有点不同】5、$attrs6、$refs和$parent7、provide和inject8、pinia(即vue2中的vuex)9、插槽默认插槽具名插槽作用域插槽(ui组件库用得多)10、总结1、props子组件也可以如下调用父组件的方法2、自定义事件(emit
有蝉
·
2024-02-08 01:23
vue3
前端
javascript
开发语言
Vue3
实现列表循环
今天小编和大家一起在Vue的路上探索,要实现的功能是这样的。现将默认数组内的渲染到页面上,然后点击按钮之后,将文本框内的数据添加到列表上,效果如下源码是这样的,下面我就结合代码中的注释来说明一下核心的代码Vue.createApp({data(){return{list:['item1','item2','item3','item4'],//绑定v-for循环的列表inputVal:""//绑定文
飞鹰3995
·
2024-02-08 00:52
Vue3.0
vue全局自适应大小: postcss-pxtorem,vue2
vue3
通用适配
1.安装postcss-pxtorem插件npminstallpostcss-pxtorem-D如果运行项目后报错PostCSSpluginpostcss-pxtoremrequiresPostCSS8.需要降低postcss-pxtorem的版本卸载默认安装的版本npmuninstallpostcss-pxtorem安装指定版本
[email protected]
番外:不推荐pos
佛係老李
·
2024-02-08 00:37
前端
vue.js
postcss
javascript
前端
Vue3
自定义PostCss插件
Vue3
自定义PostCss插件插件功能:实现自动转px为vw功能1.创建插件ts文件2.tsconfig.node.json引入插件3.vite.config.ts增加插件配置4.编写插件内容5.示例插件功能
*郑*
·
2024-02-08 00:06
前端
postcss
前端
javascript
text-generation-webui搭建大模型运行环境与
踩坑记
录
text-generation-webui搭建大模型运行环境text-generation-webui环境初始化准备模型启动项目Bug说明降低版本启动项目text-generation-webuitext-generation-webui是一个基于Gradio的LLMWebUI开源项目,可以利用其快速搭建部署各种大模型环境。环境初始化下载该开源项目gitclonehttps://github.co
CodeDevMaster
·
2024-02-07 23:01
人工智能
LLM
webui
llama
上一页
9
10
11
12
13
14
15
16
下一页
按字母分类:
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z
其他