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

  • vivos12后盖材质(vivos5手机后盖是什么材质)

    vivos12后盖材质(vivos5手机后盖是什么材质)

  • 虎牙直播礼物怎么分成(虎牙直播礼物怎么提现手机)

    虎牙直播礼物怎么分成(虎牙直播礼物怎么提现手机)

  • 移动机顶盒错误代码92114(移动机顶盒错误代码10071)

    移动机顶盒错误代码92114(移动机顶盒错误代码10071)

  • 开启wds是干什么的(wds状态开启是成功了吗)

    开启wds是干什么的(wds状态开启是成功了吗)

  • 手机QQ怎么访问别人空间并发出爱心(手机qq怎么访问空间)

    手机QQ怎么访问别人空间并发出爱心(手机qq怎么访问空间)

  • 快手自建保证金不足是什么意思(快手自建保证金不足哪里补缴)

    快手自建保证金不足是什么意思(快手自建保证金不足哪里补缴)

  • 汉字编码分为哪四种(汉字编码包括几种)

    汉字编码分为哪四种(汉字编码包括几种)

  • 苹果6s输入法怎么设置(苹果6s输入法怎么换)

    苹果6s输入法怎么设置(苹果6s输入法怎么换)

  • 安卓个人热点打不开怎么办(安卓个人热点打开)

    安卓个人热点打不开怎么办(安卓个人热点打开)

  • 抖音名字多久可以改一次(抖音名字多久能改)

    抖音名字多久可以改一次(抖音名字多久能改)

  • mate30为什么指纹变色了(mate30指纹不好用)

    mate30为什么指纹变色了(mate30指纹不好用)

  • iphone11原装充电头发烫(iphone11原装充电器多少瓦)

    iphone11原装充电头发烫(iphone11原装充电器多少瓦)

  • qq如何自动回复好友(qq如何自动回复群消息)

    qq如何自动回复好友(qq如何自动回复群消息)

  • iPhoneX不能长按关机(苹果x长按)

    iPhoneX不能长按关机(苹果x长按)

  • qq充了vip再充svip会怎样(qq充完vip再充svip有什么用)

    qq充了vip再充svip会怎样(qq充完vip再充svip有什么用)

  • 红米k30是多少倍变焦(红米k30是多少倍变焦的)

    红米k30是多少倍变焦(红米k30是多少倍变焦的)

  • 电脑没有主机能不能看电视(电脑没有主机能投屏吗)

    电脑没有主机能不能看电视(电脑没有主机能投屏吗)

  • 苹果x充电一般多长时间(苹果x充电一般多久充满)

    苹果x充电一般多长时间(苹果x充电一般多久充满)

  • 如何在pr中加连续字幕(pr如何连接几段视频片段)

    如何在pr中加连续字幕(pr如何连接几段视频片段)

  • datedif函数怎么用算时间差(datedif函数怎么计算工龄)

    datedif函数怎么用算时间差(datedif函数怎么计算工龄)

  • play商店一直核对信息怎么解决(play商店无法登录一直核对)

    play商店一直核对信息怎么解决(play商店无法登录一直核对)

  • 美团钱包在哪里(美团钱包在哪里打开)

    美团钱包在哪里(美团钱包在哪里打开)

  • qq资料卡在哪(QQ资料卡在哪设置)

    qq资料卡在哪(QQ资料卡在哪设置)

  • 5.OpenCV图像拼接(opencv拼接图片)

    5.OpenCV图像拼接(opencv拼接图片)

  • Vue3通透教程【一】Vue3现状—必然趋势?

    Vue3通透教程【一】Vue3现状—必然趋势?

  • 股东分红交税税率
  • 视同销售是指什么
  • 股东如何收回投资
  • 电器电子产品及配件入账
  • 施工企业收到工程款交付税款的时间
  • 开办费抵扣多少企业所得税
  • 预付材料购货款计入什么科目
  • 售后回租利息和租金区别
  • 人防工程被出售,谁承担责任
  • 职工取暖费计入什么科目
  • 来料加工企业的会计处理问题
  • 开具发票只有票号可以吗?
  • 房产税计税依据房产原值怎么算
  • 西安职业中等专业学校校长
  • 个税多申报了实发没有这么多,如何处理
  • 技术先进型企业认定
  • 开票系统维护费必须要交吗
  • 跨区经营的税务政策
  • 项目地预交企业所得税分录如何处理?
  • 长期股权投资的交易费用计入哪里
  • 出口视同内销补缴增值税会计分录?
  • 华为手机屏幕下的三个功能键设置方法
  • 个体工商户和个人商家的区别
  • 物流运输公司要交税吗
  • php实现的mongodb操作类实例
  • linux怎么用微信
  • 企业向股东发放现金股利
  • 其他业务支出包括的内容
  • php常用的设计模式在开发中的实例
  • 从对公账户取现金有什么影响
  • 长期借款的账务处理怎么做分录
  • 印刷厂成本核算
  • 投资收益属于营业外收入吗
  • 强大的图片预览软件
  • mysqldump命令不存在
  • 无偿划转法律意见
  • 现金销售商品的会计分录
  • 工业企业成本核算的一般程序
  • 行政单位收到银行的存款
  • 个税APP怎么填报扣税最少
  • 工程结算如何做会计分录
  • 企业自产自用产品要确认收入吗
  • 个人所得税9月初申报哪个月的
  • 暂估成本账务处理
  • 出借和出租包装物会计分录是什么
  • 进出口货物报关单填制规范
  • 年底没有取得发票企业所得税
  • 简易计税结转
  • 印花税城建税教育费附加等其他税种的纳税申报
  • 银行股分红划算吗
  • 以前年度损益调整怎么做账
  • 公司出售自建厂房
  • 咨询企业发生的费用计入
  • sql数据库批量添加数据
  • mysql sql语句性能调优
  • mysql5.7.22安装配置教程
  • 怎么快速隐藏电脑下方一排
  • 硬盘 linux
  • linux去掉文件换行符
  • 如何远程登录路由器
  • remind32.exe - remind32是什么进程 有什么用
  • 在windows7中,下列叙述中错误的是
  • kprcycleaner.exe是什么
  • linux乱码怎么办
  • 如何选择适合你的颂钵
  • fragment的replace方法
  • unity工程文件怎么弄
  • webgl fbo
  • Easyui form combobox省市区三级联动
  • 预拍摄功能相机
  • jquery 插件写法
  • 中国纳税大户排行
  • 广东高速公路电子发票服务来平台
  • 成都税务举报电话多少
  • 快递代缴的关税有税单吗
  • 阜阳市税务局地址
  • 增值税抵扣联怎么装订
  • 陕西省网上税务局怎么报国税(陕西税务局官网申报)
  • 企业收到上一年增值税
  • 2021北京餐饮业发展趋势报告
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设