2番目のレッスンでは、属性バインディングについて、Vueインスタンスに格納されているデータをHTML要素の属性に接続することについて。 → 最初のレッスン
レッスンの目的
ここでは、画像を表示し、属性バインディングを使用して属性テキストを設定する方法を見ていきます
alt。Vueインスタンスから関連データを取得します。
初期コード
ファイル
index.htmlのタグにある<body>次のHTMLコードから始めましょう。
<div id="app">
<div class="product">
<div class="product-image">
<img src="" />
</div>
<div class="product-info">
<h1>{{ product }}</h1>
</div>
</div>
</div>
<div>クラス
のタグに注意してくださいproduct-image。これには<img>、画像の表示に必要なデータを動的にバインドする要素が含まれています。クラスを持つ
要素は、製品の名前を表示するために使用されます。 ファイルに含まれるJavaScriptは次のとおりです。
<div>product-info
main.js
var app = new Vue({
el: '#app',
data: {
product: "Socks",
image: "./assets/vmSocks-green.jpg"
}
})
オブジェクトには、画像へのパスを含む
data新しいプロパティがあることに注意してくださいimage。
→ このチュートリアルで使用するCSSはここにあります。
スタイルをに接続するには
index.html、タグに<head>次を追加します：
<link rel="stylesheet" type="text/css" href="style.css"
ここでは、スタイルファイルに名前が
style.cssあり、と同じフォルダーに保存されているという前提から始めますindex.html。
ここで私たちがページに表示されますことを画像です。
仕事
ページに表示する画像が必要です。その際、この画像を動的に操作したいと考えています。つまり、Vueインスタンスに保存されている画像へのパスを変更し、ページ上でこれらの変更の結果をすぐに確認できる機能が必要です。要素がどの画像を表示するかを担当するのは
src要素属性なので<img>、この属性にデータをバインドする必要があります。これにより、Vueインスタンスに格納されたデータに基づいて画像を動的に変更できます。
重要な用語：データバインディング
Vueでのデータバインディングについて話すとき、重要なのは、データが使用または表示されるテンプレート内の場所が、データソース、つまりインスタンスに格納されている対応するオブジェクトに直接「接続」または「リンク」されていることです。 Vue。
つまり、データソースエンティティは、このデータが使用されるエンティティとデータシンクに関連付けられています。この例では、データソースはVueインスタンスであり、シンクは
src要素の属性です<img>。
問題の解決
プロパティ値
imageをデータオブジェクトからsrcタグプロパティ<img>にバインドするには、Vueディレクティブを使用しますv-bind。<img>ファイルからタグコードを書き換えましょうindex.html：
<img v-bind:src="image" />
Vueがページを処理しているときにそのような構造を見ると、フレームワークはそれを次のHTMLコードに置き換えます。
<img src="./assets/vmSocks-green.jpg" />
すべてが正しく行われると、ページに画像が表示されます。
緑の靴下の画像はページ上に表示されて
そして、あなたはの値変更した場合
image、オブジェクトのプロパティをdata、属性値はそれに応じて変化しますsrcページ上の新しいイメージの表示につながるであろう。
緑の靴下を青い靴下に置き換えたいとしましょう。これを行うには、新しい画像を含むファイルへのパスが次のようになっている場合
./assets/vmSocks-blue.jpg（画像ファイルはここにあります）、imageオブジェクトのプロパティの説明コードdataを次の形式にするだけで十分です。
image: "./assets/vmSocks-blue.jpg"
これにより、青い靴下のイメージがページに表示されます。
青い靴下の画像がページに表示されています
vバインドのその他の使用例
このディレクティブ
v-bindは、属性だけでなく使用することもできますsrc。また、画像属性を動的に調整するのにも役立ちますalt。
オプションを使用してオブジェクトに
data新しいプロパティを追加しましょうaltText：
altText: "A pair of socks"
対応するデータを属性
altにバインドして、要素コード<img>を次の形式にします。
<img v-bind:src="image" v-bind:alt="altText" />
ここでは、attributeの場合と同様に、コロンと属性名（）
srcで構成される構成が使用されv-bindますalt。
Vueのインスタンスのプロパティが変更場合さて、
imageまたはaltText、<img>更新されたデータが表示されます、対応する要素の属性に。これにより、要素の属性とVueインスタンスに格納されているデータの間のリンクが壊れることはありません。
この手法は、Vueアプリケーションの開発時に常に使用されます。このため、建設記録の簡略版があり
v-bind:ます。のように見えます:。タグコードを記述するときにこの手法を使用<img>すると、次のようになります。
<img :src="image" />
シンプルで便利です。この手法により、コードのクリーン度が向上します。
ワークショップ
<a>テキスト付きの
リンク（要素）をページに追加しますMore products like this。オブジェクトで、リンクを含むdataプロパティlinkを作成しますhttps://www.amazon.com/s/ref=nb_sb_noss?url=search-alias%3Daps&field-keywords=socks。ディレクティブを使用してv-bind、プロパティlinkをhref要素の属性にバインドします<a>。
→これは、この問題を解決するために使用できるテンプレートです。
→これが問題の解決策です。
概要
今日私たちが学んだことは次のとおりです。
- Vueインスタンスに格納されたデータは、HTML属性にバインドできます。
- このディレクティブは、データを属性にバインドするために使用されます
v-bind。このディレクティブの省略形はコロン（:）です。 - コロンに続く属性名は、データがバインドされている属性を示します。
- 引用符で指定された属性の値として、キーの名前が使用されます。これにより、属性に接続されているデータを見つけることができます。
このコースを受講する場合は、宿題に使用する環境について教えてください。
→ パート1：Vueのインスタンス化
→ パート2：Vueでの属性バインディング
