vue3使用typescript,Typescript vue
本文主要详细介绍Vue3.0 TypeScript Vite的初体验。通过示例代码详细介绍，对大家的学习或工作有一定的参考价值。有需要的朋友下面跟边肖学习。
目录
项目创建项目结构main . jsapp . vue:setup composition API react vecomputerdwatch效果组件系统全局注册本地注册setuppscontextemitattrsslotsvue指令v-model
项目创建
npm:
$ npm init vite-app项目名称
$ cd项目-名称
$ npm安装
$ npm运行开发
或纱线：
$ yarn create vite-app项目名称
$ cd项目-名称
$纱线
$纱线开发
项目结构
main.js
个人认为createApp()是vue应用的一个实例，createApp支持链式调用。
App.vue：
这是与vue2.0兼容的语法，下面是vue3.0 rfc(还在实验阶段)。
Rfc官方说明
setup
数据
Setup是vue2.0创建的生命周期函数、数据和方法(后面会提到)的组合。
可直接导出的属性(数据)和方法(方法)
可见现在的名字是没有反应的，后面会介绍。
方法
方法与数据相同，直接导出
效果：
Composition API
ref
声明：
Ref可以把一些基本属性变成响应。
reactive
上图是reactive和ref的混合使用。至于效果，请复制下面的代码体验。
模板
div id=应用程序
state.persons中的div v-for=(item，index ):key= index
{{ item.name }}已经{{ item.age }}岁了。
/div
差异
H3修改张三的年龄/h3
输入类型=text v-model=zAge /
/div
/div
/模板
脚本lang=ts setup=props，{emit}
从“vue”导入{ reactive，ref }
export const zAge=ref(12)
导出常量状态=反应({
人员：[
{
姓名：张三，
年龄：扎格
},
{
姓名： lisi ，
年龄：20岁
}
]
})
/脚本
computed
声明：
效果：
watchEffect
声明：
效果：
组件系统
全局注册
App.vue
主页. js
局部注册
App.vue
setup
props
声明道具对象。在watchEffect中，console.log(props.msg)是可以从父组件中看到的值。道具的默认值和过滤正在研究中。具体动作见vue2.0道具。
context
组件上下文
emit
声明emit函数，在setup=props，{emit} 中写emit，否则报错。具体功能参见vue2.0发射功能。
这些是使用emit函数的一些示例。
attrs
学习中…
slots
学习中…
vue指令
重点是v-model，其他vue说明同2.0。
v-model
Vue3.0开始支持双向绑定的多参数，这是vue2.0没有的，如果v-model之后没有其他属性，那么它的默认值就是这个组件内的modelValue。如果要更新v-model，需要emit(update:modelValue ，data)来更新v-model的默认值。然后，如果v-model后面有一个属性(dragValue)，那么它的值就是这个组件内部的这个属性名(dragValue)。如果要更新v-model:dragValue的值，需要emit(update:dragValue ，data)来更新v-model的自定义值。
更多用法请参考官方文档：https://github . com/vue js/rfcs/blob/sfc-improvements/active-rfcs/0000-sfc-script-setup . MD。
关于Vue3.0 TypeScript Vite初体验的这篇文章到此为止。关于Vue3.0 TypeScript Vite的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。