Are you just starting out with Vue.js? Or has it been long since you’ve worked with Vue? This cheat sheet lists the nine most common tasks and solutions when outputting data to HTML.
In all these samples, the first part shows the syntax, and the second part shows the usage with real data.
Outputting data into HTML
The first test of your app or rendering data between HTML elements:
{{ variable }}
↓
{{ metadata.subtitle.value }}
Adding the standard class attribute
After testing the app, you want to make it look nice with styles:
<... class="classname">
↓
<div class="sidebar__inner">
Outputting data into HTML attributes
When adding links or rendering images with alt tags, this is how you can fill the elements’ attributes:
< ... :name="variable">
↓
<a :href="`https://twitter.com/${author.twitter.value}`">
Outputting HTML
In certain cases, like when consuming rich texts from a headless CMS, you need to render already formatted HTML:
< ... v-html="variable"></...>
↓
<div v-html="article.teaser"></div>
Iterating over data sets
Iterating is useful for creating lists of items, like index pages of blogs or product catalogs:
< ... v-for="item in collectionVariable" :key="item.uniqueKey">
↓
<article v-for="article in articles" :key="article.id" ... >
Iterating over data sets with index
The same use case as before, but this way, you can access an index of each item:
< ... v-for="(item, index) in collectionVariable" :key="item.id">
↓
<article v-for="(article, index) in articles" :key="article.id" ... >
Rendering conditional markup
Conditions allow you to hide or display specific parts of markup based on data:
<... v-if="variable !== null">
↓
<div v-if="data.length > 0"> ... </div>
Rendering conditional markup including else branch
They can also be used to display preloaders in case of async data fetching to let your visitors know that something is happening:
<... v-if="variable !== null"> ...
<... v-else>
↓
<div v-if="data.length > 0"> ... </div>
<div v-else>Loading...</div>
Passing data to child components
When you start using components, this is how you can provide them with data from the parent:
<component :componentVariable="variable">
↓
<links :author="author">
You can also download this cheat sheet in printable form and check out its alternatives for React and Angular.
Top comments (0)