Blog

Vue.jsを始めたばかりですか？それとも、Vueを使ってから長い年月が経ちましたか？このチートシートには、データをHTMLに出力する際の9つの最も一般的なタスクとソリューションがリストされています。

これらすべてのサンプルで、最初の部分は構文を示し、2番目の部分は実際のデータでの使用法を示しています。

データをHTMLに出力する

アプリの最初のテストまたはHTML要素間のデータのレンダリング：

 {{ variable }} ↓ {{ variable }} ↓

標準クラス属性の追加

アプリをテストした後、スタイルで見栄えを良くしたいとします。

 <... class = 'classname' > ↓  class = 'sidebar__inner' >

HTML属性へのデータの出力

リンクを追加したり、altタグを使用して画像をレンダリングしたりする場合、次のようにして要素の属性を入力できます。

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

HTMLの出力

ヘッドレスCMSからリッチテキストを使用する場合など、特定のケースでは、フォーマット済みのHTMLをレンダリングする必要があります。

 < ... v-html= 'variable' > ↓ 
 'article.teaser' >

データセットの反復

反復は、ブログのインデックスページや製品カタログなどのアイテムのリストを作成するのに役立ちます。

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

インデックスを使用してデータセットを反復処理する

以前と同じユースケースですが、このようにして、各アイテムのインデックスにアクセスできます。

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

条件付きマークアップのレンダリング

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

 <... v- if = 'variable !== null' > ↓ 
 if = 'data.length > 0' > ... 

elseブランチを含む条件付きマークアップのレンダリング

また、非同期データフェッチの場合にプリローダーを表示して、訪問者に何かが起こっていることを知らせるために使用することもできます。

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

子コンポーネントへのデータの受け渡し

コンポーネントの使用を開始するとき、これは、親からのデータをコンポーネントに提供する方法です。

  'variable' > ↓  'author' >

このチートシートを印刷可能な形式でダウンロードして、ReactとAngularの代替品を確認することもできます。