آموزش 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 که تازه استارت زدید راجع به آپلود فایل هم مطالبی گفته بشه ممنون

محمد نجاری دوشنبه , ۱۶ مهر ۱۳۹۷

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

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

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

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

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

جلسات دوره

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

نیاز به لاگین