Vue.js-کابردها-کتابخانه جاوااسکریپتدوره رایگان-الگوریتم اول-free-آموزش کامل

لطفا صبر کنید...

آشنایی با Single File Components (SFC) در Vue.js

Vue.js از کامپوننت‌های تک‌فایلی (Single File Components - SFC) استفاده می‌کنه که یکی از ویژگی‌های قدرتمند این فریم‌ورک هست. با این ساختار، می‌تونی HTML، CSS و JavaScript مربوط به هر کامپوننت رو داخل یه فایل .vue داشته باشی و توسعه پروژه خیلی تمیز و منظم‌تر بشه.

ساختار یک فایل SFC در Vue

یک کامپوننت Vue شامل سه بخش اصلی هست که داخل یک فایل .vue قرار می‌گیرن:

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: "سلام Vue!"
    }
  }
}
</script>
<style>
h1 {
  color: blue;
}
</style>

🔹 <template> → این بخش شامل کدهای HTML و ساختار کامپوننت هست
🔹 <script> → اینجا لاجیک و داده‌های مربوط به کامپوننت رو تعریف می‌کنیم
🔹 <style> → اینجا استایل‌های مربوط به کامپوننت رو می‌نویسیم

 ویژگی‌های مهم SFC

  1. کامپوننت‌محور بودن → هر کامپوننت می‌تونه مستقل باشه و به‌راحتی در بخش‌های مختلف پروژه استفاده بشه
  2. تفکیک کدها → HTML، CSS و جاوااسکریپت هر کامپوننت توی یه فایل قرار داره، اما از هم جدا هستن
  3. استایل‌های Scoped → می‌تونی از scoped توی <style> استفاده کنی تا استایل فقط روی همون کامپوننت اعمال بشه
  4. قابلیت استفاده مجدد → می‌تونی کامپوننت‌ها رو در جاهای مختلف برنامه دوباره استفاده کنی

استفاده از کامپوننت در پروژه

بعد از ساخت یه کامپوننت (مثلاً HelloWorld.vue)، می‌تونی اونو توی App.vue یا هر کامپوننت دیگه‌ای استفاده کنی:

۱. ایجاد یک کامپوننت جدید (HelloWorld.vue)

<template>
  <div>
    <h2>پیام: {{ message }}</h2>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: "این یک کامپوننت مستقل است!"
    }
  }
}
</script>
<style scoped>
h2 {
  color: green;
}
</style>

۲. استفاده در App.vue

<template>
  <div>
    <h1>به Vue خوش آمدید</h1>
    <HelloWorld />
  </div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
  components: {
    HelloWorld
  }
}
</script>

حالا وقتی صفحه رو اجرا کنی، پیام کامپوننت HelloWorld.vue در App.vue نمایش داده می‌شه!

جمع‌بندی

  • SFC ها یک فایل .vue هستن که شامل <template>، <script> و <style> می‌شن
  • باعث مدیریت راحت‌تر کدها، افزایش خوانایی و استفاده مجدد از کامپوننت‌ها می‌شن
  • می‌تونی کامپوننت‌ها رو در جاهای مختلف پروژه ایمپورت و استفاده کنی

Vue با SFC توسعه رو سریع‌تر، منظم‌تر و مدرن‌تر کرده!