这里写目录标题
元素
HTMLButtonElement
获取操作对象
<button @click=“handleClick” name=“button_name”>Click
const handleClick = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
console.log(event.target);
console.log(event.currentTarget.name);
};
或者
<button @click='event=>{console.log(event.currentTarget)}' name="button_name">Click</button>
<button @click='event=>{console.log(event.target)}' name="button_name">Click</button>
日期
格式化日期
const testCases = [
new Date().toLocaleDateString(), // 8/19/2020
new Date().toLocaleString(undefined,
{
year: 'numeric', month: '2-digit', day: '2-digit',
weekday:"long", hour: '2-digit', hour12: false,
minute:'2-digit', second:'2-digit'}), // 'Wednesday, 14/06/2023, 13:43:57'
new Date().toLocaleDateString('en-US',
{
year: 'numeric', month: '2-digit', day: '2-digit'}),
// 08/19/2020 (month and day with two digits)
new Date().toLocaleDateString('en-ZA'),
// 2020/08/19 (year/month/day) notice the different locale
new Date().toLocaleDateString('en-CA'),
// 2020-08-19 (year-month-day) notice the different locale
new Date().toLocaleString("en-US", {
timeZone: "America/New_York"}),
// 8/19/2020, 9:29:51 AM. (date and time in a specific timezone)
new Date().toLocaleString("en-US",
{
hour: '2-digit', hour12: false, timeZone: "America/New_York"}),
// 09 (just the hour)
]
内部变量和外部变量
const allMenu = ref([] as MenuItem[])
或者
export function useMenu() {
const allMenu = ref([] as MenuItem[])
}
在function 结束后useMenu就失效了，即使return出去，也没有数据为null。
定义数组，并初始化
const topMenu1: MenuItem[] = ref([])
const topMenu2 = ref([] as MenuItem[])
const topMenu3 = ref<MenuItem[]>()
是否初始化的区别
不通过{} 进行初始化，就不可以使用，所以定义变量最好养成初始化的习惯
const pageRequest = ref<PageRequest>({
})
与
const pageRequest = ref<PageRequest>()
不可以使用
pageRequest.value.pageNum = 1
定义数据结构时？的作用
如果定义的数据结构每个值是必填项，或者定义成非必填项(?)，在使用时是不同的。
必填项 必须逐个赋值，即使初始化也要逐一赋值为空
如果都是非必填项，直接通过{} 直接赋值，简单
export interface RoleItem {
roleId?: number
roleCode?: string
}
//rest query form
roleRequest.value = {
}
与
export interface RoleItem {
roleId: number
roleCode: string
}
初始化的形式
//rest query form
roleRequest.value.roleName = ''
roleRequest.value.roleDesc = ''
reqByCondition() 和 reqByCondition 的区别
在TS 中
reqByCondition 不会运行
reqByCondition() 会运行
捕获键盘回车键
const keyDown=(e) => {
if (e.keyCode == 13 || e.keyCode == 100) {
onSubmit()
}
}
onMounted(() => {
window.addEventListener('keydown',keyDown)
})
onUnmounted(() => {
window.removeEventListener('keydown',keyDown,false)
})
throw new Error
throw new Error(“Get data error”) 是在浏览器的Console中显示错误信息。
在浏览器中调试Json
定义类型
定义数组
// 用于初始化空列表
userList: [] as UserInfo[],
// 用于尚未加载的数据
user: null as UserInfo | null,
function
Named function
function add(x: number, y: number): number {
return x + y;
}
anonymous function
let myAdd = function (x: number, y: number): number {
return x + y;
};
Axios
经典片段
const ax = axios.create({
baseURL: 'yourbaseUrl',
withCredentials: true,
});
const loginUser = () => {
const body ={
username:state.values.email, password:state.values.password};
ax.post('/login',body).then(function(response){
return response}).then().catch(error => console.log(error));}
错误及解决
ref value
ref是一个对象，必须通过value才能使用
const onSubmit = async () => {
await saveOrUpdate(form)
}
修正后
const onSubmit = async () => {
await saveOrUpdate(form.value)
}
because it is a constant
Cannot assign to 'menuArr' because it is a constant.
const menuArr = ref([] as MenuItem[])
menuArr = data.content
因为 ref 定义的时一个 constant 常量，赋值的时候是对常量的值进行赋值，而不是常量。
menuArr.value = data.content
API 和 客户端定义的数据结构不一样
错误信息，并不是服务器端没有返回数据，而是双方的数据结果不同导致不能赋值。
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'data')
Server
export type UserResponse = {
success: string
code: number
message: string
content: {
id?: number
userName?: string
userPasswd?: string
userFirstName?: string
}
}
Client
export interface UserProfile {
id?: number
userName?: string
userPasswd?: string