composable function

مدرس دوره علی شیخ

مدت دوره 11:05:31

تعداد ویدیو 69

وضعیت دوره : کامل شده

قیمت دوره : رایگان

Davood Noruzy

3 هفته پیش
پاسخ به دیدگاه

با سلام و احترام
استاد کد زیر را چرا اینطوری نوشتین ، امکانش هست اگر به صورت دیگه هم میشه نوشت ، اونم هم بنویسید ، ممنونم

const {count,counter}=useCounter()

شما در آموزش فرمودید که تابع که اجرا میشه دو تا مقدار را بر می گرداند که برای دریافت ان دو مقدار ، آن ها را در یک متغیر میریزیم.
حالا سوال من اینجاست چرا برای متغیر نام نداریم ؟
بعد اگر من اینطور بنویسیم چرا خطا دارم ؟



()use Counter   :  تابع ا اجرا کردم 

const test={count ,counter  }    آن ها را در یک متغیر ریختم

کد componenet HelloWorld :



<template>

  <h1>saaalaaaaaaaam</h1>

  <button @click="counter">count</button>

  <div>{{ count }}</div>

</template>



<script>

import { useCounter } from "../composable/useCount.js";



export default {

  setup() {

const {count,counter}=useCounter()



return {

  count,counter

}

}

};

</script>

کد فایل composable :



import {  ref} from "vue";

export const useCounter= () =>{



    const count = ref(0);

    function counter() {

      count.value++;

    }

    return {

      count ,counter

    }

    

}

نظرات ارزشمند شما:

برای ارسال نظر ابتدا باید وارد سایت شوید

Davood Noruzy
- 3 هفته پیش
- پاسخ به دیدگاه
با سلام و احترام
استاد کد زیر را چرا اینطوری نوشتین ، امکانش هست اگر به صورت دیگه هم میشه نوشت ، اونم هم بنویسید ، ممنونم
```
const {count,counter}=useCounter()
```
شما در آموزش فرمودید که تابع که اجرا میشه دو تا مقدار را بر می گرداند که برای دریافت ان دو مقدار ، آن ها را در یک متغیر میریزیم.
حالا سوال من اینجاست چرا برای متغیر نام نداریم ؟
بعد اگر من اینطور بنویسیم چرا خطا دارم ؟
```
()use Counter   :  تابع ا اجرا کردم 

const test={count ,counter  }    آن ها را در یک متغیر ریختم 
```
کد componenet HelloWorld :
```
<template>

  <h1>saaalaaaaaaaam</h1>

  <button @click="counter">count</button>

  <div>{{ count }}</div>

</template>



<script>

import { useCounter } from "../composable/useCount.js";



export default {

  setup() {

const {count,counter}=useCounter()



return {

  count,counter

}

}

};

</script>
```
کد فایل composable :
```
import {  ref} from "vue";

export const useCounter= () =>{



    const count = ref(0);

    function counter() {

      count.value++;

    }

    return {

      count ,counter

    }

    

}
```
- علی شیخ
  
  2 هفته پیش
  
  سلام وقت بخیر.
  این موضوع مربوط به destructuring در جاوااسکریپت هست که در موردش توی دوره جاوااسکریپت که پیش نیاز این دوره هست صحبت شده
  تابع useCounter دوتا مقدار count ,counter را بصورت object برمیگردونه که ما با قابلیت destructuring توی متغیر های به همین اسم قرار و استفاده کردیم.

composable function

توضیحات

سرفصل های دوره

معرفی فریمورک vue.js (ویو جی اس)

نگاهی به فریمورک های vue و react و angular

افزودن vue به پروژه

ویژگی methods

ویژگی directives

دایرکتیوهای v-if و v-show

دایرکتیو v-for

دایرکتیو v-once

دایرکتیو v-on

دایرکتیو v-model

داینامیک کردن class و style

ویژگی computed و watch

ویژگی template refs

چرخه حیات یا lifecycle hooks

استفاده از input و textarea

استفاده از checkbox و radio

استفاده از selectbox

ویژگی transitions

ویژگی template

ویژگی component

قابلیت single-file component

پکیج vue cli

ساختار پوشه ها و ایجاد کامپوننت

تگ style در کامپوننت

ویژگی props

ویژگی emit

ویژگی provide و inject

ویژگی slot

ویژگی mixins

ویژگی teleport

مبحث virtual DOM

مبحث reactivity

آشنایی با composition api

ref reactivity

reactive reactivity

composable function

computed & watch & watchEffect

props

emit

provide/inject

lifecycle hooks & template ref

SPA(single page application)

نصب و استفاده از vue router

link & params

nested routes

route name

active link & 404 page

route guards

توضیح پروژه

ایجاد پروژه با vue-cli

افزودن bootstrap

ایجاد header

کتابخانه axios

لیست کاربران

vue-devtools

نمایش کاربر

لیست پست ها

نمایش پست

ایجاد پست

ویرایش پست

حذف پست

deploy(آپلود روی سرور)

قدم بعدی(سخن پایانی)

معرفی ویژگی های جدید

script setup بخش اول

script setup بخش دوم

reactivity transform

web componenet

style v-bind

اطلاعات دوره

دوره های پشنهادی

آموزش Bootstrap 4 در دنیای واقعی

آموزش PHP-OOP-MVC پروژه محور

آموزش ساخت فروشگاه اینترنتی با نکست جی اس (next.js)

آموزش رایگان javascript (جاوا اسکریپت) پروژه محور

نظرات ارزشمند شما:

ارسال دیدگاه