vue3语法糖

setup语法糖

setup作为script标签的属性

<template><div>{{count}}</div></template>
<script setup>
import {ref} from 'vue'
const count = ref('0');
<script>
1
2
3
4
5

这种写法让script中的变量直接作为被暴露的数据，可以在模板中直接使用，不需要手动return

style语法糖

在style标签上添加module属性

<template><div :class="$style.green"></div></template>
<style module>
.green{
	color:green;
}
<style>
1
2
3
4
5
6

这样写可以让style中的类作为$style的属性被访问

<template><div :class="$custom.green"></div></template>
<style module="custom">
.green{
	color:green;
}
</style>
1
2
3
4
5
6

这样是自定义的模块名，通过自定义的模块名可以声明多个不同的模块。