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-cli整合vuex的时候,修改actions和mutations,实现热部署的方法
今天小编就为大家分享一篇vue-cli整合vuex的时候,修改actions和mutations,实现热部署的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09vue3在table里使用elementUI的form表单验证的示例代码
这篇文章主要介绍了vue3在table里使用elementUI的form表单验证的示例代码,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-12-12
最新评论