草庐IT

Vue-Instant

全部标签

vue3+Ts+Echarts 使用

1、初始化使用npm安装echarts:npminstallecharts-S或cnpminstallecharts-S更改为cnpm淘宝镜像源下载2、为了减少体积和使用的便利,首先实现一个按需和全局的引入首先创建一个echarts.ts文件//引入echarts核心模块。import*asechartsfrom"echarts/core";/**引入柱状图and折线图图表,图表后缀都为Chart*/import{BarChart,LineChart}from"echarts/charts";//引入提示框,标题,直角坐标系,数据集,内置数据转换器组件import{TitleComponent

vue 使用AES 加密

AES加密的模式有两种:EBC,CBC(1)EBC是一种基础的加密方式,密文被分割成分组长度相等的块(不足补齐),然后单独一个个加密,一个个输出组成密文。(2)CBC是一种循环模式,前一个分组的密文和当前分组的明文异或或操作后再加密,这样做的目的是增强破解难度。(不容易主动攻击,安全性好于ECB,是SSL、IPSec的标准)1.安装cryptonpminstallcrypto-js--save-dev或者cnpminstallcrypto-js--save-dev2.vue中使用在src中utils工具文件夹中创建crypto.js下面展示一些crypto.js内联代码片。/***工具类*AE

Vue3+Element-Plus中的Tree组件,多选时的赋值与取值

el-tree是element-ui提供的一个树形组件,可以在Vue.js应用中使用。el-tree组件提供了getCheckedNodes方法,可以用来获取树形结构中被选中的节点。el-treeempty-text="无数据":props="{label:'name',value:'permId'}"node-key="permId":data="permList"ref="permListRef":default-checked-keys="defaultPermTreeSelect"show-checkbox>template#default="{node,data}">spanclas

vue项目,实现语音识别文字,前后端交互

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一、js-audio-recorder是什么?二、使用步骤1.引入库2.读入数据3,完整代码总结前言最近实现一个录音上传功能,并且识别语音转为汉字。一、js-audio-recorder是什么?js-audio-recorder是基于第三方的vue插件,实现录音,播放等功能。二、使用步骤1.引入库代码如下(示例):importVuefrom'vue'importAppfrom'./App.vue'importrouterfrom'./router'importstorefrom'./store'importElemen

vue全家桶进阶之路33:Vue3 计算属性computed

在Vue3中,计算属性可以使用computed函数来定义。computed函数接受两个参数:第一个参数是一个函数,该函数返回计算属性的值;第二个参数是一个可选的配置对象,可以包含getter和setter函数,以及控制计算属性缓存的缓存配置。Vue3中的计算属性与Vue2中的计算属性相比有以下几个变化:使用computed函数Vue3中使用computed函数来定义计算属性,而不是Vue2中使用computed属性。支持ref和reactive响应式对象Vue3中的计算属性不仅支持data对象上的响应式属性,还支持ref和reactive响应式对象。计算属性不再是组件选项Vue3中的计算属性不

vue全家桶进阶之路33:Vue3 计算属性computed

在Vue3中,计算属性可以使用computed函数来定义。computed函数接受两个参数:第一个参数是一个函数,该函数返回计算属性的值;第二个参数是一个可选的配置对象,可以包含getter和setter函数,以及控制计算属性缓存的缓存配置。Vue3中的计算属性与Vue2中的计算属性相比有以下几个变化:使用computed函数Vue3中使用computed函数来定义计算属性,而不是Vue2中使用computed属性。支持ref和reactive响应式对象Vue3中的计算属性不仅支持data对象上的响应式属性,还支持ref和reactive响应式对象。计算属性不再是组件选项Vue3中的计算属性不

vue3 antd项目实战——Form表单的提交与校验【v-model双向绑定input输入框、form表单数据,动态校验规则】

vue3antdesignvue项目实战——Form表单【v-model双向绑定数据实现form表单数据的提交】上期文章回顾【UI界面渲染】场景复现(源代码附在文章最后)实现需求1.表单数据及其类型的定义2.表单及各部分数据的双向绑定3.表单提交功能4.校验输入内容不为空5.不能反复提交逻辑源代码本文依旧沿用antdesignvue组件库和ts语言🔥🔥更多内容见AntDesignVue官方文档上期文章回顾【UI界面渲染】🔥🔥vue3antd项目实战——Form表单【后台管理系统v-model数据的双向绑定,input输入框、Radio单选框的嵌套使用】场景复现(源代码附在文章最后)在上期文章中

VUE实现当前页面刷新的七种方法

使用location.reload()方法进行页面刷新。        使用location.reload()方法可以简单地实现当前页面的刷新,这个方法会重新加载当前页面,类似于用户点击浏览器的刷新按钮。        在Vue中,可以将该方法绑定到Vue实例上,比如在Vue的methods中添加如下的方法:methods:{refresh(){location.reload();}}        然后在模板中调用该方法即可实现页面的刷新:刷新页面        需要注意的是,该方法会重新加载整个页面,如果想要对页面局部进行刷新,可以考虑使用Vue自身的一些特性,比如通过设置组件的key属性

基于Java+SpringBoot+vue前后端分离疫情下图书馆管理系统设计实现

博主介绍:✌全网粉丝30W+,csdn特邀作者、博客专家、CSDN新星计划导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌🍅文末获取源码联系🍅👇🏻 精彩专栏推荐订阅👇🏻 不然下次找不到哟2022-2024年最全的计算机软件毕业设计选题大全:1000个热门选题推荐✅Java项目精品实战案例《100套》Java微信小程序项目实战《100套》​系统介绍:随着信息技术在管理上越来越深入而广泛的应用,管理信息系统的实施在技术上已逐步成熟。本文介绍了疫情下图书馆管理系统的开发全过程。通过分析疫情下图书馆管理系统管理的不足,创建了

使用vue-video视频播放组件

vue-video视频播放组件安装main.js中注册组件中使用安装npminstallvue-video-playermain.js中注册在main.js中全局配置,其他组件中可调用require('video.js/dist/video-js.css');require('vue-video-player/src/custom-theme.css');importVideoPlayerfrom'vue-video-player'Vue.use(VideoPlayer);组件中使用使用分成四个步骤:通过import导入videoPlayer组件vue组件的script部分:import{vi