vue3语法糖

script语法糖

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

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

style语法糖

<template><div :class="$style.green"></div></template>
<style module>
.green{
	color:green;
}
<style>

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

<template><div :class="$custom.green"></div></template>
<style module="custom">
.green{
	color:green;
}
</style>

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