VueHTMLにデータをレンダリングする

あなただけのVueを始めています.JS ?またはVueで働いて以来、それは長いされている?このカンニングペーパーは、HTMLにデータを出力する際に最も一般的なタスクとソリューションを一覧表示します.
これらのサンプルでは、最初の部分は構文を示し、2番目の部分は実際のデータでの使用方法を示しています.

HTMLにデータを出力する
HTML要素間のアプリケーションまたはレンダリングデータの最初のテスト:

{{ variable }}
↓
{{ metadata.subtitle.value }}

標準クラス属性の追加
アプリをテストした後、それはスタイルで素敵に見えるようにしたい:

<... class="classname">
↓
<div class="sidebar__inner">

HTML属性にデータを出力する
ALTタグでリンクを追加したり、画像をレンダリングするときは、要素の属性を埋める方法です.

< ... :name="variable">
↓
<a :href="`https://twitter.com/${author.twitter.value}`">

出力HTML
場合によっては、ヘッドレスのCMSからリッチテキストを消費するときには、既にフォーマットされたHTMLをレンダリングする必要があります.

< ... v-html="variable"></...>
↓
<div v-html="article.teaser"></div>

データセットの反復処理
Iteratingは、ブログや製品カタログのインデックスページのようなアイテムのリストを作成するのに便利です.

< ... v-for="item in collectionVariable" :key="item.uniqueKey">
↓
<article v-for="article in articles" :key="article.id" ... >

インデックス付きデータセットの反復処理
以前と同じユースケースですが、この方法では、各項目のインデックスにアクセスできます.

< ... v-for="(item, index) in collectionVariable" :key="item.id">
↓
<article v-for="(article, index) in articles" :key="article.id" ... >

条件付きマークアップのレンダリング
条件を使用すると、データに基づいてマークアップの特定の部分を非表示または表示できます.

<... v-if="variable !== null">
↓
<div v-if="data.length > 0"> ... </div>

他のブランチを含む条件付きマークアップのレンダリング
また、あなたの訪問者が何かが起こっているということを知らせるために非同期のデータ取得の場合にはプレローダーを表示するために使用することができます

<... v-if="variable !== null"> ...
<... v-else>
↓
<div v-if="data.length > 0"> ... </div>
<div v-else>Loading...</div>

子コンポーネントへのデータ渡し
コンポーネントの使用を開始すると、親からデータを取得できます.

<component :componentVariable="variable">
↓
<links :author="author">

また、printable formでこのカンニングペーパーをダウンロードし、alternatives for React and Angularをチェックアウトすることもできます.