آموزش vue JS : جلسه 27 - پروژه وبلاگ قسمت اول



visibility  
mode_comment   ۱۳

در این قسمت شروع به ساخت یک وبلاگ ساده خواهیم کرد و یاد میگیریم چونه یک فرم را با vue js هندل کنیم. پس با ما همراه باشید. . .

info توجه

این مطلب یک جلسه از آموزش حرفه ای vuejs می باشد و برای مشاهده آن باید در دوره ثبت نام کنید.

ثبت نام در آموزش حرفه ای vuejs

comment دیدگاه کاربران
meysam hasanzadeh

سلام
چرا جلسه 26 (lifecycle) ارور 404 میده؟؟

محمد نجاری

سلام…
از گزارش شما ممنونم.
مشکل برطرف شد.

حاجی زاده

درود آقای نجاری.
هنوز به این ویدیو نرسیدم که بخونمش، اما دَمت گرم. پروژه‌های خوب و مفیدی رو در هنگام آموزش دوره برگزار می‌کنی. لطف کن هر چی از ویو جی‌اس بلدی و تمام مفهوم‌های ویو جی‌اس رو کامل کامل بهمون یاد بده.
با سپاس.

محمد نجاری

سلام….
خیلی خوشحالم از اینکه این دوره مورد پسندتون واقع شده . امیدوارم موفق باشید.

مجید حاجبی

با سلام من asp کارم و هیچ اطلاعاتی درباره php و لاراول ندارم.ایا میتونم از این دوره استفاده کنم؟یا اگر استفاده کنم در حین دوره به مشکل میخورم؟

محمد نجاری

سلام . . .
ما تو این دوره فقط روی خود vue js کار میکنیم و هیچ ارتباطی با php و لاراول نخواهیم داشت .به جز فصل آخر که در واقع یک فصل اضافه هست برای کسانی که لاراول رو بلد هستند و میخواهند vue را در آن استفاده کنند

مجید زارعی هوشیار

سلام…آقای نجاری جلسه خوبی بووود
جلسه خوبی بووود…..اقای نجاری هر چه قدر میتونید پروژه رو پیچیده کنید……تا با مفاهیم بیشتر در گیر بشیم …وباعث بشه مسلط بشیم…تا انشالله از این به بعد پروژه هامونو با vue نویسیم..ممنون

محمد نجاری

سلام تا جایی که مناسب باشد این کار را انجام میدهیم و مشکلات را با هم حل میکنیم.

Ali Zahedi

با سلام
من پروژه وبلاگ رو تازه شروع کردم ونمیدونم راجع به مبحث فایل ها تا آخر صحبتی شده یا نه ولی اگه نشده ممنون میشم در پروژه spa که تازه استارت زدید راجع به آپلود فایل هم مطالبی گفته بشه ممنون

محمد نجاری

سلام . . .
در ویدیو های پیش رو آپلود فایل هم داریم٫

Ali Zahedi

با سلام
من دو کامپوننت دارم مثلا A > B که A کامپوننت پدر و B کامپوننت پسر هستش حالا از داخل کامپوننت B فرضا یک textbox دارم که کاربر یه موردی رو داخلش تایپ می کنه و مقدار این رو همون لحظه می خوام به کامپوننت A پاس بدم من برای اینکار روی رویداد keydown المنت کامپوننت B یک emit تعریف کردم و داخل کامپوننت A اون رو دریافت می کنم و تاحدودی داره کار میکنه ولی مشکلم اینه که مقداری که در کامپوننت A دارم با کامپوننت B کمی متفاوته و عقب جلو میشه دلیلش چیه ؟ کد من اشتباهه و اینکه باید جور دیگه ای این قضیه رو هندل می کردم ؟
ممنون

Component B:
 <template>
      <div class="form-group">
        <label class="col-md-4 control-label" for=" lastName">محتوای نوشته:</label>
        <div class="col-md-4">
            <textarea rows="8" type="text" v-model="content"
             @keypress="$emit(‘content’,content)"
             placeholder="محتوا را وارد کنید" class="form-control input-md"></textarea>
        </div>
      </div>
</template>

<script>
export default {
  name: "body",
  data() {
    return {
      content: ""
    };
  }
};
</script>

<style>
</style>


Component A:
 <template>
    <div>
        <title-section @blog-title="updateTitle"></title-section>
        <body-section @content="updateContent"></body-section>
        <categories-section @selected-categories="updateSelectedCategories"></categories-section>
        <author-section @selected-author="updateSelectedAuthor"></author-section>
        <div class="form-group">
            <div class="col-md-4">
                <button id="singlebutton" name="singlebutton" class="btn btn-primary">ارسال درخواست</button>
            </div>
        </div>
    </div>
</template>

<script>
import TitleSection from "./sections/title";
import BodySection from "./sections/body";
import CategoriesSection from "./sections/categories";
import AuthorSection from "./sections/author";

export default {
  name: "build-post",
  components: { TitleSection, BodySection, CategoriesSection, AuthorSection },
  data() {
    return {
      selectedCategories: [],
      selectedAuthor: {},
      content: "",
      title: ""
    };
  },
  methods: {
    updateSelectedCategories(categories) {
      this.selectedCategories = categories;
    },
    updateSelectedAuthor(author) {
      this.selectedAuthor = author;
    },
    updateContent(content) {
      this.content = content;
    },
    updateTitle(title) {
      this.title = title;
    }
  }
};
</script>

<style>
</style>
محمد نجاری

سلام مشکلات از این دست را نمیشود صرفا با دو سورس کد کامپوننت بررسی کرد و نیاز به دیتای بیشتری هست و زمان زیادی میگیرد. همچنین اگر شما نیاز به $emit های زیادی دارید میتونید از Event Bus استفاده کنید که خیلی کار رو راحت تر و دیباگ رو ساده تر میکنه و اگر خیلی نیاز به $emit پیدا میکنید و یا به صورت تو در تو نیاز از $emit استفاده میکنید . شما میتونید از Vux استفاده کنید که صرفا برای راحتی همین کار است.

Ali Zahedi

خیلی ممنون بله باید بعد از اتمام این دوره حتما سراغ vuex برم البته این مشکل از vuedevtools بود که دیتاها رو بد نمایش میداد و خروجی نهایی کار اکی بود

ارسال نظرات

کاربر گرامی، امکان ارسال نظر و پشتیبانی برای دوره های مجازی فقط برای دانشجویان این دوره امکان پذیر می باشد.