Vue3开发相关笔记

最新推荐文章于 2024-08-20 11:29:48 发布

_小郑有点困了

最新推荐文章于 2024-08-20 11:29:48 发布

阅读量76

点赞数

分类专栏： vue3.x 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_44706619/article/details/130379853

版权

vue3.x 专栏收录该内容

3 篇文章 2 订阅

订阅专栏

这篇笔记探讨了Vue3的路由配置，包括如何设置hash和history模式，并提到了路由穿透工具SwitchHosts的使用。同时，讨论了在TypeScript环境下，如何对vue3 reactive的数组和对象内部数组进行赋值，以及vue3表单校验和ref的使用注意事项。

摘要由CSDN通过智能技术生成

vue3设置路由hash模式

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
const router = createRouter({
history: createWebHashHistory(),
routes
})

vue3设置路由history模式

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
const router = createRouter({
history: createWebHistory(),
routes
})
// vue.config.js需要配置
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
}) 
module.exports = {
publicPath:'./',
devServer: {
		// history模式下的url会请求到服务器端，但是服务器端并没有这一个资源文件，就会返回404，所以需要配置这一项
		historyApiFallback: true
	}
}

穿透工具 https://github.com/oldj/SwitchHosts/releases/tag/v4.1.2

vue3 reactive定义数组或者对象内部的数组在ts下如何赋值？

const data = reactive({
  list: [] as any[] // 属性需要做类型断言处理
});
data.list.push(sclist);//success

vue3表单校验

import type { FormInstance, FormRules } from 'element-plus'
const ruleFormRef = ref<FormInstance>()
return {ruleFormRef}

submitForm(submitForm)

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })
}

vue3试用ref获取元素(注意不要有v-if)

<video ref="videoRef" :src="realFileUrl" preload></video>
videoRef需要return出去
return{
	videoRef,
}
 const videoRef = ref()
 const playVideo = ()=>{
     console.log('是的',videoRef)
     videoRef.value.play()
 }