یادگیری گام به گام Vue 2

اجازه بدید با مروری بر پایه data binding در Vue شروع کنیم.

بیایید زودتر ، Vue Devtools نصب کنیم. همانطور که خواهید دید ، این به ما امکان می دهد تا در هر نمونه Vue موجود در صفحه قرار بگیرد. به خصوص در این مراحل اولیه ، از این پسوند Chrome استفاده زیادی خواهید کرد.

در زندگی واقعی ، ما اغلب با آرایه ها بیشتر از رشته ها کار می کنیم . در این قسمت یاد می گیرید که چگونه از دستورالعمل v-for برای فیلتر کردن لیستی از آیتم ها و ارائه آنها در صفحه استفاده کنید.

In the previous episode, we defaulted to traditional event listeners and DOM traversal. Luckily, though, there's a simpler way with Vue. Let's review the v-on directive for registering event listeners.

ما هنوز ویژگی bind را در Vue بررسی نکردیم. این یک مفهوم کلیدی برای درک بهتر است . ما می توانیم از دستورالعمل v-bind برای bind یک property در مدل خود به هر attribute عنصر استفاده کنیم.در این ویدئو با ما همراه باشید.

اغلب ، متوجه می شوید که قبل از ارسال صفحه ، بخشی از داده نیاز به کمی محاسبه دارد. در چنین مواردی ، ویژگی محاسبات Vue's دقیقاً همان چیزی است که شما نیاز دارید.

بیایید به بررسی اجزای Vue بپردازیم. شما از این مواردسخت استفاده می کنید ، زیرا همه چیز Vue را ارائه می دهید ، بنابراین به چند قسمت بعدی توجه ویژه ای کنید.

نه تنها می توانیم کامپوننت های تکی را ایجاد کنیم ، بلکه مطمئناً هر مؤلفه ای ممکن است بیشتر از کامپوننت های child تشکیل شود. در این قسمت ، بیایید یک مثال اساسی از آن را مرور کنیم.

بیایید فرآیند ایجاد مجموعه ای از کامپوننت های کاربردی را برای پروژه های خود آغاز کنیم. ما با یک مورد ساده شروع خواهیم کرد: کامپوننت Bulma's "message"را با یک رفتار به یک کامپوننت full-fledged Vue تبدیل کنید.

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

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

میخواهیم وقتی حالت های ارتباط بین کامپوننت های Vue را بررسی می کنیم ، گزینه های شما را بررسی کنیم. یا به عبارت دیگر ،چگونه یک کامپوننت می تواند ی یک اکشن خاص یا event یی که تازه رخ داده است ، به دیگری اطلاع بدهد؟

انتخاب بعدی شما برای برقراری ارتباط بین کامپوننت های Vue ، ایجاد یک event dispatcher است. نگران نباشید: این بسیار ساده تر از آن است که به نظر برسد ، به این دلیل که هر Vue instance اینترفیس های لازم را از قبل پیاده سازی می کند.

So far, we've only reviewed default component slots. Or, in other words, "take this bit of content, and insert it right there, as designated by the slot tags. But what about when we require more control? A modal component is a perfect example of this. If you want to slot a header section in one place, and a footer section in another, named slots are exactly what you need.

نیازی نیست هر کامپوننت generic و reusable باشد. گاهی یک جزء خاص و view-specific دقیقاً همان چیزی است که باید باشد. در این اموزش ، مفاهیم اصلی را مرور خواهیم کرد و سپس درباره اینکه چه زمانی می توانید به ویژگی inline-template برسید تا template خود را مستقیماً در فایل HTML خود قرار دهید ، بحث خواهیم کرد.

میخواهیم روی Structure و نحوه ساخت برنامه های واقعی با Vue متمرکز شویم. این بدان معناست که ما آماده یادگیری هر دو Webpack و vue-cli هستیم. گذشته از این ، اگر از لاراول استفاده می کنید ، خوشحال می شوید که بدانید که این فریم ورک برخی از امکانات را برای ساده تر کردن کل این فرآیند ارائه می دهد. ما به زودی آن را بررسی خواهیم کرد.

جایگزینی Hot module فوق العاده جالب است. بله ، هر بار که یک کامپوننت را تغییر دهید ، به طور خودکار صفحه را reftersh می کند. نکته ای که وجود دارد اینست که state برای همه کامپوننت ها بدون تغییر باقی می ماند. در این ویدئوی آموزشی ما را همراهی کنید.

Vue هیچ AJAX functionality خاصی را خارج از چارچوب ارائه نمیدهد. درعوض ، باید جاوا اسکریپت را از آن جدا کنید. شایداز jQuery استفاده می کنید؟ در این صورت ، $ .ajax این ترفند را انجام می دهد. در این ویدوئوی آموزشی ، Axios را مرور خواهیم کرد: یکHTTP request API ساده که می توانید طی چند ثانیه در هر پروژه integrated شود.

ممکن است تا به حال متوجه شده باشید که موقع نوشتن کد برای هر فرم، extract یک کلاس فرم دقیقاً همان چیزی باشد که شما نیاز دارید. در این ویدئو آموزشی با ما همراه باشید.

Now that we have our validation error handling in place, we can move on to extracting a dedicated Form class. This class can be responsible for resetting itself, submitting the AJAX request to our server, and more. Ready to dig in? Once you finished this lesson, it's over to you. How might you expand these two classes two simplify your form interaction even further? Get started, and then let us know what you came up with in the comments.

Let's take one more episode to refactor our code and address some community questions from the previous episode. Specifically, we'll update the Form class to return a Promise when submitted, we'll create a few AJAX helper methods, and, lastly, we'll refactor two methods to improve clarity. Ready?

You've learned a bit about vue-loader already; however, for learning purposes, let's build up a Webpack configuration file from scratch, so that we can begin extracting and importing modules. This will give you a solid review of the fundamentals, while also providing an opportunity to review just how powerful (yet initially confusing) all this stuff can be. Don't worry: in the next episode, I'll show you some options to simplify new projects that use Webpack.

One issue, with any build tool, is that for each new project, you have to reproduce the entire setup again and again. Wouldn't it be useful if we could optimize for the 80% of folks who simply want general ES2015 + module compilation, some CSS preprocessing, and possibly a few other common tasks? And for the remaining 20%, well, they should have access to the underlying configuration file, so that they may tweak it to their project's exact needs. Well, that's exactly what Laravel Mix does for you.

Let's begin reviewing shared state. You'll absolutely run into this before too long. If you have multiple Vue instances or components that need access to the same data - and they also need to be in sync with one another - how exactly do we allow for that?

You'll surely come across instances in your own projects, where you'd like to wrap a form input within a custom component. This way, you can have a single place to attach all custom sanitization, validation, and behavior. However, in the process, you'll also find that the useful v-model directive no longer works the way it usually does.

As a workflow exercise, over the next few episodes, we'll review some essential topics related to building a full SPA with Vue 2. First up, we should discuss client-side routing, and how that fits into Vue. As always, we'll start entirely from scratch, and build up our project.

A single-page application still needs to fetch its data from somewhere. In this episode, we'll work with Laravel a bit to build up a Status model, and its associated data. Then, once we register the necessary route endpoint, we can return this data as JSON. This way, Vue and Axios can easily fetch the data they require from our server.

In the previous episode, we referenced a simple function to render a relative date for each stream. However, Vue filters are more appropriate for basic string manipulation operations like this.

Let's continue with our Stream demo app, and review the process of adding new statuses to the stream. To allow for this, we'll create a dedicated form component, pull in the Form and Errors classes from the Object-Oriented Forms episodes, and then update our Laravel backend code.

In this episode, we'll setup the excellent Ava test framework, and begin testing a basic Vue component from scratch. As you'll find, there are a few small gotchas that you'll want to be aware of.

Let's take a few moments to discuss structure and responsibility, as it relates to your Vue components. Specifically, we'll review a hidden child component that is begging to be extracted.

From time to time, you may find that components of a certain type require special functionality. Rather than copying and pasting this logic from file to file, what else might be a possibility? Well, though we could create a mixin for this purpose, let's instead opt for a dedicated subclass. In this episode, we'll use the common collection example to illustrate this workflow.

Scoped slots allows us to treat any given Vue component slot as a reusable template that you can pass data to. If you've ever needed to override the markup for a given slot within a parent, but don't have access to the relevant underlying data, template scoping is the solution.

In this episode, we'll wrap the popular Flickity carousel library into a dedicated Vue component. As you'll find, doing so will allow us to expose a simple interface, while isolating all awareness of Flickity to a single file.

In this episode, come along as I create a testimonials component for the upcoming (at the time of this writing) Laracasts UI refresh. We'll discuss the benefits of isolating all related behavior within a single file, as well as one technique for throttling the avatar mouseover event handler to an acceptable frequency.

Most front-end developers never take the time to fully learn the difference between debounce and throttle. Instead, they substitute each option, hoping to achieve their desired end result. In this episode - though not directly related to Vue - we'll take some time to learn and review the differences between the two, as well as when you might reach for each.

In this lesson, come along as we construct a mega-menu from scratch. We'll learn how to create an explicit link between an anchor tag and its associated menu, while allowing both pieces to live within the same Vue component and consume the same data.

Let's review one more example for when you might reach for a portal. If you need a way to move a link within a Vue component file to a different part of the page, Vue portals to the rescue!

In this episode, we'll work together on the Laracasts codebase, as I create a pop-up modal for the "Contact Support" link. Why redirect to a new page and download all the necessary assets simply to fill out a form? Instead, we'll add a layer on top of the main page, and submit an Ajax request with the user's question.

In the Modern CSS for Backend Developers, one of the lessons focused on constructing both the CSS and JavaScript for an accordion-like component. In this episode, we'll review the Vue-specific code we wrote in that lesson, and review how we can make it more agnostic and reusable.

Let's continue with our accordion component refactor. In this lesson, we'll create two components: Accordion and AccordionItem. This will allow us to use a data-driven approach to declaring the visibility of each item's associated body.

In this episode, we'll learn how to fix an HTML element to the top of the page, based upon the current scroll position. This is a common feature in countless websites. We'll tackle the implementation in two steps. First, we'll get it to work in the simplest way possible. Then, we'll refactor toward a reusable component that can be applied anywhere. Note: JavaScript is necessary to allow for this functionality across all browsers. However, if you have the means, you might instead use CSS to accomplish the same effect much more easily.

Now that we have the basic functionality from the previous episode working, let's refactor the code into something far more reusable. Note: JavaScript is necessary to allow for this functionality across all browsers. However, if you have the means, you might instead use CSS to accomplish the same effect much more easily.

In this episode, we'll construct a standard tooltip using three techniques: data attributes, Vue directives, and dedicated Vue components.

So far in this series, we've used templates to declare our desired HTML structures. However, there's another way: render functions. Though you won't reach for them nearly as often, they nonetheless serve an important role. In this lesson we'll review the basics.

If you notice that a segment of logic in your component might be useful and necessary elsewhere in your project, this is likely an indication that you should extract the relevant code into its own component, generalize the specifics, and then emit events to handle side effects on a case-by-case basis.

Let's review another real-life example. We need to construct a Vue component that counts from 0 to a given number very quickly. However, this counting should not begin until the element is within the user's viewport.

Imagine that your UX designer gives you instructions to only display a call-to-action button if a different button is not currently visible to the user. This is fairly common: scroll the page a bit - hiding the navigation bar in the process - and suddenly a new CTA button becomes visible. How exactly might we implement such a feature, while considering reusability?

If you ever find yourself desperately trying to juggle state between parent and child components, ask yourself if there should instead be a single source of truth. In this lesson, we'll review Vue's two-way "sync" data-binding convention using a real-world example: the Laracasts codebase.