docs: reorder sfc blocks and add initial slash in link (#21618)

This commit is contained in:
Bruno Braga 2023-06-17 22:34:31 +01:00 committed by GitHub
parent c9506cc3d5
commit 64bccf37a5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -313,14 +313,14 @@ You can reference JavaScript variable and expression within your style blocks wi
The binding will be dynamic, meaning that if the variable value changes, the style will be updated.
```vue
<template>
<div class="text">hello</div>
</template>
<script setup>
const color = ref("red")
</script>
<template>
<div class="text">hello</div>
</template>
<style>
.text {
color: v-bind(color);
@ -333,15 +333,15 @@ const color = ref("red")
The scoped attribute allows you to style component in insolation. The styles declared with this attribute will only apply to this component.
```vue
<template>
<div class="example">hi</div>
</template>
<style scoped>
.example {
color: red;
}
</style>
<template>
<div class="example">hi</div>
</template>
```
### CSS Modules
@ -474,7 +474,7 @@ If you are using [UnoCSS](https://unocss.dev/integrations/nuxt), note that it co
### Transitions
Nuxt comes with the same `<Transition>` element that Vue has, and also has support for the experimental [View Transitions API](docs/getting-started/transitions#view-transitions-api-experimental).
Nuxt comes with the same `<Transition>` element that Vue has, and also has support for the experimental [View Transitions API](/docs/getting-started/transitions#view-transitions-api-experimental).
::ReadMore{link="docs/features/transitions"}
::