Vue birinchi SFC sahifasi
Bizning birinchi SFC veb-sahifamizni noldan yaratish uchun biz:
- Yangi toza Vue loyihasini yarating
- Kodni "App.vue" fayliga yozing
- Veb-sahifani ishlab natija jarayonida avtomatik ravishda qanday yangilanishini ko‘ring
- Ishlab chiqarish uchun sahifa yarating
Toza loyiha yarating
Endi biz Vue-da o‘zimizning oddiy veb-sahifamizni yaratish uchun oldingi sahifada yaratgan namunaviy loyihadagi barcha tarkibni olib tashlaymiz.
Kod yozishni boshlashdan oldin <template> , <script> va <style> teglari ichidagi barcha kontentni olib tashlang va “sozlash” yoki “ko‘lamli” kabi atributlarni olib tashlang.
"App.vue" faylingiz endi shunday ko‘rinishi kerak:
App.vue:
<script></script>
<template></template>
<style></style>Shuningdek, "src" jildidagi "aktivlar" va "komponentlar" papkalarini olib tashlang.
"main.js" fayli ichidagi aktivlar import qilinadigan qatorni olib tashlang, shunda "main.js" quyidagicha ko‘rinadi:
main.js:
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')Endi bizda ishlash uchun bo‘sh loyiha bor.
"App.vue" da kod yozing
Endi bizda toza loyiha bor, <template> tegiga sarlavha qo‘shing, masalan:
<template>
<h1>Hello World!</h1>
</template>
<script></script>
<style></style>"App.vue" faylini saqlang, terminaldagi localhost havolasiga rioya qilib brauzeringizga o‘ting. Natijani ko‘ryapsizmi? Brauzer endi VS kodidagi o‘zgarishlarni har safar saqlaganingizda brauzerni qo‘lda yangilamasdan avtomatik ravishda yangilanishi kerak.
Keling, biroz kattaroq Vue misolini ko‘rib chiqaylik:
Misol
App.vue:
<template>
<h1>{{ message }}</h1>
</template>
<script>
export default {
data() {
return {
message: 'This is some text'
};
}
};
</script>
<style></style>Eslatma: Yuqoridagi misolda export default “main.js” ga import App from './App.vue' bilan ma’lumotlarni ushlash imkonini beradi, shuning uchun uni “index.html” ichidagi <div id="app"> tegiga o‘rnatish mumkin.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!