基于Vue3.x+VantUI的多功能记账本（四）文章目录基于Vue3.x+VantUI的多功能记账本（四）项目演示1、登录注册页面2、图片验证码3、修改axios4、写到最后（附源码）系列内容参考链接基于Vue3.x+VantUI的多功能记账本（一）项目演示，涉及知识点基于Vue3.x+VantUI的多功能记账本（二）搭建开发环境基于Vue3.x+VantUI的多功能记账本（三）开发导航栏及公共部分项目演示Vue3+VantUI_多功能记账本1、登录注册页面页面设计，页面跳转Login.vuetemplate>!--根据页面显示相应头部-->Header:title="type=='logi
哪天的问题来着...嘶...(挠头)...之所以会卡在这里，是因为在我的经验及认知里，封装组件中props的使用，接参时从来都是一个参数对应一个值，尤其是在ts中，还更为严格地设定了参数类型，所以我的业务需求不知道怎么实现了(这段话讲的比较乱，不知道怎么描述更合适，还是直接上图吧...)如图为vue3封装组件中，props接参大部分的写法展示 在上图中，如果你参数的type设置为boolean，那你就无法传入其他类型的值，比如说string或者number等等。但我的业务场景是，需要设置一个参数，平时用不上，只有传入参数的时候才起作用最开始我是这样写的(如图)：但是紧接着就发现，默认是要它不显
哪天的问题来着...嘶...(挠头)...之所以会卡在这里，是因为在我的经验及认知里，封装组件中props的使用，接参时从来都是一个参数对应一个值，尤其是在ts中，还更为严格地设定了参数类型，所以我的业务需求不知道怎么实现了(这段话讲的比较乱，不知道怎么描述更合适，还是直接上图吧...)如图为vue3封装组件中，props接参大部分的写法展示 在上图中，如果你参数的type设置为boolean，那你就无法传入其他类型的值，比如说string或者number等等。但我的业务场景是，需要设置一个参数，平时用不上，只有传入参数的时候才起作用最开始我是这样写的(如图)：但是紧接着就发现，默认是要它不显
Props声明1、字符串数组声明propsconstprops=defineProps(["cat"])console.log(props.cat) 2.对象实现propsconstprops=defineProps({cat:string})//可以在模板中直接使用cat变量{{cat}}你还可以使用类型标注,这是ts的特性。constprops=defineProps()//或者使用接口interfaceanimal{cat?:string}constprops=defineProps()3、使用camelCase（小驼峰命名法），可以在模板中直接使用(如第一个例子)。看代码defineP
一、通过ref获取子组件的值或方法父组件：pane-accountref="accountRef">/pane-account>scriptlang="ts"setup> import{ref}from'vue'; importPaneAccountfrom'./pane-account.vue'; constaccountRef=refInstanceTypetypeofPaneAccount>>(); constloginAction=()=>{ //父组件获取子组件ref值 accountRef.value?.accountLoginAction(); };/script>子组件：s
免责声明:我知道Vue.js中有数据竞价。所以我有这个:newVue({el:'#app',data:{info:'',},methods:{update:function(event){value=event.target.value;this.info=value;console.log(value);}}});每次用户输入内容时都会触发名为update的方法的输入。这里的想法是用用户在输入中键入的值更改名为info的数据属性的值。但是，出于某种原因，数据属性的值没有改变。每次update方法被触发时，当前输入值通过console.log(value)调用正常打印在控制台中，但in
免责声明:我知道Vue.js中有数据竞价。所以我有这个:newVue({el:'#app',data:{info:'',},methods:{update:function(event){value=event.target.value;this.info=value;console.log(value);}}});每次用户输入内容时都会触发名为update的方法的输入。这里的想法是用用户在输入中键入的值更改名为info的数据属性的值。但是，出于某种原因，数据属性的值没有改变。每次update方法被触发时，当前输入值通过console.log(value)调用正常打印在控制台中，但in
项目场景：将vue项目打包部署到nginx上面运行问题描述问题一：运行时页面白屏。问题二：页面可以正常显示，当刷新页面的时候页面报404错误。原因分析：页面白屏分析：我们可以先查看一下nginx下的logs/error.log日志文件，确定我的问题是因为项目打包时候路劲配置问题。页面404分析：我们在将vue项目打包部署时，地址栏的地址只是vue的路由，并不是真正的文件目录地址。所有的路由都是依赖于SPA单页应用的index.html，所以当我们在刷新时，按照地址栏的地址，找不到对应的文件，就产生404。解决方案：页面白屏解决：配置vue项目根目录下的vue.config.js文件，代码如下：
目录前言一、准备工作二、实现过程1.后端2.前端前言编译器：vscode、idea、mysql5.7技术：springboot+mybatis+mysql+lombok+vue实现内容：实现前后端数据交互。实现效果：一、准备工作因为vue和springboot是前后端分离的，所以在开始交互前首先需要解决跨域问题，可以在前端做也可以在后端加配置类，这里我是在后端加的CORS策略配置类。@Configurationpublicclasscors{@BeanpublicWebMvcConfigurercorsConfigurer(){returnnewWebMvcConfigurer(){@Over
学习准备：要求note.js是15.0以上版本，熟练cmd命令框命令创建项目命令：npminitvue@latest项目名字：小写英文项目安装：npm/cnpminstall运行项目：npmrundev文件内容：一、模版语法Vue使用一种基于HTML的模板语法，使我们能够声明式地将其组件实例的数据绑定到呈现的DOM上。所有的Vue模版都是语法层面合法的HTML,可以被符合规范的浏览器和HTML解析器解析！{{}}插值表达式当中只能是单一表达式！验证如下：//正确案例练习题1{{statement}}{{number}}{{ok?'yes':'no'}}//先通过空字符串split进行切割mes
