Vue.js چیست؟ آموزش کامل و جامع Vue.js

<template>
  <div id="app">
    <h1>{{ message }}</h1>
    <button @click="reverseMessage">معکوس کردن پیام</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'سلام دنیا!'
    }
  },
  methods: {
    reverseMessage() {
      this.message = this.message.split('').reverse().join('')
    }
  }
}
</script>

<template>
  <div class="component">
    <h1>{{ title }}</h1>
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  props: {
    title: String
  }
}
</script>

<style scoped>
.component {
  margin: 20px;
  padding: 20px;
}
</style>

// کامپوننت پایه
app.component('base-button', {
  props: ['label'],
  template: `
    <button class="base-button">
      {{ label }}
    </button>
  `
})

// کامپوننت پویا
const AsyncComponent = defineAsyncComponent(() =>
  import('./components/AsyncComponent.vue')
)

<template>
  <div>
    <child-component
      :data="parentData"
      @update="handleUpdate"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      parentData: []
    }
  },
  methods: {
    handleUpdate(newValue) {
      this.parentData = newValue
    }
  }
}
</script>

import { ref, reactive, computed } from 'vue'

// استفاده از ref برای مقادیر ساده
const count = ref(0)

// استفاده از reactive برای آبجکت‌ها
const state = reactive({
  users: [],
  loading: false
})

// محاسبات واکنش‌گرا
const doubleCount = computed(() => count.value * 2)

// تغییر مقادیر
function increment() {
  count.value++
  state.loading = true
}

<template>
  <div>
    <!-- نمایش شرطی -->
    <p v-if="show">این متن نمایش داده می‌شود</p>
    
    <!-- حلقه -->
    <ul>
      <li v-for="item in items" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
    
    <!-- اتصال دوطرفه -->
    <input v-model="message">
    
    <!-- رویدادها -->
    <button v-on:click="handleClick">کلیک کنید</button>
    
    <!-- اتصال ویژگی‌ها -->
    <img v-bind:src="imageUrl" alt="تصویر">
  </div>
</template>

// تعریف store
import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({
    name: '',
    isAdmin: false,
    preferences: {}
  }),
  
  getters: {
    fullName: (state) => `${state.name} عزیز`,
  },
  
  actions: {
    async fetchUserData() {
      const data = await api.getUser()
      this.name = data.name
      this.isAdmin = data.isAdmin
    }
  }
})

// استفاده در کامپوننت
import { useUserStore } from '@/stores/user'

export default {
  setup() {
    const userStore = useUserStore()
    
    return {
      user: userStore
    }
  }
}

import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('@/views/Home.vue')
  },
  {
    path: '/profile/:id',
    name: 'Profile',
    component: () => import('@/views/Profile.vue'),
    meta: { requiresAuth: true }
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

// محافظ مسیریابی
router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated()) {
    next('/login')
  } else {
    next()
  }
})

import { ref, onMounted, watch } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const doubleCount = computed(() => count.value * 2)
    
    function increment() {
      count.value++
    }
    
    watch(count, (newValue, oldValue) => {
      console.log(`مقدار از ${oldValue} به ${newValue} تغییر کرد`)
    })
    
    onMounted(() => {
      console.log('کامپوننت نصب شد')
    })
    
    return {
      count,
      doubleCount,
      increment
    }
  }
}