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

  • iphone 12 pro max是双卡双待吗

    iphone 12 pro max是双卡双待吗

  • 华为p40前置摄像头如何隐藏(华为p40前置摄像头有个红点)

    华为p40前置摄像头如何隐藏(华为p40前置摄像头有个红点)

  • 苹果如何设置黑名单(苹果如何设置黑屏)

    苹果如何设置黑名单(苹果如何设置黑屏)

  • 加了86为什么打不通电话(为什么有的电话加86)

    加了86为什么打不通电话(为什么有的电话加86)

  • ipv4的地址格式由多少个字节组成(ipv4的地址格式由多少个二进制组成)

    ipv4的地址格式由多少个字节组成(ipv4的地址格式由多少个二进制组成)

  • 华为p40指纹锁在哪里设置(华为p40 指纹)

    华为p40指纹锁在哪里设置(华为p40 指纹)

  • 手机微信运动怎么不显示步数(手机微信运动怎么关闭)

    手机微信运动怎么不显示步数(手机微信运动怎么关闭)

  • vivo手机卡怎么取出来(vivo手机卡怎么办视频教程)

    vivo手机卡怎么取出来(vivo手机卡怎么办视频教程)

  • perl语言为什么不流行(perl运行后没有结果)

    perl语言为什么不流行(perl运行后没有结果)

  • 抖音投放历史怎么删除(抖音投放历史怎么看)

    抖音投放历史怎么删除(抖音投放历史怎么看)

  • 抖音上的超级乐迷是什么意思(抖音上的超级乐队是什么)

    抖音上的超级乐迷是什么意思(抖音上的超级乐队是什么)

  • 闲鱼被拉黑有提示吗(闲鱼拉黑后会提醒对方评价么)

    闲鱼被拉黑有提示吗(闲鱼拉黑后会提醒对方评价么)

  • 禁用前面板插孔检测是什么意思(禁用前面板插孔检回测)

    禁用前面板插孔检测是什么意思(禁用前面板插孔检回测)

  • ssd和hdd是什么意思(ssd和hdd的全称)

    ssd和hdd是什么意思(ssd和hdd的全称)

  • 唯品会下架的商品会重新上架吗(唯品会下架的商品还能自动抢货吗)

    唯品会下架的商品会重新上架吗(唯品会下架的商品还能自动抢货吗)

  • 苹果手机电话黑名单怎么拉出(苹果手机电话黑名单在哪里解除)

    苹果手机电话黑名单怎么拉出(苹果手机电话黑名单在哪里解除)

  • 坚果pro3有NFC吗(坚果pro有没有nfc)

    坚果pro3有NFC吗(坚果pro有没有nfc)

  • 商品不在淘宝联盟内容商品库怎么办(淘宝商品不在该地区销售)

    商品不在淘宝联盟内容商品库怎么办(淘宝商品不在该地区销售)

  • wps表格数同时增减

    wps表格数同时增减

  • 红米note8怎么设置网速(红米note8怎么设置陌生号码禁止打入)

    红米note8怎么设置网速(红米note8怎么设置陌生号码禁止打入)

  • 探探怎么划是喜欢(探探往哪划是喜欢)

    探探怎么划是喜欢(探探往哪划是喜欢)

  • 全民k歌如何认证主唱(全民K歌如何认证QQ音乐人)

    全民k歌如何认证主唱(全民K歌如何认证QQ音乐人)

  • 为什么soul下载不了(为什么soul下载不了ios)

    为什么soul下载不了(为什么soul下载不了ios)

  • ipad分屏大小怎么调整(ipad分屏大小怎么调整不了)

    ipad分屏大小怎么调整(ipad分屏大小怎么调整不了)

  • hlookup和vlookup区别(hlookup与vlookup函数的区别)

    hlookup和vlookup区别(hlookup与vlookup函数的区别)

  • 最早的全中文手机(中文最早出现的时期)

    最早的全中文手机(中文最早出现的时期)

  • 多交了企业所得税,下年度退税,需要更正撒意思
  • 个人所得税退还是不退好
  • 车辆购置税退税申请模板
  • 收到以前年度退所得税分录
  • 房屋维修基金帐户怎么查
  • 未开票收入如何填写增值税申报表
  • 一般纳税人金税盘抵税会计分录
  • 发票没金额能开吗
  • 投资收益企业所得税优惠政策
  • 企业所得税季报弥补以前年度亏损怎么填
  • 水泥企业销售收入比例
  • 公司代垫个税会计分录
  • 拆迁补偿款上交财政
  • 注册资金没有到账用不用交印花税
  • 餐饮公司收到的拍摄服务票做什么费用
  • 借款合同印花税纳税期限
  • 辅导期一般纳税人预缴增值税
  • 积分抵扣所开的发票,也能在税前扣除吗?
  • 一般纳税人的资质在哪里打印
  • 保险公司赔偿计入营业外收入
  • 向购买方收取的价外费用
  • 代购工作室合法吗
  • 当年的成本发票必须当年结算吗
  • 苹果6拍照如何
  • 企业应纳税所得额计算公式
  • 心绞痛的早期症状表现有哪些
  • PHP+jQuery+Ajax实现分页效果 jPaginate插件的应用
  • 任务栏没反应怎么重启
  • linux的grep命令使用
  • macOS 11 Big Sur 开发者预览版 Beta 8推送
  • session.php
  • 魅族路由器mini padavan
  • php imagettftext
  • 用vue做的登录界面
  • 完成认证后开具什么证明
  • grad_cam
  • 白酒赠送消费税计算
  • 新版本idea怎么创建javaweb
  • 装系统如何不安装自带软件
  • php微信公众号 全站模板
  • discuz关闭电脑版
  • python爬虫中数据接口的含义
  • 企业转租电费发票
  • 可供出售金融资产新准则叫什么
  • 施工现场补助规定
  • 个体工商户纳税申抿
  • 资产处置损益的定义
  • mysql修改密码的命令
  • 购货方收到销售折扣发票怎么入账
  • 企业所得税年报申报时间
  • 自助餐怎么核算成本
  • 全资子公司可以转让吗
  • 现在勾选认证是可以下月初认证?
  • 异价调拨什么意思
  • 预收款开票后如何做账
  • 小规模纳税人涉嫌虚开发票
  • 待抵扣进项税额是什么情况下用的
  • 原材料用于在建工程进项税可以抵扣吗
  • 预收工程款怎么做分录
  • 税控抵税怎么做分录
  • 车辆折旧费法律支持吗
  • 商品流通企业会计
  • sql中的存储过程
  • sql server启动不了 错误2
  • linux网络系统管理
  • open bsd
  • ubuntu里怎么装软件
  • bhvc.exe
  • win10预览版和正式版区别
  • 如何去掉桌面图标的蓝底
  • pdoors.exe
  • Extjs3.0 checkboxGroup 动态添加item实现思路
  • nodejs性能对比
  • Android Error: No resource found ··· 'layout_above' with value '@id/···
  • shell while 小于
  • input组件封装
  • [置顶]电影名字《收件人不详》
  • 江苏税务查询电子发票
  • 02112366电子税务局
  • 肉类零售
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设