使用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>


相关文章
|
5月前
vue-3d-model.umd.js报错You may need an appropriate loader to handle this file type怎么办?
vue-3d-model.umd.js报错You may need an appropriate loader to handle this file type怎么办?
Vue3,setup的使用需要搭配return进行使用,Vue3中带setup的script的标签和不带能不能合并到一起,export default不能放到setup里会报错,script
Vue3,setup的使用需要搭配return进行使用,Vue3中带setup的script的标签和不带能不能合并到一起,export default不能放到setup里会报错,script
|
2月前
|
JavaScript 前端开发 API
Vue3之script-setup 语法糖
本文介绍了Vue 3的`<script setup>`语法糖,通过示例代码演示了如何在组件中使用`<script setup>`以及相关的Vue 3 Composition API函数和特性,如响应式引用、生命周期钩子、CSS模块等,并展示了组件间的通信和样式应用。
22 0
Vue3之script-setup 语法糖
|
3月前
|
JavaScript
This dependency was not found:* vue/types/umd in ./src/router/index.jsTo install it, you can run
This dependency was not found:* vue/types/umd in ./src/router/index.jsTo install it, you can run
This dependency was not found:* vue/types/umd in ./src/router/index.jsTo install it, you can run
|
4月前
|
JavaScript
Vue.js中使用.prevent和.stop修饰符
Vue.js中使用.prevent和.stop修饰符
|
5月前
|
JavaScript 前端开发
js的check函数
js的check函数
26 1
|
5月前
|
JavaScript IDE 编译器
Vue <script setup>
Vue <script setup>
64 0
|
JavaScript IDE API
vue3中的单文件组件<script setup>和setup函数区别 详解(一)
vue3中的单文件组件<script setup>和setup函数区别 详解
294 0
|
10月前
|
JavaScript
【Error】Vue.js is detected on this page. Open DevTools and look for the Vue panel.
【Error】Vue.js is detected on this page. Open DevTools and look for the Vue panel.
|
12月前
|
JavaScript API
Vue3实战06-CompositionAPI+<script setup>好在哪?
Vue3实战06-CompositionAPI+<script setup>好在哪?
34 0
Vue3实战06-CompositionAPI+<script setup>好在哪?