位置: IT常识 - 正文

Vue3 <script setup lang=“ts“> 使用指南(vue3 script setup withdefault)

编辑:rootadmin
Vue3 <script setup lang=“ts“> 使用指南

推荐整理分享Vue3 <script setup lang=“ts“> 使用指南(vue3 script setup withdefault),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue3 script setup 绑定值,vue3 script setup 生命周期,vue3 script setup name,vue3 script setup reactive,vue3 script setup 绑定值,vue3 script setup props,vue3 script setup props,vue3 script setup props,内容如对您有帮助,希望把文章链接给更多的朋友!

本文主要是讲解 <script setup> 与 TypeScript 的基本使用。

<script setup> 是什么?

Vue3 <script setup lang=“ts“> 使用指南(vue3 script setup withdefault)

<script setup> 是在单文件组件 (SFC) 中使用 composition api 的编译时语法糖。

本文写作时,vue 使用的 3.2.26 版本。

1.1. 发展历程

我们先看看 vue3 <script setup> 的发展历程:

Vue3 在早期版本( 3.0.0-beta.21 之前)中对 composition api 的支持,只能在组件选项 setup 函数中使用。<template><h1>{{ msg }}</h1><button type="button" @click="add">count is: {{ count }}</button><ComponentA /><ComponentB /></template><script>import { defineComponent, ref } from 'vue'import ComponentA from '@/components/ComponentA'import ComponentB from '@/components/ComponentB'export default defineComponent({name: 'HelloWorld',components: { ComponentA, ComponentB },props: {msg: String,},setup(props, ctx) {const count = ref(0)function add() {count.value++}// 使用return {} 把变量、方法暴露给模板return {count,add,}},})</script>

在 3.0.0-beta.21 版本中增加了 <script setup> 的实验特性。如果你使用了,会提示你 <script setup> 还处在实验特性阶段。

在 3.2.0 版本中移除 <script setup> 的实验状态,从此,宣告 <script setup> 正式转正使用,成为框架稳定的特性之一。

<script setup lang="ts">import { ref } from 'vue'import ComponentA from '@/components/ComponentA'import ComponentB from '@/components/ComponentB'defineProps<{ msg: string }>()const count = ref(0)function add() {count.value++}</script>x<template><h1>{{ msg }}</h1><button type="button" @click="add">count is: {{ count }}</button><ComponentA /><ComponentB /></template>1.2. 优势

与组件选项 setup 函数对比, <script setup> 的优点:

更少、更简洁的代码,不需要使用 return {} 暴露变量和方法了,使用组件时不需要主动注册了;更好的 Typescript 支持,使用纯 Typescript 
本文链接地址:https://www.jiuchutong.com/zhishi/300015.html 转载请保留说明!

上一篇:【Axure】Axure RP 9下载、安装、授权、汉化(axure rp 9视频教程)

下一篇:【Python】控制自己的手机摄像头拍照,并自动发送到邮箱(python自动控制)

  • 魅族18支持感应器类型有哪些(魅族18有没有压感)

    魅族18支持感应器类型有哪些(魅族18有没有压感)

  • 快手退款商家不处理到时间了会自动退款不(快手退款商家不回复怎么办)

    快手退款商家不处理到时间了会自动退款不(快手退款商家不回复怎么办)

  • 华为手机电池补电代码(华为手机电池补电号码)

    华为手机电池补电代码(华为手机电池补电号码)

  • 内存条会坏吗(热插拔内存条会坏吗)

    内存条会坏吗(热插拔内存条会坏吗)

  • 网络ac和ap是什么意思(网络ac+ap方案)

    网络ac和ap是什么意思(网络ac+ap方案)

  • qq下线通知是怎么回事

    qq下线通知是怎么回事

  • 小米手机铃声播放异常(小米手机铃声播放异常只能振动)

    小米手机铃声播放异常(小米手机铃声播放异常只能振动)

  • 群号在哪里看(如何查看群号码查询)

    群号在哪里看(如何查看群号码查询)

  • 微信能不能屏蔽一个人的消息(微信能不能屏蔽@所有人)

    微信能不能屏蔽一个人的消息(微信能不能屏蔽@所有人)

  • 华为手机怎么截取视频(华为手机怎么截取视频片段)

    华为手机怎么截取视频(华为手机怎么截取视频片段)

  • 华为手机挂件在哪里设置(华为手机挂件怎么调出来)

    华为手机挂件在哪里设置(华为手机挂件怎么调出来)

  • 手机qq2g在线有几种可能(手机qq2g在线能收到消息吗)

    手机qq2g在线有几种可能(手机qq2g在线能收到消息吗)

  • 华为p9plus有录屏功能吗(华为p9plus录屏不见了)

    华为p9plus有录屏功能吗(华为p9plus录屏不见了)

  • 钉钉可以看到学生手机屏幕吗(钉钉可以看到学生的脸吗)

    钉钉可以看到学生手机屏幕吗(钉钉可以看到学生的脸吗)

  • 淘宝收藏夹会被别人看到吗(淘宝收藏夹里面的东西为什么会失效)

    淘宝收藏夹会被别人看到吗(淘宝收藏夹里面的东西为什么会失效)

  • 荣耀9x收不到短信验证码(荣耀9x收不到短信是什么情况)

    荣耀9x收不到短信验证码(荣耀9x收不到短信是什么情况)

  • ups的中文名(ups的中文名是什么)

    ups的中文名(ups的中文名是什么)

  • 天猫魔屏怎么恢复出厂设置(天猫魔屏怎么恢复彩色)

    天猫魔屏怎么恢复出厂设置(天猫魔屏怎么恢复彩色)

  • i++和++i的区别(i--和--i的区别)

    i++和++i的区别(i--和--i的区别)

  • 华为p30如何关闭抬起唤醒(华为p30如何关闭后后运行程序)

    华为p30如何关闭抬起唤醒(华为p30如何关闭后后运行程序)

  • 操作系统在计算机系统中位于什么之间(操作系统在计算机与用户之间起的作用)

    操作系统在计算机系统中位于什么之间(操作系统在计算机与用户之间起的作用)

  • 怎么更新app版本(如何更新手机app版本)

    怎么更新app版本(如何更新手机app版本)

  • 监控能看清手机的字吗(监控能看清手机上的视频吗)

    监控能看清手机的字吗(监控能看清手机上的视频吗)

  • 手机通话时自动挂断是怎么回事(手机通话自动关机什么原因)

    手机通话时自动挂断是怎么回事(手机通话自动关机什么原因)

  • 累计百分比excel公式(累计百分比和百分比有什么区别)

    累计百分比excel公式(累计百分比和百分比有什么区别)

  • 基于Vue3和element-plus实现一个完整的登录功能(vue结合elementui)

    基于Vue3和element-plus实现一个完整的登录功能(vue结合elementui)

  • (pytorch进阶之路)IDDPM之diffusion实现(pytorch教程)

    (pytorch进阶之路)IDDPM之diffusion实现(pytorch教程)

  • 保理公司发放贷款
  • 期初和期末余额均在借方的账户,一般属于
  • 盘盈的固定资产怎么做账务处理
  • 营业税金及附加借贷方向
  • 职工伤残补助金被单位扣留违反什么法
  • 收到办公用品的普票怎么入账
  • 房地产成本核算会计分录
  • 支付劳务收入怎么做账
  • 当月认证的发票可以当月抵扣吗
  • 小规模纳税人提供设计服务税率
  • 实收资本的印花税减半征收吗
  • 201金8税盘抵扣期限是多久?
  • 汽修厂的财务怎样做账
  • 退税发票勾选后增值税附表二
  • 未弥补完亏损可以计提盈余公积
  • 未开票收入如何确认
  • 每月物业费怎么计算公式
  • 技术服务费增值税申报表填写
  • 工程储备的材料是存货吗
  • 2020年餐饮行业免税政策
  • 库存商品进货价怎么算
  • 个人所得汇算清缴是什么
  • 已签收的电子银行承兑汇票截图给别人有风险吗
  • mac 双系统如何调整系统空间
  • 公转私用途最好写借款
  • 税务登记证遗失补办
  • 如何取消网络拦截
  • 按简易办法征收增值税的行为有
  • 累计折旧额怎么计算公式
  • 企业的支出包括
  • php strrchr
  • 总分账与明细账关系
  • 商住房买卖过户流程
  • 计入当期损益的利得分录
  • 银行转账手续费最高多少钱
  • 施工单位老板
  • css3知识总结
  • Ajax PHP JavaScript MySQL实现简易无刷新在线聊天室
  • php floatval
  • 质保金企业所得税纳税时间
  • 报销差旅费用什么发票
  • element表格表单
  • 开票服务名称可以自己添加吗
  • 企业资产评估后多久上市
  • sqlserver控制台
  • 保险公司给员工奖励是违法的吗
  • 合同资产和合同负债的区别
  • 哪些票据属于会计票据
  • 专家评审费如何入账
  • 以前年度损益调整会计分录
  • 结转收入及成本费用
  • 租赁行业的增值税率
  • 多交了社保
  • 企业收到免税发票怎么办
  • 小规模纳税人采用简易计税方法征收增值税
  • 利息收入是不是企业的收入
  • 理财中的非保本是什么意思
  • 培训费产生的差额怎么算
  • 资本公积可用于弥补企业亏损
  • 长期应付款涉及哪些业务,应如何进行核算
  • sql server多行添加
  • 如何在苹果电脑上下载软件
  • win10系统电脑无限重启
  • xp 更新
  • win10wifi打开后自动关闭
  • win7系统删除密码
  • 游戏unity报错
  • css样式表可以兼容所有浏览器吗
  • dos的for用法
  • linux查看端口占用情况并杀掉进程
  • vue购物车功能
  • 安卓用什么抓包
  • javascript面向对象吗
  • python二叉树的遍历算法
  • python基于django的项目
  • 在本地买车怎么上外地牌照
  • 2021河南省中考英语听力音频
  • 天津住房公积金管理中心官网
  • 地税是什么税种
  • 古代怎样征兵
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设