Vue SFC: script, template ja style
Ymmärrä Single-File Component -muoto: script-lohko logiikalle, template-lohko näkymälle ja style-lohko rajatulle CSS:lle
Vue SFC: script, template ja style on ilmainen Frontend Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Frontend Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Frontend Academy-kurssilla on yhteensä 4 oppituntia.
Mikä on yhden tiedoston komponentti
Vuen yhden tiedoston komponentti (SFC) on .vue-tiedosto, jossa on kolme lohkoa: <script> JavaScript-logiikkaa varten, <template> HTML-näkymää varten ja <style> CSS:ää varten. Kaikki yhtä komponenttia koskeva on yhdessä tiedostossa.
<script setup lang="ts">
const greeting = 'Hello, Vue!';
</script>
<template>
<h1>{{ greeting }}</h1>
</template>
<style scoped>
h1 { color: #42b883; }
</style>script-lohko
Logiikka, data, importit ja Composition API -koodi tulevat tähän. Kun käytät <script setup>-syntaksia, ylätasolla määritetyt muuttujat ja importit ovat automaattisesti käytettävissä templatessa.
script setup — moderni lähestymistapa
<script setup> on suositeltu SFC-syntaksi. Siinä määritetyt muuttujat, lasketut ominaisuudet ja funktiot ovat suoraan käytettävissä templatessa ilman, että niitä tarvitsee palauttaa erikseen.
<script setup lang="ts">
import { ref } from 'vue';
const count = ref(0);
function increment() { count.value++; }
</script>
<template>
<button @click="increment">{{ count }}</button>
</template>template-lohko
Template sisältää komponentin HTML-näkymän. Vue-templatet käännetään renderöintifunktioiksi. Käytä templaten sisällä Vuen omia attribuutteja ja direktiivejä (v-if, v-for, @click).
Templaten interpolaatio
Käytä kaksinkertaisia aaltosulkeita {{ }} reaktiivisen datan tulostamiseen tekstinä. Vue escapettaa HTML:n automaattisesti — käytä HTML:n renderöimiseen v-html-direktiiviä varoen.
<template>
<p>{{ message }}</p>
<p>{{ count * 2 }}</p>
<p>{{ isActive ? 'Active' : 'Inactive' }}</p>
</template>style-lohko
Style-lohkon CSS koskee komponenttia. Lisää scoped, jos haluat rajata tyylit vain tämän komponentin elementteihin ja estää tyylien tahattoman vuotamisen globaaliin näkyvyysalueeseen.
<style scoped>
.card {
border-radius: 8px;
padding: 16px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
/* Without scoped: affects all .card elements globally */
</style>Rajattujen tyylien toimintaperiaate
Vue lisää komponentin elementteihin yksilöllisen data-attribuutin (kuten data-v-abc123) ja muokkaa rajatun CSS:n valitsimia sisältämään sen. Näin tyylit kohdistuvat vain tämän komponentin elementteihin.
CSS-moduulit Vuessa
Vaihtoehto scopedille on käyttää CSS-moduuleja syntaksilla <style module>. Käytä luokkien nimiä templaten $style-objektin kautta.
<template>
<div :class="$style.card">Content</div>
</template>
<style module>
.card { background: white; }
</style>Globaalit tyylit
Tyylit, joissa ei ole scoped-määrettä, ovat globaaleja. Yleinen malli on käyttää globaalia app.css-tiedostoa perustyyleille ja design tokeneille sekä komponenttikohtaisia scoped-tyylejä komponentin omille säännöille.
TypeScript SFC-tiedostoissa
Lisää script-lohkoon lang="ts", jos haluat käyttää TypeScriptiä. Volar (virallinen Vuen IDE-laajennus) tarjoaa täyden TypeScript-tuen Vue-SFC-tiedostoille, mukaan lukien tyyppitarkistetut templatet.
SFC-tiedostojen nimeäminen
Nimeä templateissa käytettävät SFC-tiedostot PascalCase-tyylillä (UserProfile.vue). Vue suosittelee monisanaisia nimiä ristiriitojen välttämiseksi HTML-elementtien kanssa.
Pikatarkistus
Mitä Vue-koodin scoped-attribuutti tekee <style>-lohkolle?
Kertaus: Vue SFC:t
.vue-tiedostoissa on kolme lohkoa: script (logiikka), template (näkymä) ja style (CSS). Modernissa Composition API -tavassa käytetään