使用Script setup有什么用

简介: 使用Script setup有什么用

使用 <script setup> 时,内部 <script setup> 声明的任何顶级绑定(包括变量、函数声明和导入)都可以在模板中直接使用:

<script setup>
// variable
const msg = 'Hello!'

// functions
function log() {
  console.log(msg)
}
</script>

<template>
  <button @click="log">{{ msg }}</button>
</template>

导入以相同的方式公开。这意味着您可以直接在模板表达式中使用导入的帮助程序函数,而不必通过以下 methods 选项公开它:

<script setup>
import { capitalize } from './helpers'
</script>

<template>
  <div>{{ capitalize('hello') }}</div>
</template>


相关文章
|
应用服务中间件 Linux API
acme.sh 快速实现 https 证书颁发与自动续期
借助acem.sh来迅速实现 let's encrypt 的泛域名 ssl 证书颁发与续期,基本上五分钟就可以解决战斗
4736 0
|
缓存 监控 前端开发
优化前端性能:提升网页加载速度的10个技巧
在当今互联网时代,网页加载速度成为用户体验的重要指标之一。本文将介绍10个有效的技巧,帮助前端开发人员优化网页性能,提升用户的访问体验。
|
8月前
|
消息中间件 Dubbo Java
Netty源码—10.Netty工具之时间轮
本文主要介绍了什么是时间轮、HashedWheelTimer是什么、HashedWheelTimer的使用、HashedWheelTimer的运行流程、HashedWheelTimer的核心字段、HashedWheelTimer的构造方法、HashedWheelTimer添加任务和执行任务、HashedWheelTimer的完整源码、HashedWheelTimer的总结和HashedWheelTimer的应用。
|
Kubernetes 监控 Docker
深入解析 Kubernetes 架构:掌握主节点、工作节点和容器运行时
深入解析 Kubernetes 架构:掌握主节点、工作节点和容器运行时
733 0
|
JavaScript 前端开发 开发者
Vue.js 2 项目实战(二):图书管理案例
Vue.js 2 项目实战(二):图书管理案例
|
Shell Linux 数据库
Django管理命令大揭秘:如何打造定制脚本,实现任务自动化?
【8月更文挑战第31天】在现代Web开发中,自动化是提升效率和减少错误的关键。Django管理命令作为一种强大功能,允许我们在项目中轻松创建自定义脚本和自动化任务,如数据备份、报告生成等。通过在`app/commands`目录下创建`.py`文件,可以定义各种管理命令。例如,`send_daily_emails.py`用于发送日常邮件。我们定义一个继承自`BaseCommand`的类,并在`handle`方法中实现具体逻辑。管理命令不仅支持接收命令行参数,还可以充分利用Django的模型、视图和表单,帮助我们高效完成复杂任务。
192 0
|
Java Maven
java运行jar包提示 “XXX中没有主清单属性”,配置maven插件
java运行jar包提示 “XXX中没有主清单属性”,配置maven插件
415 0
【UI】elementui select点击获取label 和 value
【UI】elementui select点击获取label 和 value
586 1
|
存储 缓存 JavaScript
如何在Vue中动态切换语言环境?
如何在Vue中动态切换语言环境?
545 4