Vite+Vue3学习笔记（2）——语法、渲染、事件、数据传递、生命周期、第三方库、前端部署

官网链接：https://cn.vuejs.org/

在这里插入图片描述

如果出现普通用户无法新建项目，必须要管理员身份新建，那么可以在nodejs的安装路径设置安全选项，提高普通用户的权限。
具体方法参考：

https://blog.csdn.net/weixin_43174650/article/details/121865934

0 基本标签

标签功能
template模板
div块
h1~h6标题
p文字
header头部
main主体
button按钮
img图片
canvas画布
ul无序列表
ol有序列表
li列表项目，用在ul和ol中
input输入文本框
textarea文本区域
select下拉选择框

1 模板语法

首先来看一下项目的结构，src下存放了需要我们关注的文件。

  • assets下包含了静态资源，包括图片和公共的css文件。
  • components下存放vue的组件。
  • App.vue是根组件。
  • main.js是主入口文件。

在这里插入图片描述

1.2 文本

数据绑定，形成能改变的动态文字。使用双花括号{{ }}插入文字。

<template><p>{{ message }}</p>
</template><script>export default {data() {return {message:"学习Vue"}}}
</script>

1.3 链接

双花括号会将数据解释为普通文本，而不是HTML代码。为了输出真正的HTML代码，需要使用v-html代码。

<template><div>{{rawHtml}}</div><div v-html="rawHtml"></div>
</template><script>export default {data() {return {rawHtml:"<a href='https://www.baidu.com'>百度搜索</a>"}}}
</script>

在这里插入图片描述

1.4 属性（attribute）

位于尖角括号内的<*** class="text" width="100px" height="200px">，为标签的属性。

要让属性（class或id）成为能按照js改变的属性，需要使用v-bind指令。

<template><div v-bind:id="dynamicID"></div>
</template><script>
export default{data(){return{dynamicID:10001,}}
</script>

注意：v-bind:可以简写为:。

1.5 表达式

只能单行表达式！
赋值语句不可以，if表达式也不可以。

<template><p>输入：{{ num }}，输出：{{ num + 10 }}</p><p>{{ flag ? "真":"假" }}</p>
</template><script>export default{data(){return{flag : true,num:10,}}}
</script>

在这里插入图片描述

2 渲染方式

2.1 条件渲染：v-if和v-else

使用变量flag的true和false来控制是否渲染此对象。v-if后面可以紧跟着v-else来表达另外一种选择时的渲染对象。

<template><p v-if="flag">Hello World!</p><p v-else>I am Jonathan!</p>
</template><script>export default{data(){return{flag : true,}}}
</script>

2.2 v-show

只能控制一个，要么显示要么不显示。

<template><p v-show="flag">Hello World!</p>
</template><script>export default{data(){return{flag : true,}}}
</script>

两者的区别：
v-if是真正的条件渲染，没有被渲染的会背销毁，重新渲染的会重建。是惰性的，有更高的切换开销。
v-show只是显示不显示的问题，所有都被渲染，有最高的初始渲染那开销。

2.3 列表渲染：v-for

把一个数组映射为一组元素，然后渲染。
维护模式，添加:key="id"确定一个唯一的标识，以便后期渲染时，只渲染新增的元素，以节约渲染开销。

<template><ul><li v-for="news in newslist" :key="news.id">{{ news.title }}</li></ul>
</template><script>export default{data(){return{newslist:[{id:1001,title:"今日新闻1"},{id:1002,title:"今日新闻2"},{id:1003,title:"今日新闻3"},{id:1004,title:"今日新闻4"},}}}
</script>

在这里里插入图片描述

3 事件处理

3.1 监听事件：v-on或@

使用v-on或者@来监听DOM事件，并在触发事件时执行一些Javascript。用法为：v-on:lick="methodName"或者使用快捷方式@click="methodName"。

3.1.1简单事件处理

直接在click事件中添加变量自增。

<template><button @click="counter += 1">点击增加counter值：{{ counter }}</button>
</template><script>export default{data(){return{counter:0,}}}
</script>

在这里插入图片描述

3.1.2 事件处理方法

如果事件处理逻辑较为复杂，则v-on接收一个需要调用的方法（函数）名称。

<template><button @click="clickHandle">点击弹出对话框</button>
</template><script>export default{methods:{clickHandle(){alert("只因你太美！");},}}
</script>

在这里插入图片描述

3.1.3 获取、修改页面信息

获取页面中的数据需要使用this.来指定对象。
event时间内有较多参数，也可以修改。

<template><p>{{ message }}</p><button @click="changeText">撤回消息</button>
</template><script>export default{data(){return{message:"消息通知",}},methods:{changeText(event){// 在时间中，读取data中的属性，是需要通过this.属性this.message = "消息被撤回了。";console.log(event);   //event为原生DOM eventevent.target.innerText = "无新消息";},}}
</script>

在这里插入图片描述

3.1.4 事件传递参数

click可以传递参数到js内。
1、点击按钮传递参数：

<template><p>----------------</p><button @click="sendParam('hi')">send hi</button><button @click="sendParam('bye')">send bye</button>
</template><script>
export default{methods:{sendParam(data){console.log(data);},}
}
</script>

点击按钮可以发现参数传递成功，调试输出了对应文本。

在这里插入图片描述
2、点击文本/列表传递参数

<template><ul><li @click="clickItemHandler(name)" v-for="(name,index) in namelist" :key="index">{{ name }}</li></ul>
</template><script>
export default{data(){return{namelist:['owen','john','frank'],}},methods:{clickItemHandler(name_param){console.log(name_param)},}
}
</script>

点击无序列表的各个项目，可以发现下方调试面板输出了对应的name。

在这里插入图片描述

4 表单输入绑定

4.1 数据绑定v-model

可以使用v-model指令在表单<input>、<textarea>、<select>元素上穿件双向数据绑定，该指令会根据控件类型自动选取正确的方法来更新元素。
<input>为输入文本框，只有左半个标签，无</input>。

<template><input type="text" v-model="username"><input type="text" v-model="password"><button @click="logIn">登录</button>
</template><script>
export default{data(){return{username:'',password:'',}},methods:{logIn(){console.log('username:' + this.username + ' ,password:' + this.password);console.log();},}
}
</script>

输入用户名和密码，点击登录，可以看到调试界面出现对应数据。
在这里插入图片描述

4.2 修饰符

4.2.1 lazy

在默认情况下，v-model在每次input事件触发后将输入框的值与数据进行同步。如果添加lazy修饰符，将会转化为在change事件之后进行同步（比如输入回车、鼠标点击其他位置）。

<template><input type="text" v-model.lazy="username"><input type="text" v-model="password"><p>{{ username }},{{ password }}</p>
</template><script>
export default{data(){return{username:'',password:'',}},
}
</script>

输入两个文本框，可以发现下方文字不同的输出效果。
在这里插入图片描述

4.2.2 trim

自动过滤用户输入的首尾空白字符。

<template><input type="text" v-model.trim="textBox"><p>{{ textBox }}</p>
</template><script>
export default{data(){return{textBox:'',}},
}
</script>

前后的空格都被过滤，中间的空格没有过滤。
在这里插入图片描述

5 组件基础

5.1 单文件组件

Vue单文件组件，文件后缀是.vue，是一种特殊的文件格式，运行将Vue组件的模板、逻辑与样式封装在单个文件中。

  • template：模板部分，相当于html
  • script：逻辑部分，相当于js。规范编程的话需要在export default内指定组件的name。
  • style：样式部分，相当于css。如果添加scoped，则表示当前样式只在该组件内部生效，外部不生效。
//文件名：MyComponent.vue
<template><h1>单文件组件</h1>
</template><script>
export default{name:"MyComponent"
}
</script><style scoped>
h1{color:red;
}
</style>

5.2 加载组件

（1）<script>内引入组件：import MyComponent from './components/MyComponent.vue'
（2）<script>内挂载组件：components: { MyComponent }
（3）<template>内显示组件：<MyComponent />或<my-component />

注意：<script setup> </script>可以在<template>之前，如果这样的话，就不用第二步挂载组件了，但引入其他组件时，export default会报错。

在根组件App.vue内引用MyComponent.vue：

<script setup>
import HelloWorld from './components/HelloWorld.vue';
import TheWelcome from './components/TheWelcome.vue';
</script><template><header><img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" /><div class="wrapper"><MyComponent />		//此处显示组件<HelloWorld /></div></header><main><TheWelcome /></main>
</template><script>		// 此处引入组件，挂载组件
import MyComponent from './components/MyComponent.vue';
export default{components:{MyComponent}
}
</script>

在这里插入图片描述

5.3 组件组织关系

通常一个应用会以一棵嵌套的组件树的形式来组织。
在这里插入图片描述

6 样式style

<template class="styleName"> </template>中class能够引用样式。
在<style>中能够使用的样式种类：

名称功能
border设置边框（线性、宽度、颜色、圆角）
width宽度
height高度
color字体颜色
background背景（颜色、图片、位置）
font字型（字体、字号、加粗、斜体）
text文本（居中、行高、溢出内容处理）
margin外边距（上下左右）
padding内边距

参考网址：https://www.jianshu.com/p/ee736030239b

7 Props的组件交互

组件之间的数据存在交互，有传递数据的方式。

7.1 正向数据传递

prop是可以在组件上注册一些自定义的属性（attribute）。可以从父组件传递到子组件。

prop可以传递的类型：

名称Typedefault
字符串String“”
数字Number0，任何数字
布尔类型Booleantrue或者false
数组Arrayfunction() { return [] }
对象Objectfunction() { return [] }
函数Function

数组和对象必须使用函数进行返回

  • 传出内容的模板需要：
<MyComponent :param1_in="param1" :param2_in="param2"/>
  • 传入的模板需要：
props:{param1_in:{type:String,default:"",},param2_in:{type:Number,default:0,}
}

完整交互过程如下：

//App.vue
<template><img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" /><div class="wrapper"><MyComponent :titleMC="title" :yearMC="year" :monthMC="month"/>	//此处传入的是内容<HelloWorld/><TheWelcome /></div></template><script>
import HelloWorld from './components/HelloWorld.vue';
import TheWelcome from './components/TheWelcome.vue';
import MyComponent from './components/MyComponent.vue';
export default{name:'App',data(){return{title:'我是一个标题',		//此处定义传入数据year:2023,}},components:{HelloWorld,TheWelcome,MyComponent}
}
</script>

注意：

  • 不加:传递的是固定的字符串，<MyComponent title="title"/>。
  • 加:传递的是内容<MyComponent :title="title"/>。
//MyComponent.vue
<template><h1>单文件组件</h1><h3>prop传递数据</h3><p>{{ titleMC }}</p>		//传入数据显示<p>{{ yearMC }}</p><ul><li v-for="(item,index) in monthMC" :key="index">{{ item }}</li></ul>
</template><script>
export default{name:"MyComponent",props:{						//props固定格式titleMC:{				//传入的变量名type:String,		//传入的数据类型default:"未传入值的情况下的默认值",		//默认值},yearMC:{type:Number,default:1997,},monthMC:{type:Array,default:function(){return []}}},
}
</script>

在这里插入图片描述

7.2 自定义事件组件交互——反向传递数据

自定义事件可以在组件中反向传递数据，用$emit实现。
在子组件和父组件中需要构建两个methods：

  • 子组件在触发事件后的函数内使用this.$emit传递eventName和需要传递的数据。
  • 父组件监听eventName，并接入一个新函数来处理这个事件。

子组件示例：

// MyComponent.vue
<template><button @click="sendClickHandle">点击反向传递</button>
</template><script>
export default{name:"MyComponent",data(){return{message:"我是MyComponent数据",}},methods:{sendClickHandle(){// 参数1：字符串，自定义事件，参数2：传递的数据this.$emit("onEvent",this.message);console.log("mycomponent.vue下 " + this.message);}}
}
</script>

父组件示例：

// App.vue
<template><MyComponent @onEvent="getDataHandle"/><p>{{ recvData }}</p>
</template><script>
import MyComponent from './components/MyComponent.vue';
export default{name:'App',data(){return{recvData:'null',}},components:{MyComponent},methods:{getDataHandle(data){this.recvData = data;console.log("app.vue下 " + this.recvData);}}
}
</script>

注意：<script>内给变量赋值或调用需要使用this.，<template>内不需要使用this.。

在这里插入图片描述

8 生命周期

每个组件在被创建时都要经过一系列的初始化过程。例如，需要设置数据监听、编译模板、将实例挂载到DOM，并在数据变化时更新DOM等。同时在这个过程中也会运行一些叫做生命周期钩子的函数。这给了用户在不同阶段添加自己代码的机会。
自动化调用，无需手动写。

生命周期名称功能
beforeCreate创建前
created创建时
beforeMount渲染前
mounted渲染时网络请求放在此函数内
beforeUpdate更新前
updated更新时
beforeUnmount卸载前卸载消耗性能的处理
uomunted卸载时
<template><p>---------------------------</p><h3>生命周期函数</h3><p>年龄：{{ lifetime }}</p><button @click="lifetime ++">点击改变</button>
</template><script>
export default{name:"MyComponent",data(){return{lifetime:0,}},beforeCreate(){console.log("beforeCreate");},created(){console.log("created");},beforeMount(){console.log("beforeMount")},mounted(){console.log("mounted")// 把网络请求放到这里},beforeUpdate(){console.log("beforeUpdate")},updated(){console.log("updated")},beforeUnmount(){console.log("beforeUnmount")// 卸载之前，把消耗性能的处理都干掉，比如定时器},unmounted(){console.log("unmounted")}
}

可以在调试窗口看到生命周期函数按照顺序执行。
在这里插入图片描述

9 Vue引入第三方

9.1 轮播图——Swpier

Swpier是触摸滑动插件，纯js打造的，面向手机、平板电脑等移动终端。
官方文档：

https://swiperjs.com/vue

1、首先下载Swiper，命令行内输入：

npm install --save swiper

2、添加Swiper、Pagination（页码）和Autoplay（自动轮播），实现多张图片自动轮播。

<template><div><swiper :modules="modules" :pagination="{clickable:true}" :autoplay="{autoplay: true, delay: 3000}"><swiper-slide><img src="../assets/1.jpeg" alt=""></swiper-slide><swiper-slide><img src="../assets/3.jpeg" alt=""></swiper-slide><swiper-slide><img src="../assets/6.jpeg" alt=""></swiper-slide></swiper></div>
</template><script>import {Pagination, Autoplay} from 'swiper/modules';import {Swiper,SwiperSlide} from 'swiper/vue';import 'swiper/css';import 'swiper/css/pagination';import 'swiper/css/autoplay';export default{name:"helloworld",components:{Swiper,SwiperSlide,},data(){return{modules:[Pagination,Autoplay]}},}
</script><style scoped>
img{width:100%
}
</style>

三张图片能够以3秒间隔循环播放。
在这里插入图片描述

9.2 Axios网络请求库

Axios是基于promise的网络请求库。

1、安装：

npm intall --save axios

2、引入：

import axios from ‘axios’

<template><div><p>res_data:{{ res_data }}</p><p>error_data:{{ error_data }}</p></div>
</template><script>
import axios from 'axios';export default{name:'TheWelcome',data(){return{res_data:'',error_data:'',}},mounted(){console.log("mounted");// 网络请求axios({method:'get',url:'http://iwenwiki.com/api/blueberrypai/getChengpinDetails.php',// 使用http可以连接，使用https无法连接}).then(res =>{console.log(res.data);this.res_data = res.data;}).catch(error =>{console.log(error.data);this.error_data = error.data;})}
}
</script>

连接HTTP正常，连接HTTPS可能会出现跨域问题，暂时不知道怎么解决。

在这里插入图片描述

10 局域网内打开网页

首先找到文件夹下的package.json文件，将"dev":"vite"修改为"dev": "vite --host 0.0.0.0"。
在这里插入图片描述

重新启动服务器，然后就可以看到调试窗口内出现了新的网址，在局域网内输入该网址就可以打开该网页。

在这里插入图片描述
手机上显示网页。

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/584345.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

CSS 缩减中心动画

CSS 缩减中心动画

<template><!-- mouseenter"startAnimation" 表示在鼠标进入元素时触发 startAnimation 方法。mouseleave"stopAnimation" 表示在鼠标离开元素时触发 stopAnimation 方法。 --><!-- 容器元素 --><div class"container" mou…
阅读更多...
Python教程(18)——python文件操作详解

Python教程(18)——python文件操作详解

Python文件操作 Python文件操作基础操作使用with语句管理文件处理文件操作的异常处理文件路径 文本格式和二进制格式文本格式 (Text Mode)二进制格式 (Binary Mode)例子说明 文件操作的相关函数 所谓的文件操作是指对计算机中的文件进行读取、写入、修改和删除等操作。简单来说…
阅读更多...
超赞的进度条控件

超赞的进度条控件

© 2012 Conmajia, 2011 Graham Wilson SN: 125.2 本文为 CodeProject 2011 年 4 月号最佳 C# 文章获奖作品。本中文版翻译已获原作者 Graham Wilson 首肯。 简介 本文介绍一款有趣的进度条控件&#xff08;ProgressBar&#xff09;。如下演示&#xff0c;这款名为“超赞进…
阅读更多...
毫米波雷达：从 3D 走向 4D

毫米波雷达：从 3D 走向 4D

1 毫米波雷达已广泛应用于汽车 ADAS 系统 汽车智能驾驶需要感知层、决策层、执行层三大核心系统的高效配合&#xff0c;其中感知层通过传感器探知周围的环境。汽车智能驾驶感知层将真实世界的视觉、物理、事件等信息转变成数字信号&#xff0c;为车辆了解周边环境、制定驾驶操…
阅读更多...
基于OpenAI的Whisper构建的高效语音识别模型：faster-whisper

基于OpenAI的Whisper构建的高效语音识别模型：faster-whisper

1 faster-whisper介绍 faster-whisper是基于OpenAI的Whisper模型的高效实现&#xff0c;它利用CTranslate2&#xff0c;一个专为Transformer模型设计的快速推理引擎。这种实现不仅提高了语音识别的速度&#xff0c;还优化了内存使用效率。faster-whisper的核心优势在于其能够在…
阅读更多...
DCDC--电感的选择和影响

DCDC--电感的选择和影响

1、感值L的影响 1.1、纹波Ripple的影响&#xff1a;感值越大&#xff0c;纹波越小 1.2、负载瞬态响应Load Transient的影响&#xff1a;感值越大&#xff0c;负载瞬态响应越差 2、直流电阻DCR的影响 2.1、效率Efficiency的影响 相同型号&#xff0c;感值越大&#xff0c;DC…
阅读更多...
浅学Vue3

浅学Vue3

安装 vue项目 npm init vuelatest 回车装包 npm install 路由 安装 Router npm install vue-router4 -S项目根目录新建 router --> index.js vue2中 index.jsimport Vue from vue; import VueRouter from vue-router; import Home from ../views/Home.vue;Vue.use(V…
阅读更多...
2023年度总结：技术旅程的杨帆远航⛵

2023年度总结：技术旅程的杨帆远航⛵

文章目录 职业规划与心灵成长 ❤️‍&#x1f525;我的最大收获与成长 &#x1f4aa;新年Flag &#x1f6a9;我的技术发展规划 ⌛对技术行业的深度思考 &#x1f914;祝愿 &#x1f307; 2023 年对我来说是一个充实而令人难以忘怀的一年。这一年&#xff0c;我在CSDN上发表了 1…
阅读更多...
Arduino驱动VL6180X光学测距传感器（OLED显示）

Arduino驱动VL6180X光学测距传感器（OLED显示）

Arduino驱动VL6180X光学测距传感器&#xff08;OLED显示&#xff09; 简介原理模块参数接线图代码结果 简介 VL6108X三合一光电模块&#xff0c;芯片内集成了IR VSEL(vertical-cavity surface-emitting laser)红外垂直腔面发射激光器光源、接近传感器、环境光传感器&#xff0…
阅读更多...
Windows搭建RTMP视频流服务（Nginx服务器版）

Windows搭建RTMP视频流服务（Nginx服务器版）

文章目录 引言1、安装FFmpeg2、安装Nginx服务器3、实现本地视频推流服务4、使用VLC或PotPlayer可视化播放器播放视频5、RTSP / RTMP系列文章 引言 RTSP和RTMP视频流的区别 RTSP &#xff08;Real-Time Streaming Protocol&#xff09;实时流媒体协议。 RTSP定义流格式&#xff…
阅读更多...
2023总结与展望--Empirefree

2023总结与展望--Empirefree

今年一篇博客都没写过了&#xff0c;好像完全在忙在工作和生活上面了&#xff0c;珍惜自我&#xff0c;保持热情&#xff0c;2024对我好点 文章目录 &#x1f525;1. 年终总结1.1.学习工作计划1.2. 生活计划1.3 个人总结 &#x1f525;2. 未来展望 &#x1f525;1. 年终总结 1…
阅读更多...
MySQL函数、AVG | MIN | MAX | COUNT | SUM、慢查询

MySQL函数、AVG | MIN | MAX | COUNT | SUM、慢查询

MySQL函数、慢查询 1、函数1.日期函数2.两个日期的时间差3.查询距离时间的间隔时间4.常用的字符串函数5.常用的数学函数6.常用的聚合函数 2、慢查询1.什么是慢查询&#xff1f; 从需求出发&#xff0c;在数据的操作过程中经常会有以下的问题&#xff1b;求和、最大值、最小值、…
阅读更多...
未来十年，量子计算将改变物流行业

未来十年，量子计算将改变物流行业

近年来&#xff0c;供应链和物流行业面临的挑战越来越多&#xff0c;从劳动力短缺到无法预测的天气以及供需变化&#xff0c;都使物流行业变得更加复杂。 因此&#xff0c;现在急需一种不同的方法来解决这些挑战&#xff0c;优化单个功能或整个业务的传统方法已无法应对这些困…
阅读更多...
Mysql使用Mybatis进行时间操作

Mysql使用Mybatis进行时间操作

MySQL中支持以下日期时间类型&#xff1a; DATE&#xff1a;存储年月日&#xff08;例如&#xff1a;2023-04-05&#xff09;。范围从"1000-01-01"到"9999-12-31" TIME&#xff1a;存储时分秒&#xff08;例如&#xff1a;11:22:22&#xff09;。范围从&q…
阅读更多...
Authing 分级管理员重磅上线，实现权限超细粒度分级管

Authing 分级管理员重磅上线，实现权限超细粒度分级管

数字化时代企业的现代化建设日益重要&#xff0c;身份权限管理系统的数字化变革已经成为企业数字化转型的核心要素之一&#xff0c;同时也对身份权限管理的“最后一公里”提出了更高的要求。管理员作为关键人员&#xff0c;往往掌握整个企业的数据核心访问权限&#xff0c;需要…
阅读更多...
Seata AT TM-＞RC-＞RM一次完整的交互过程

Seata AT TM-＞RC-＞RM一次完整的交互过程

原理 TM两阶段&#xff1a; 阶段1&#xff1a;TM向TC申请全局事务&#xff0c;netty客户端发起了一次记录xid的请求 阶段2&#xff1a;TC协调之后&#xff0c;决定执行RM是否提交或者回滚。 spring公共组件部分 1、SeataAutoConfiguration类加载 利用springboot自动装配机…
阅读更多...
js实现前端下载图片和文件资料

js实现前端下载图片和文件资料

说明&#xff1a;下载图片和文档资料是两种不同的方式&#xff0c;所以需要先判断下载的是图片还是word&#xff0c;excel等文件资料 目录 1.文件资料下载&#xff1a; 2.图片资源下载 1.文件资料下载&#xff1a; window.location.href 文件路径; handleClick(item) {let…
阅读更多...
如何使用Spoofy检测目标域名是否存在欺骗攻击风险

如何使用Spoofy检测目标域名是否存在欺骗攻击风险

关于Spoofy Spoofy是一款功能强大的域名安全检测工具&#xff0c;在该工具的帮助下&#xff0c;广大研究人员可以轻松检测单个目标域名或域名列表中的域名是否存在遭受欺诈攻击的风险。 该工具基于纯Python开发&#xff0c;可以根据SPF和DMARC记录来检测和判断目标域名是否可…
阅读更多...
C++ 类和对象 （上）

C++ 类和对象 （上）

类的引入&#xff1a; 由于C语言是面向过程的编程语言&#xff0c;我们在完成一件事的时候通常习惯将一件事拆分成一个一个小过程来实现&#xff0c;而到了C就习惯将一件事分成不同的模块&#xff0c;交给不同的对象来处理&#xff0c;每一个对象中承载着数据类型和函数。 &am…
阅读更多...
Jackson进行Json反序列化对于一个小写字母开头后跟大写字母无法识别反序列成功问题

Jackson进行Json反序列化对于一个小写字母开头后跟大写字母无法识别反序列成功问题

问题描述 json数据&#xff1a;{“pTargetId”:“123”} javaBean&#xff1a; Datapublic static class Test {private String pTargetId;}运行下面代码&#xff1a; public static void main(String[] args) throws JsonProcessingException {String json "{\"pT…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023