草庐IT

Vue-Instant

全部标签

vue父子组件之间双向数据绑定的(vue2/vue3)

vue父子组件之间双向数据绑定的四种方法(vue2/vue3)vue考虑到组件的可维护性,是不允许子组件改变父组件传的props值的。父组件通过绑定属性的方式向子组件传值,而在子组件中可以通过$emit向父组件通信(第一种方式),通过这种间接的方式改变父组件的data,从而实现子组件改变props的值。第一种(原始,比较麻烦)//父组件来自子组件的数据:{{value}}data(){return{value:'父组件的数据'}},methods:{getChildData(v){this.value=v}}//子组件childexportdefault{props:{value:{type:

Vue3 + Vite3 + Element-Plus 管理系统

Vue3+Vite3+Element-Plus管理系统介绍📖vue-diverse-admin,基于Vue3、TypeScript、Vite3、Element-Plus开源的一套后台管理模板,项目均使用JS开发,但已经配置TS,可以JS、TS混用。目前功能还在持续更新中…您也可以删除其他直接使用Layout布局进行二次开发一、Git仓库地址(欢迎Star⭐)Gitee:https://gitee.com/lin_zi_quan/vue-diverse-adminGitHub:https://github.com/1164095457/vue-diverse-admin二、🔨🔨🔨项目功能🚀使用V

jQuery and Vue,.html()不起作用

我一直在玩Vue教程这里我添加了一个简单的jQuery.html函数。但是它不起作用。我添加了jQuery插件,并且控制台中没有错误。我的“应用程序”组件像这样定义:Helloimport*asstartfrom'./assets/scripts/start.js'exportdefault{name:'app',created:start.loadMainNavigation()}和我的LoadMainNavigation这样的功能:functionloadMainNavigation(){$('#mainMenu').html("ASERFDASRF");console.log("Inlo

基于Java+SpringBoot+Vue前后端分离在线远程考试系统设计和实现

博主介绍:✌全网粉丝30W+,csdn特邀作者、博客专家、CSDN新星计划导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌🍅文末获取源码联系🍅👇🏻 精彩专栏推荐订阅👇🏻 不然下次找不到哟2022-2024年最全的计算机软件毕业设计选题大全:1000个热门选题推荐✅Java项目精品实战案例《100套》Java微信小程序项目实战《100套》​系统介绍:信息数据从传统到当代,是一直在变革当中,突如其来的互联网让传统的信息管理看到了革命性的曙光,因为传统信息管理从时效性,还是安全性,还是可操作性等各个方面来讲,遇到了互联网时

vue3 toRefs详解

简介toRefs函数的作用是将响应式对象中的所有属性转换为单独的响应式数据,对象成为普通对象,并且值是关联的。在这个过程中toRefs会做以下两件事:把一个响应式对象转换成普通对象对该普通对象的每个属性都做一次ref操作,这样每个属性都是响应式的说明:reactive对象取出的所有属性值都是非响应式的,而利用toRefs可以将一个响应式reactive对象的所有原始属性转换为响应式的ref属性。reactive的响应式功能是赋值给对象,如果展开对象,会让数丢失响应的能力使用toRefs可以保证对象展开的每个属性都是响应式的应用场景:展开响应式对象时,想使用响应式对象中的多个或者所有属性做为响应

前端实现真实可动态变化进度条,axios+ Ant Design Vue实现.

最近有一个新需求,要求在前端实现真实的进度条展示,我首先想到了 AntDesignVue的upload组件,在antd官网里upload组件不仅有上传功能,并且还附带了Progress 进度条组件,还拥有上传成功和失败的两种状态的区分,可以说是十分贴心了,如图 但是很可惜这个组件上传文件的话,你要在action里面指定你上传的路径,他会通过change函数传递你选择的文件列表而后自动把这个文件拿到并且上传到你给的地址中去,(也就是说你只需要给一个后端地址,其余的你选择了文件他就会帮你上传的)代码如下所示,ClickordragfiletothisareatouploadSupportforas

vue样式穿透 ::v-deep的具体使用

这篇文章主要介绍了vue样式穿透::v-deep的具体使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧之前在项目中用到了elementUI,使用特别简单,而且组建也非常的丰富。即时这样,在项目中肯定也需要用额外的样式来打造自己的应用。直接在....中编写的话只会影响当前组件内的样式,但如果去掉scoped话又会影响全局样式。想了好多方法,都没得到很好的解决。最后呢,还是通过翻阅官方文档才解决的。其实官方文档早就给出了解决方案,怪自己没有认真看文档,对vue的掌握还是不够熟悉啊深度作用选择器如果你希望scoped样式中的一

Vue开发后台管理系统

一、项目介绍二、vue脚手架启动和基本配置2.1创建Vue-CLI项目在你要创建项目的文件夹下打开cmd命令框:在终端输入vuecreatexxxxxx为项目名称,如下图所示:回车选择 Manuallyselectfeatures 2.2 安装elementUI访问Element-UI官网根据文档提示安装elementUI插件​npmielement-ui-S如果上方命令安装不了出错,如下图所示:​ 有可能是npm的版本和elementUi不兼容,可以使用输入下面指令解决:npminstall--legacy-peer-depselement-ui--save​importVuefrom'vu

解决微信小程序数据渲染缓慢或卡顿的方法 (uniapp vue3)

在微信小程序中渲染数据时通常会使用setData方法,但是setData对数据是有影响的,单次设置的数据不能超过1024kB,否则就会出现卡顿甚至有时会导致小程序闪退等现象。而我们平时在实现业务时,一般会采取数据分页而防止大量数据渲染导致小程序白屏/卡顿,例如在一些商城平台需要滚动时切换菜单,也需要回显购物车数据的情况下,无法进行分页处理,我的方法是把从接口获取到的数据进行格式化处理后,进行递归调用(递归一次进行一次setDate从而不进行一次性渲染大量数据),代码如下:template> scroll-box> view> viewv-for="(item,index)intrut

【vue3+ts项目】配置eslint校验代码工具,eslint+prettier+stylelint

1、运行好后自动打开浏览器package.json中vite后面加上--open2、安装eslintnpmieslint-D3、运行eslint--init之后,回答一些问题,自动创建.eslintrc配置文件。npxeslint--init回答问题如下:使用eslint仅检查语法,还是检查语法及错误,选第二个使用的是什么模块,选第一个项目使用的是什么框架,选vue项目中使用TyoeScript,选yes项目运行在哪,选浏览器创建的配置类型需要什么类型的,选Javascript需要安装这些插件吗,检验ts语法,检验vue语法,选yes用什么包管理工具,我这里是npm安装完成项目中会多一个.es