VueJS -レンダリング

こんにちは、未来のVue.jsスーパースター！Vue.jsのレンダリングの世界へのエキサイティングな旅にあなたを案内できることを嬉しく思います。プログラミングを教えてきた年数を誇る者として、レンダリングのマスターは絵を描くことと同じように、デジタルキャンバスを生き生きとさせる方法だと言えます。では、袖をまくって、飛び込んでみましょう！

条件レンダリング

あなたがマジシャンで、ウェブページ上の物を手のひらで消したり現したりしたいと考えます。それは、Vue.jsの条件レンダリングが基本的にやることです！特定の条件に基づいて要素を表示したり非表示にしたりするだけです。

v-ifディレクティブ

v-ifディレクティブは私たちの最初の魔法のツールです。クラブのボーイのように、誰が入れて誰が入れないかを決めます。

<div id="app">
<h1 v-if="isVisible">Now you see me!</h1>
</div>

<script>
new Vue({
el: '#app',
data: {
isVisible: true
}
})
</script>

この例では、<h1>要素はisVisibleがtrueの場合にのみ表示されます。falseの場合は、ポーン！要素はDOMから完全に消えます。見えないだけでなく、存在しないように消えます！

v-elseとv-else-ifディレクティブ

さらに魔法を加えてみましょう。v-elseとv-else-ifを使います。

<div id="app">
<div v-if="temperature < 0">It's freezing!</div>
<div v-else-if="temperature < 20">It's cool.</div>
<div v-else>It's warm!</div>
</div>

<script>
new Vue({
el: '#app',
data: {
temperature: 25
}
})
</script>

ここでは、小さな天気予報を作成しています。temperatureの値に基づいて、異なるメッセージが表示されます。ステージに複数のトラップドアがあるように、一度に一つだけが開いている状態です！

v-showディレクティブ

時々、少し隠れたいときがあります。そこでv-showが登場します。

<div id="app">
<h1 v-show="isVisible">I'm always here, just sometimes invisible!</h1>
</div>

<script>
new Vue({
el: '#app',
data: {
isVisible: true
}
})
</script>

v-ifとは異なり、v-showは要素をDOMから削除しません。CSSを使って隠すだけです。要素に透明なマントをかけただけで、完全に消えるわけではありません。

リストレンダリング

物を現したり消したりする方法をマスターしたので、一つのテンプレートから複数の要素を作成する方法を学びましょう。ここでリストレンダリングが役立ちます！

v-forディレクティブ

v-forディレクティブは魔法のコピー機のようです。テンプレートを取り出し、配列やオブジェクトの各項目に対して複写します。

<div id="app">
<ul>
<li v-for="fruit in fruits">{{ fruit }}</li>
</ul>
</div>

<script>
new Vue({
el: '#app',
data: {
fruits: ['Apple', 'Banana', 'Cherry', 'Date']
}
})
</script>

この例では、私たちは果物の買い物リストを作成しています。v-forディレクティブはfruits配列の各果物を巡回し、新しい<li>要素を作成します。 elvesがそれぞれの果物の名前を書き込む新しい紙切れに似ています！

v-forを使ったオブジェクト

v-forは配列だけでなく、オブジェクトにも使えます！

<div id="app">
<ul>
<li v-for="(value, key) in person">{{ key }}: {{ value }}</li>
</ul>
</div>

<script>
new Vue({
el: '#app',
data: {
person: {
name: 'Alice',
age: 28,
job: 'Developer'
}
}
})
</script>

ここでは、人物の情報を表示しています。v-forディレクティブはpersonオブジェクトの各プロパティを巡回し、新しい<li>要素を作成します。

v-forを使った範囲

特定の数の要素を作成したい場合は、v-forもそれができます！

<div id="app">
<span v-for="n in 5">{{ n }} </span>
</div>

これは数字1から5を表示します。Vueに数を数えさせるようなものです！

キー属性

v-forを使う際には、各レンダリングされた要素にユニークなkeyを与えることが重要です。これにより、Vueはどのアイテムが変更されたか、追加されたか、削除されたかを追跡できます。

<div id="app">
<ul>
<li v-for="fruit in fruits" :key="fruit.id">
{{ fruit.name }}
</li>
</ul>
</div>

<script>
new Vue({
el: '#app',
data: {
fruits: [
{ id: 1, name: 'Apple' },
{ id: 2, name: 'Banana' },
{ id: 3, name: 'Cherry' }
]
}
})
</script>

keyは各要素の名札のようなものです。リストが変更될 때、Vueが誰が誰かを特定するのを助けます。

メソッド表

ここに、私たちが学んだメソッドの摘要表を示します：

ディレクティブ	目的	例
v-if	条件付きレンダリング	<div v-if="isVisible">Hello</div>
v-else	v-ifがfalseの場合の代替	<div v-else>Goodbye</div>
v-else-if	追加の条件	<div v-else-if="isSpecial">Special</div>
v-show	可視性の切り替え	<div v-show="isVisible">Always in DOM</div>
v-for	リストの要素をレンダリング	<li v-for="item in items">{{ item }}</li>

そして、私たちの熱心な学生の皆様！Vue.jsのレンダリングの基本をカバーしました。練習は完璧に近づくものですので、これらの概念を試してみないでください。すぐに、プロのようにVue.jsのコンポーネントをレンダリングし、ユーザーを驚かせる動的でインタラクティブなウェブページを作成できるようになるでしょう。codingを続け、学び続け、そして最も重要なのは、楽しむことです！

Credits: Image by storyset