Add note about SFC's everywhere string templates are used

[HoldYourWaffle]

Description of Problem

Although SFC's are used in most Vue projects, they're barely talked about in the documentation. Most examples use string templates or a slightly ambiguous HTML+JS format, leading to inconsistency and confusion for new users.

When I first learned Vue this was one of the main things that confused me. When I had to teach people Vue last summer they had the same experience, so I figured I'd finally do something about it.

Proposed Solution

Because SFC's are so widely used I'd love to refactor all examples to use them, but I this will probably cause more confusion than it saves.
Instead I propose to copy the info note on the Component Basics page to all pages that use string-templates.

Additional Information

Please review each section critically, there's a good chance some should be shifted or even removed.

Notable omissions

1. List Transitions - Reusable Transitions
   This section seems to be unfinished.
2. Async Components
   I have never used async components, so I have no idea if nor how this example would translate to SFC's.
3. Component Registration
   Although this section doesn't use string-templates, I feel like it might be good to mention SFC's here as well.

[NataliaTepluhina]

Thank you for your contribution! Unfortunately it cannot be accepted for a few reasons:

• we try to avoid the visual noise from alert blocks;
• we break the reader flow by giving them links to the more "advanced" information before they learned basics.

I agree that eventually we'd need to refactor documentation to SFC syntax and I already brought this point when we were starting on v3 docs. However, it was decided it's better to stay on the "old" version so far. But (good news) there will be a major refactoring to docs (you can see it on the next branch) where we potentially may move examples to the SFC syntax.