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

زمان مطالعه: 1 دقیقه

۱۳ مرداد ۱۳۹۷

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

:: توجه

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

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

چه امتیازی به این مقاله می دید؟

1 2 3 4 5

Tags: blog framework javascript vue js

نویسنده

محمد نجاری

کارشناس و فارغ التحصیل مهندسی نرم افزار،برنامه نویس 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 نویسیم..ممنون

محمد نجاری ۱۷ مرداد ۱۳۹۷

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

مجید حاجبی ۱۷ مرداد ۱۳۹۷

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

محمد نجاری ۱۷ مرداد ۱۳۹۷

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

حاجی زاده ۱۴ مرداد ۱۳۹۷

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

محمد نجاری ۱۴ مرداد ۱۳۹۷

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

meysam hasanzadeh ۱۳ مرداد ۱۳۹۷

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

محمد نجاری ۱۳ مرداد ۱۳۹۷

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

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

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

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

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

جلسات دوره

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

نیاز به لاگین