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

  • 戴尔笔记本的引导方式和分区表是什么(戴尔笔记本引导设置)

    戴尔笔记本的引导方式和分区表是什么(戴尔笔记本引导设置)

  • 华为荣耀v30黑白模式怎么关闭(华为荣耀v30黑白屏怎么办)

    华为荣耀v30黑白模式怎么关闭(华为荣耀v30黑白屏怎么办)

  • 怎么看群里退出的人(怎么看群里退出的群聊)

    怎么看群里退出的人(怎么看群里退出的群聊)

  • 显卡风扇不转电脑无信号(显卡风扇不转电脑黑屏键盘亮)

    显卡风扇不转电脑无信号(显卡风扇不转电脑黑屏键盘亮)

  • 苹果无法购买腾讯会员(苹果无法购买腾讯游戏)

    苹果无法购买腾讯会员(苹果无法购买腾讯游戏)

  • 开了勿扰模式电话还能打进来(开了勿扰模式电话能看见记录嘛)

    开了勿扰模式电话还能打进来(开了勿扰模式电话能看见记录嘛)

  • 网络下行和上行什么意思(网络下行和上行哪个好)

    网络下行和上行什么意思(网络下行和上行哪个好)

  • vlookup精确匹配是0还是1(vlookup精确匹配公式)

    vlookup精确匹配是0还是1(vlookup精确匹配公式)

  • 华为p40有无线充电功能吗(华为p50e可以无线充电吗)

    华为p40有无线充电功能吗(华为p50e可以无线充电吗)

  • 手机刷机后微信聊天记录能不能恢复出来(手机刷机后微信聊天记录还有吗)

    手机刷机后微信聊天记录能不能恢复出来(手机刷机后微信聊天记录还有吗)

  • ipad网易云皮肤怎么换(ipad版的网易云不可以弄皮肤?)

    ipad网易云皮肤怎么换(ipad版的网易云不可以弄皮肤?)

  • 华为mate9pro怎么强制关机(华为mate9pro怎么取卡)

    华为mate9pro怎么强制关机(华为mate9pro怎么取卡)

  • 趣步注销不了有啥后果(趣步账号注销了怎么恢复正常)

    趣步注销不了有啥后果(趣步账号注销了怎么恢复正常)

  • 华为灭屏显示怎么设置(华为灭屏显示怎么设置照片)

    华为灭屏显示怎么设置(华为灭屏显示怎么设置照片)

  • 云收藏怎么用(云收藏文件怎么保存到相册)

    云收藏怎么用(云收藏文件怎么保存到相册)

  • 淘宝洋淘秀怎么关闭评论(淘宝洋淘秀怎么关闭)

    淘宝洋淘秀怎么关闭评论(淘宝洋淘秀怎么关闭)

  • iphone如何滚动长截屏(iphone滚动截长屏)

    iphone如何滚动长截屏(iphone滚动截长屏)

  • 手机qq视频怎么瘦脸(手机qq视频怎么录屏不让对方知道)

    手机qq视频怎么瘦脸(手机qq视频怎么录屏不让对方知道)

  • 手机卡坏了异地能补吗(手机卡坏了异地怎么补卡)

    手机卡坏了异地能补吗(手机卡坏了异地怎么补卡)

  • 特征提取技术包括哪些(特征提取技术工作原理)

    特征提取技术包括哪些(特征提取技术工作原理)

  • nex3屏幕比例(nex3s屏占比)

    nex3屏幕比例(nex3s屏占比)

  • 微信公众号缓存怎么清理(微信公众号缓存多久自动清理)

    微信公众号缓存怎么清理(微信公众号缓存多久自动清理)

  • 小米6x多少克(小米6x多少厘米机身)

    小米6x多少克(小米6x多少厘米机身)

  • Linn of Quoich瀑布旁的碗状岩石洞,苏格兰阿伯丁郡 (© AWL Images/Danita Delimont)(fall 瀑布)

    Linn of Quoich瀑布旁的碗状岩石洞,苏格兰阿伯丁郡 (© AWL Images/Danita Delimont)(fall 瀑布)

  • phpcms后台如何修改(phpcms怎么修改模板风格)

    phpcms后台如何修改(phpcms怎么修改模板风格)

  • 售后回租和融资租赁账务处理
  • 应付职工薪酬明细账模板
  • 个人所得税6月底没有退怎办
  • 非贸税务备案
  • 应缴国库款和应交税款
  • 废料账务处理
  • 代开工资收服务费怎么做凭证?
  • 贴现费用计算公式
  • 家电公司销售电器赠送小礼品如何做账?
  • 工资代扣款项是什么意思
  • 活动板房增值税税率
  • 住宿费增值税怎么算
  • 车船税提高了吗
  • 电费冲销是什么意思
  • 购入原材料没有发票只有入库单
  • 出租车车票能进高铁站吗
  • 印花税扣款
  • 小规模纳税人增值税申报表怎么填
  • 职工食堂购买洗碗机申请
  • 公司章程认缴时效是多久
  • 公司收到政府科技创新奖
  • 单位价值5000元二手设备怎么算
  • windows10如何更改时间
  • mid文件和midi文件
  • 以固定资产换入无形资产
  • 银行代发工资会计科目怎么写
  • 固定资产清理的累计折旧怎么算
  • php如何调用类
  • vue项目创建流程
  • 以前年度损益在报表哪里体现
  • php str_split
  • php验证码扭曲效果怎么做
  • 快递行业一般纳税人税率是多少
  • 网络销售税率怎么算
  • 补开发票对公司有什么影响
  • 公司财务人员岗位职责
  • 微擎框架是开源的吗
  • 不动产投资应该怎么做账
  • db2数据库管理最佳实践
  • 公司基本户如何注销
  • 研发支出属于什么类
  • 加工企业进项发票有哪些
  • 企业哪些支出可以用现金支付
  • 盈余公积和资本溢价
  • 建筑工程租赁费属于什么费用
  • 批发零售进销存软件免费版
  • 代开发票是不是都要扣增值税呢?
  • 公司注销应付款如何办理
  • 余利宝本金会亏吗
  • 物业公司转售电费增值税
  • 收到对公打款认证怎么入账
  • 个人咨询服务费个税怎么算
  • 事业单位残疾人就业保障金减免
  • 事业单位补提以前年度应计提未计折旧的会计分录
  • 发票专用章盖在中间行不行
  • 主营业务收入和库存商品怎么区分
  • mysql参数表
  • mysql 5.7.28安装
  • SQL Server的通用分页存储过程 未使用游标,速度更快!
  • sqlserver r服务
  • mysql数据库简单介绍
  • xp电脑显示屏显示不全
  • win8无法连接到internet
  • win10提示激活windows
  • linux shell脚本编写实例
  • win7玩游戏全屏
  • 从0开始
  • js实现分页数据库数据
  • float浮动布局原理
  • node.js实战
  • bash shell control z
  • vue中父组件向子组件传递数据
  • unity web端
  • jquery mouse
  • unity2020怎么导入资源
  • android背景图片透明度alpha
  • python命令行在哪
  • 怎么撤销税务三方协议
  • 北京市税务局的待遇怎么样
  • 税务社保费是什么意思
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设