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

دسته بندی: آموزش
زمان مطالعه: ۱ دقیقه
۱۳ مرداد ۱۳۹۷

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

:: توجه

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

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

نویسنده
کارشناس و فارغ التحصیل مهندسی نرم افزار،برنامه نویس BackEnd سون‌لرن،یک گیک، 5 سال سابقه برنامه‌نویسی فرانت اند و بک اند.مسلط به زبان های Ruby,php,java,javascript و ... . علاقه مند به Clean Code و مقیاس‌پذیری وب

جلسات دوره

نظرات کاربران

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>
Ali Zahedi

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

محمد نجاری

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

Ali Zahedi

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

محمد نجاری

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

پایان زمان پشتیبانی

دانشجوی گرامی، بازه پشتیبانی فعال برای این دوره ۳ ماه است که برای شما به پایان رسیده است.

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

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.
گزارش مشکل