Vue 使用 setup 语法糖的示例详解

更新时间：2023年10月11日 09:55:31 作者：小吴吴吴呀

在 setup 语法糖中通过 import 引入的内容，也可以直接在 template 标签中使用，这篇文章主要介绍了Vue 使用 setup 语法糖,需要的朋友可以参考下

setup 语法糖在书写上更加方便简洁，可以直接在 script 标签中书写 setup 的内容，并且无需使用 return 返回。

基础使用：

<script setup>
</script>

注：setup 语法糖中不能存在 `export default {}` ，否则会报错的。

特性一：定义响应式数据：

<template>
  <h3>{{ sum }}</h3>
  <h3>{{ info.name }} : {{ info.age }}</h3>
</template>
<script setup>
// 引入 reactive 和 ref 函数
import { reactive, ref } from "vue";
// 创建 ref 数据
let sum = ref(0);
// 创建 reactive 数据
let info = reactive({ name: "张三", age: 18 });
</script>

注：在 setup 语法糖中定义的数据，可以直接在 template 标签中使用。

特性二：定义方法与计算属性：

<template>
  <h3>{{ sum }}</h3>
  <p>价格：￥{{ price }}</p>
  <button @click="add()">点击+1</button>
</template>
<script setup>
// 引入 computed 和 ref 函数
import { computed, ref } from "vue";
// 创建 ref 数据
let sum = ref(0);
// 创建方法
let add = () => {
  sum.value++;
}
// 创建计算属性
let price = computed(() => {
  return sum.value.toFixed(2);
})
</script>

注：在 setup 语法糖中定义的方法、计算属性等，都可以直接在 template 标签中使用。

特性三：引入组件：

<template>
  <h3>我是父组件</h3>
  <hr />
  <Child></Child>
</template>
<script setup>
// 引入组件
import Child from '../components/Child';
</script>

注：在 setup 语法糖中通过 import 引入的内容，也可以直接在 template 标签中使用。

到此这篇关于Vue 使用 setup 语法糖的文章就介绍到这了,更多相关Vue setup 语法糖内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue antd的from表单中验证rules中type的坑记录
这篇文章主要介绍了vue antd的from表单中验证rules中type的坑记录，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-04-04
Vue项目的网络请求代理到封装步骤详解
这篇文章主要介绍了Vue项目的网络请求代理到封装步骤,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-04-04
vue实现路由懒加载及组件懒加载的方式
懒加载简单来说就是延迟加载或按需加载，即在需要的时候的时候进行加载。这篇文章主要介绍了vue路由懒加载及组件懒加载 ,需要的朋友可以参考下
2019-06-06
解决vue3.0运行项目warning Insert `·` prettier/pret
这篇文章主要介绍了解决vue3.0运行项目warning Insert `·` prettier/prettier问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
vue+element ui el-tooltip动态显示隐藏问题
这篇文章主要介绍了vue+element ui el-tooltip动态显示隐藏问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
vue设置动态请求地址的例子
今天小编就为大家分享一篇vue设置动态请求地址的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11
vue的注意规范之v-if 与 v-for 一起使用教程
这篇文章主要介绍了vue的注意规范之v-if 与 v-for 一起使用方法，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-08-08
一文搞定vue3中的函数式弹窗
函数式弹窗是一种使用函数来创建弹窗的技术,它可以简化弹窗的使用,只需要在需要弹窗的地方调用函数就可以了,下面我们就来看看vue3中函数式弹窗的具体应用吧
2024-01-01
vue+element ui表格添加多个搜索条件筛选功能(前端查询)
这篇文章主要给大家介绍了关于vue+element ui表格添加多个搜索条件筛选功能的相关资料,最近在使用element-ui的表格组件时,遇到了搜索框功能的实现问题,需要的朋友可以参考下
2023-08-08
vue点击按钮跳转到另一个vue页面实现方法
这篇文章主要给大家介绍了关于vue点击按钮跳转到另一个vue页面的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下
2023-08-08