vue3+ts写法,vue3中使用ts

  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的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

留言与评论(共有 条评论)
   
验证码: