位置: 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自动控制)

  • ppt怎么画直线(ppt怎么画直线加粗)

    ppt怎么画直线(ppt怎么画直线加粗)

  • 为啥手机发信息失败(为啥手机发信息,等会才显示送达)

    为啥手机发信息失败(为啥手机发信息,等会才显示送达)

  • 从文件管理删除的视频和图片怎样才能恢复(从文件管理删除的照片是永久删除吗)

    从文件管理删除的视频和图片怎样才能恢复(从文件管理删除的照片是永久删除吗)

  • 小米手机桌面下面的搜索栏怎么关闭(小米手机桌面下面三个按键怎么设置)

    小米手机桌面下面的搜索栏怎么关闭(小米手机桌面下面三个按键怎么设置)

  • 手机qq情侣空间打不开(手机QQ情侣空间进不去)

    手机qq情侣空间打不开(手机QQ情侣空间进不去)

  • 荣耀8X怎么设置深色模式(荣耀8X怎么设置高清通话)

    荣耀8X怎么设置深色模式(荣耀8X怎么设置高清通话)

  • 微信把我拉黑了怎么给他发信息(前女友微信把我拉黑了)

    微信把我拉黑了怎么给他发信息(前女友微信把我拉黑了)

  • qq群里的匿名能查出是谁吗(qq群里的匿名能撤回吗)

    qq群里的匿名能查出是谁吗(qq群里的匿名能撤回吗)

  • vivo手机看视频模糊怎么解决(vivo手机看视频自动旋转)

    vivo手机看视频模糊怎么解决(vivo手机看视频自动旋转)

  • 爱思修改定位会被检测吗(爱思修改定位会泄露吗)

    爱思修改定位会被检测吗(爱思修改定位会泄露吗)

  • 小爱同学无法语音唤醒(小爱同学无法语音唤醒如何解决?)

    小爱同学无法语音唤醒(小爱同学无法语音唤醒如何解决?)

  • ipad能设置使用时间吗(ipad设置使用时长到时间后怎么样才开)

    ipad能设置使用时间吗(ipad设置使用时长到时间后怎么样才开)

  • xs屏幕刷新率(xs屏幕刷新率比8p屏幕刷新率)

    xs屏幕刷新率(xs屏幕刷新率比8p屏幕刷新率)

  • qq删好友怎么多选(qq删好友怎么一次多删)

    qq删好友怎么多选(qq删好友怎么一次多删)

  • us sprint是美国哪个运营商(us species)

    us sprint是美国哪个运营商(us species)

  • 电脑照片怎么多选(电脑照片怎么多选打印)

    电脑照片怎么多选(电脑照片怎么多选打印)

  • 苹果11pro有指纹解锁吗(苹果11pro有指纹支付吗)

    苹果11pro有指纹解锁吗(苹果11pro有指纹支付吗)

  • wps怎么查找多个关键字(wps怎么查找多个数据)

    wps怎么查找多个关键字(wps怎么查找多个数据)

  • 3e测手环能测心率吗(华为3e手环能测心率吗)

    3e测手环能测心率吗(华为3e手环能测心率吗)

  • wlan和wifi的区别(wlan和wifi的区别ipad哪个好)

    wlan和wifi的区别(wlan和wifi的区别ipad哪个好)

  • 计算机常用函数公式(计算机常用函数公式名称和功能)

    计算机常用函数公式(计算机常用函数公式名称和功能)

  • 淘宝如何进行7天无理由退换货(淘宝如何进行7天退货)

    淘宝如何进行7天无理由退换货(淘宝如何进行7天退货)

  • 操作系统的基本功能(操作系统的基本概念)

    操作系统的基本功能(操作系统的基本概念)

  • 帝国cms信息归档是什么意思(帝国cms移动端)

    帝国cms信息归档是什么意思(帝国cms移动端)

  • 计提工资时个税怎么处理
  • 运输发票税率是9
  • 对公跨行转账汇款(非柜面)手续费单笔 9折
  • 增值税纳税申报时间
  • 年利润100万要交多少企业所得税
  • 管理费用劳保费属于
  • 小微企业增值税优惠政策最新2023
  • 公司固定资产丢失谁负责
  • 扶持资金属于政府补助吗
  • 员工证书补贴标准
  • 移动板房的税法是多少
  • 网上认证增值税专用发票步骤图解
  • 支付土地出让金怎样做账
  • 企业买卖股票应注意事项
  • 公司购买地下停车位如何入账
  • 向投资者分配现金股利会计分录?
  • linux怎么使用命令
  • 实收资本怎么用
  • 业务招待费扣除基数的收入包括哪些
  • 单位价值5000元二手设备怎么算
  • 冲减预交的增值税税率
  • smss.exe是干嘛的
  • 个人销售自己使用过的物品免征增值税
  • php字符串定义
  • PHP:Memcached::getDelayed()的用法_Memcached类
  • kernl32.dll
  • 购入固定资产入账价值包括增值税吗
  • 业务实际发生没得取得发票怎么做账
  • 北极光下的众神图片
  • laravel注入
  • 用抵扣券买了东西可以退吗
  • 报销钱大写数字
  • 猿厂猿作设计机构招聘
  • php用mysql连接数据库并查询
  • php怎么上传图片并保存到数据库
  • 企业会计准则季度怎么填
  • 《visual c++游戏编程基础》
  • 新注册的小公司要登记社保吗
  • 什么是会计确认的基础
  • 债券发行费用包括
  • 当月认证的发票可以撤销吗
  • 帝国cms什么语言
  • 织梦cms不更新了吗
  • 固定资产以什么资金形态存在
  • 企业所得税报表查询怎么查
  • 应交税金科目的核算
  • 先付款后签协议是否违法
  • 高速公路通行费可以抵扣进项税吗
  • 工会的会费收入是什么
  • 带有折扣的增值税专用发票图片
  • 个贷系统平账专户怎么做账
  • 无形资产未取得发票
  • 投资性房地产的定义
  • 客户付了订金后能退吗
  • 现金支付的范围包括
  • 给对方承兑对方不承认怎么办
  • 月初计提工资,月中发放
  • 预期信用损失影响损益吗
  • 新办企业是不是企业
  • mysql详细教程
  • 怎么在电脑上设置快捷图标
  • 微软windows 10
  • windows7如何设置
  • 繁体软件在简体运行
  • Win10 Mobile RS2预览版14951升级遭遇卡在0%的解决办法
  • WFXMOD32.EXE - WFXMOD32是什么进程
  • windows10mode
  • win8账户锁定无法登录
  • unity预处理命令
  • c/s模式的例子
  • python错误代码
  • shell终端是什么意思
  • Unity for Absolute Beginners(二)
  • 高通 trinket
  • jquery中的children
  • 国家税务局网发票查验
  • 国家税务总局令16号公告
  • 上海手撕发票多少钱一本
  • 什么叫做免抵税额
  • 云南2021高考改革
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设