vue3+ts写法,vue3中使用ts
这篇文章主要介绍了Vue3项目中引用分时(同分时)语法的实例讲解,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
目录
基础语法vue-routervuex # # # # # elementPlusaxiossetup脚本
基础语法
定义data
//脚本标签上**lang=ts**
脚本语言
从“vue”导入{ defineComponent,reactive,ref,tore fs }。
//定义一个类型类型或者接口连接来约束数据
类型Todo={
id:数字,
名称:字符串,
已完成:布尔型
}
导出默认定义组件({
//使用反应的时,可以用托雷夫斯解构导出,在模板就可以直接使用了
常数数据=反应({
todoList: []作为待办事项[]
})
//可以使用裁判员或者托雷夫斯来定义响应式数据
const count=ref(0);
//使用裁判员在设置读取的时候需要获取xxx.value,但在模板中不需要
console.log(计数。值)
返回{
.参考(数据)
}
})
/脚本
定义props
从“vue”导入{ defineComponent,prop type };
界面UserInfo={
id:数字,
名称:字符串,
年龄:数量
}
导出默认定义组件({
//道具需要使用属性类型泛型来约束。
道具:{
用户信息:{
类型:PropTypeUserInfo形式的对象,//泛型类型
必填:真
}
},
})
定义methods
从“vue”导入{ defineComponent,reactive,ref,tore fs }。
类型Todo={
id:数字,
名称:字符串,
已完成:布尔型
}
导出默认定义组件({
常数数据=反应({
todoList: []作为待办事项[]
})
//约束输入和输出类型
const newTodo=(name:string):Todo={
返回{
id: this.items.length 1
姓名,
已完成:假
};
}
const add Todo=(Todo:Todo):void={
data.todoList.push(todo)
}
返回{
.toRefs(数据),
纽多,
addTodo
}
})
vue-router
从" vue路由器"导入{ createRouter,createWebHistory,RouteRecordRaw }。
从以下位置导入主页./views/home。vue ;
//路线的约束类型是RouteRecordRaw
const routes:Array RouteRecordRaw=[
{
路径:"/",
姓名:家,
成分:家,
},
{
路径:"/关于",
名称:"关于",
component:()=import(/* webpackChunkName: about */./观点/关于。vue’)
}
];
//创建路由器创建路由器实例
const router=createRouter({
//路由器的模式分为
//createWebHistory - history模式
//createWebHashHistory - hash模式
history:createWebHistory(进程。环境。base _ URL),
路线
});
导出默认路由器;
扩展路由额外属性
//联合类型
//在实际项目开发中,常常会遇到这么一个场景
//某一个路由是不需要渲染到侧边栏导航上的
//此时我们可以给该路由添加一个隐藏的属性来实现。
//在分时(同分时)的强类型约束下,添加额外属性就会报错,那么我们就需要扩展RouteRecordRaw类型。
键入route config=RouteRecordRaw { hidden?布尔};//隐藏是可选属性
常量路由:ArrayRouteConfig=[
{
路径:"/",
姓名:家,
成分:家,
隐藏:真实,
元:{
许可:真的,
图标:""
}
}
];
在setup中使用
//需要导入用户外部创建一个路由器实例。
从" vue路由器"导入{用户外部};
从“vue”导入{定义组件};
导出默认定义组件({
setup () {
const router=user outer();
戈罗特(路径){
router.push({path})
}
}
})
vuex#####
使用this.$store
从" vuex "导入{ createStore };
导出类型状态={
计数:数量
}
导出默认的createStore({
状态:{
计数:0
}
});
需要创建一个声明文件vuex。d . t从“vue”导入{ ComponentCustomProperties };
从" vuex "导入{ Store };
从导入{州} ./商店
声明模块" @ vue/runtime-core"{
接口组件自定义属性{
$store: StoreState
}
}
在setup中使用
定义来自“vue”的injecktionkey导入{注入键};
从" vuex "导入{ createStore,Store }。
导出类型状态={
计数:数量
}
//创建一个注入键
export const key:InjectionKeyStoreState=Symbol( key );
在安装插件时传入key//main.ts
从导入存储区{ key } ./store ;
app.use(store,key);
在使用使用商店时传入从" vuex "导入{使用商店};
从" @/商店"导入{ key };
导出默认定义组件({
setup () {
const store=use store(key);
const count=computed(()=store。状态。计数);
返回{
数数
}
}
})
模块
新增一个待办事项模块。导入的模块,需要是一个状态管理中的接口模件的对象,接收两个泛型约束第一个是该模块类型从" vuex "导入{模块};
从导入{州}./index。ts’;
类型Todo={
id:数字,
名称:字符串,
已完成:布尔型
}
const initialState={
待办事项:[]作为待办事项[]
};
导出类型为dostate=初始状态的类型;
导出默认值{
命名空间:对,
状态:初始状态,
突变:{
addTodo (state,payload: Todo) {
state.todos.push(有效载荷);
}
}
} as ModuleTodoState,State//模块,R S该模块类型稀有根模块类型
第二个是根模块类型//index.ts
导出类型状态={
计数:数量,
托多?TodoState //这里必须是可选,不然状态会报错
}
导出默认的createStore({
状态:{
计数:0
}
模块:{
待办事项
}
});
使用:setup () {
console.log(store.state.todo?todos);
}
elementPlus
纱线添加元素-还有
完整引入
从“vue”导入{ createApp }
从“元素加”导入ElementPlus导入“元素-加/库/主题-粉笔/索引。CSS”;从导入应用程序. 1/app。vue ;
导入 dayjs/locale/zh-cn
从" element-plus/lib/locale/lang/zh-cn "导入区域设置
const app=createApp(App)
app.use(ElementPlus,{ size: small ,zIndex: 3000,locale })
app。装载(应用数量)
按需加载
需要安装巴别塔插件组件插件:安装依赖包纱线添加巴别塔-插件-组件-D
加入配置//babel.config.js
插件:[
[
成分,
{
库名:元素加,
样式库名称:"主题-粉笔"
}
]
]
创建元素组件文件导入“元素-加/库/主题-粉笔/索引。CSS”;
导入”日js/locale/zh-cn”;
从" element-plus/lib/locale "导入区域设置;
从" element-plus/lib/locale/lang/zh-cn "导入郎;
导入{
埃拉赛德,
按钮,
ElButtonGroup,
}来自元素加;
常量组件:any[]=[
埃拉赛德,
按钮,
ElButtonGroup,
];
常量插件:any[]=[
加载中,
电子邮件,
ElMessageBox,
高架铁道通知
];
const element=(app: any):any={
//国际化
区域设置。用(郎);
//全局配置
app。配置。全局属性。$ ELEMENT={ size: small };
components.forEach(component={
app.component(组件名,组件);
});
plugins.forEach(plugin={
app.use(插件);
});
};
导出默认元素;
引用于项目//main.ts
从导入元素 0 . 0/插件/元素
const App=create App(应用程序);
元素(app);
axios
爱可信的安装使用和vue2上没有什么大的区别,如果需要做一些扩展属性,还是需要声明一个新的类型type Config=AxiosRequestConfig {成功通知?boolean,errorNotice?布尔}
从" axios "导入axios,{ AxiosResponse,AxiosRequestConfig }。
从“元素加”导入{ El消息};
const instance=axios.create({
基本URL:进程。环境。vue _ APP _ API _ BASE _ URL ,
超时:120 * 1000,
withCredentials: true
});
//错误处理
常量错误=(错误)={
如果(错误。消息。包括(超时){
电子邮件({
消息: 请求超时,请刷新网页重试,
类型:"错误"
});
}
if (error.response) {
常量数据=错误。回应。数据;
如果(错误。回应。状态===403){
电子邮件({
消息:"禁止",
类型:"错误"
});
}
如果(错误。回应。状态===401){
电子邮件({
消息:"未授权",
类型:"错误"
});
}
}
返回承诺。拒绝(错误);
};
type Config=AxiosRequestConfig {成功通知?boolean,errorNotice?布尔}
//请求拦截
实例。截击机。请求。使用((Config:Config)={
配置。headers[ Access-Token ]=本地存储。getitem( Token ) ;
返回配置;
},err);
//响应拦截
实例。截击机。回应。使用((response:axios response)={
const配置:Config=response。配置;
常量代码=数字(回应。数据。状态);
如果(代码===200) {
如果(配置配置。成功通知){
电子邮件({
消息:response.data.msg,
类型:"成功"
});
}
返回响应.数据
}否则{
let errCode=[402,403];
if(errcode。包括(响应。数据。代码)){
电子邮件({
消息:response.data.msg,
类型:"警告"
});
}
}
},err);
导出默认实例;
setup script
官方提供了一个实验性的写法,直接在脚本里面写设置的内容,即:安装脚本。之前我们写组件是这样的:模板
差异
{{count}}
ImgReview/ImgReview
/div
/模板
脚本语言
从“vue”导入{ ref,定义组件};
从导入ImgReview ./组件/img审查。vue ;
导出默认定义组件({
组件:{
ImgReview,
},
setup() {
const count=ref(0);
返回{ count };
}
});
/脚本
启用安装脚本后:在脚本上加上设置模板
差异
{{count}}
ImgReview/ImgReview
/div
/模板
脚本语言设置
从“vue”导入{ ref };
从导入ImgReview ./组件/img审查。vue ;
const count=ref(0);
/脚本
是不是看起来简洁了很多,组件直接导入就行了,不用注册组件,数据定义了就可以用。其实我们可以简单的理解为脚本包括的内容就是设置中的,并做了返回.导出方法
常量句柄click=(type:string)={
console.log(类型);
}
定义props
使用小道具需要用到定义方案来定义,具体用法跟之前的小道具写法类似:基础用法从“vue”导入{定义道具};
const props=define props([ userInfo , gameId ]);
构造函数进行检查给小道具定义类型:const props=defineProps({
gameId:数字,
用户信息:{
类型:对象,
必填:真
}
});
使用类型注解进行检查定义方案{
名称:字符串
电话号码:号码
用户信息:对象
标签:字符串[]
}()
可以先定义好类型:界面用户信息{
id:数字,
名称:字符串,
年龄:数量
}
定义方案{
名称:字符串
用户信息:用户信息
}()
defineEmit
从“vue”导入{定义发出};
//期望发出选项
const emit=defineEmit([kk , up ]);
const handleClick=()={
发出(‘kk’,’点了我);
};
Comp @kk=handleClick/
脚本语言设置
const handleClick=(data)={
console.log(数据)
}
/脚本
获取上下文
在标准组件写法里,设置函数默认支持两个入参:
在安装脚本中使用使用上下文获取上下文:从“vue”导入{ useContext }
const { slots,attrs }=use context();
获取到的插槽,属性跟设置里面的是一样的。以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。
郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。