→ Vue.js初心者レッスン1：インスタンスVue
→初心者向けVue.js、レッスン2：バインディング属性
→ Vue.js初心者レッスン3：条件付きレンダリング
→ Vue.js初心者レッスン4：リストレンダリング
→ Vue .js初心者向けレッスン5：イベント処理
→ Vue.js初心者向けレッスン6：クラスとスタイルのバインド
→ Vue.js初心者向けレッスン7：計算されたプロパティ
→ Vue.js初心者向けレッスン8：コンポーネント
レッスンの目的
私たちの主な目標は、データオブジェクト
brandとのプロパティによって記述されたデータをproduct1行で表示することです。
初期コード
開始 する
index.htmlタグにあるコードは次の<body>とおりです。
<div id="app">
<div class="product">
<div class="product-image">
<img :src="image" />
</div>
<div class="product-info">
<h1>{{ product }}</h1>
<p v-if="inStock">In stock</p>
<p v-else :class="{ outOfStock: !inStock }">Out of Stock</p>
<ul>
<li v-for="detail in details">{{ detail }}</li>
</ul>
<div
class="color-box"
v-for="variant in variants"
:key="variant.variantId"
:style="{ backgroundColor:variant.variantColor }"
@mouseover="updateProduct(variant.variantImage)"
></div>
<button
v-on:click="addToCart"
:disabled="!inStock"
:class="{ disabledButton: !inStock }"
>
Add to cart
</button>
<div class="cart">
<p>Cart({{ cart }})</p>
</div>
</div>
</div>
</div>
コードは
main.js次のとおりです。
var app = new Vue({
el: '#app',
data: {
product: 'Socks',
brand: 'Vue Mastery',
image: './assets/vmSocks-green.jpg',
inStock: true,
details: ['80% cotton', '20% polyester', 'Gender-neutral'],
variants: [
{
variantId: 2234,
variantColor: 'green',
variantImage: './assets/vmSocks-green.jpg'
},
{
variantId: 2235,
variantColor: 'blue',
variantImage: './assets/vmSocks-blue.jpg'
}
],
cart: 0
},
methods: {
addToCart() {
this.cart += 1
},
updateProduct(variantImage) {
this.image = variantImage
}
}
})
という名前の新しいプロパティがデータオブジェクトに追加されていることに注意してください
brand。
仕事
私たちは、に格納されているものしたい
brandとしてproduct1行にまとめることにします。つまり、だけでなく、タグ内の<h1>テキストを表示する必要があります。この問題を解決するには、Vueインスタンスに格納されている2つの文字列値をどのように連結できるかを考える必要があります。Vue Mastery SocksSocks
問題の解決策
この問題を解決するために、計算されたプロパティを使用します。これらのプロパティは値を格納しませんが、それらを計算するため、Vue
computedをインスタンス化するときに使用されるオプションオブジェクトにプロパティを追加し、次の名前の計算されたプロパティを作成しましょうtitle。
computed: {
title() {
return this.brand + ' ' + this.product;
}
}
私たちは、すべてが非常にシンプルかつ明確に配置されていると信じています。メソッドが呼び出されると
title()、それは文字列連結を行うbrandとproduct、次に、得られた新たな文字列を返します。
これ
titleで<h1>、ページのタグに表示するだけです。
これで、このタグは次のようになります。
<h1>{{ product }}</h1>
そして今、私たちはそれを次のようにします：
<h1>{{ title }}</h1>
このページを見て、今行ったことの機能を確認しましょう。
ページタイトルが変更されましたご覧の
とおり、タイトルが表示され
Vue Mastery Socksています。これは、すべてが正しく行われたことを意味します。
Vueインスタンスデータから2つの値を取得し、それらに基づいて新しい値を作成しました。値が
brand更新された場合、たとえば、このプロパティに文字列が書き込まれVue Crafteryた場合、計算されたプロパティのコードを変更する必要はありません。このプロパティは引き続き正しい文字列を返します。これは次のようになりVue Craftery Socksます。計算されたプロパティtitleはbrand、以前と同じように引き続きプロパティを使用しますが、brand新しい値が書き込まれます。
これは非常に単純な例でしたが、実際には非常に適切な例です。次に、計算されたプロパティのより複雑な使用法を見てみましょう。
より複雑な例
現在、を使用してページに表示されている画像を更新しています
updateProduct。それに渡し、対応する色付きの正方形の上にマウスを置いた後、メソッドに入ったものをvariantImageプロパティに書き込みimageます。関連するコードは次のようになります。
updateProduct(variantImage) {
this.image = variantImage;
}
このメカニズムは正常に機能しますが、画像だけでなく、マウスがホバーしている正方形の色に基づいて他の何かを変更する必要がある場合は、このコードをリファクタリングする必要があります。それに取り掛かろう。
つまり、データ
imageにプロパティを格納する代わりに、プロパティに置き換えますselectedVariant。0に初期化します。
selectedVariant: 0,
なぜ0？重要なのは
index、マウスが置かれている要素のインデックス（）に基づいてこのプロパティを設定することを計画しているということです。コンストラクトにインデックスを追加できますv-for：
<div
class="color-box"
v-for="(variant, index) in variants"
:key="variant.variantId"
:style="{ backgroundColor:variant.variantColor }"
@mouseover="updateProduct(variant.variantImage)"
></div>
以前の構成
v-for=«variant in variants»がコードであることに注意してくださいv-for=»(variant, index) in variants»。
代わりに渡すのでは今、
variant.variantImageにupdateProduct、さんは、このメソッドに渡すことができますindex：
@mouseover="updateProduct(index)"
それでは、メソッドのコードを見てみましょう
updateProduct。ここでインデックスを取得します。そして、代わりに新しい値を書き込むのthis.image書き込み、indexにthis.selectedVariant。つまり、マウスポインタが置かれた正方形に対応するselectedVariant値はに分類されindexます。また、デバッグの目的で、値をこのメソッドに記録するコマンドを配置しますindex。
updateProduct(index) {
this.selectedVariant = index;
console.log(index);
}
ここでページを更新して開発者ツールコンソールを開くと、正方形にカーソルを合わせると、値0と1がコンソールに表示されていることを確認できます。
作成したメカニズムの機能を確認する
ただし、ページに画像が表示されなくなりました。コンソールに警告が表示されます。
コンソールの警告
重要なのは、プロパティを削除してプロパティ
imageに置き換えたということですselectedValueが、このプロパティは引き続きアプリケーションで使用されています。問題をimageVueインスタンスに返すことで修正しましょう。ただし、今回は計算されたプロパティとして。対応するコードは次のようになります。
image() {
return this.variants[this.selectedVariant].variantImage;
}
ここでは
variantImage、配列要素のプロパティを返しますthis.variants[this.selectedVariant]。配列要素にアクセスするためのインデックスとして、this.selectedVariant0または1に等しいプロパティが使用されます。これにより、それぞれ、最初または2番目の配列要素にアクセスできます。
ここでページを更新すると、画像が表示され、色付きの正方形の上にマウスを置いたときに反応します。しかし現在、このメカニズムは計算されたプロパティを使用して実装されています。プロパティの状態を更新
するメソッドのコードをリファクタリングしたので、オブジェクトに追加するフィールドなど、配列からオブジェクトに格納されている他のデータを操作できます。
updateProductselectedVariantvariantsvariantQuantity
variants: [
{
variantId: 2234,
variantColor: 'green',
variantImage: './assets/vmSocks-green.jpg',
variantQuantity: 10
},
{
variantId: 2235,
variantColor: 'blue',
variantImage: './assets/vmSocks-blue.jpg',
variantQuantity: 0
}
],
レッツは、通常のプロパティを取り除く
inStockプロパティでの作業と同じように、そしてimage、返り値に基づいて行われます、同じ名前を持つ、新しい計算されたプロパティの作成selectedVariantとをvariantQuantity：
inStock(){
return this.variants[this.selectedVariant].variantQuantity
}
このプロパティは、計算されたプロパティと非常によく似ています
image。しかし、今度は、対応するオブジェクトからプロパティvariantImageではなく、プロパティを取得しますvariantQuantity。
ここでマウスを正方形の上に置くと、それに対応する商品の数はゼロに等しく、
inStock0はに分類され、JavaScriptでは0はブール値に変換できる値になりますfalse。このため、ページにメッセージが表示されますOut of Stock。
以前の
inStockように0に設定すると、ボタンも正しく反応することに注意してください。
ボタンとラベルは各製品の数量によって異なりますが、
なぜすべてが正しく機能し続けるのですか？重要なのは、
inStockクラスdisableButtonをボタンにバインドするためにまだ使用されているということです。アプリケーションの新しいバージョンと以前のバージョンの唯一の違いinStockは、通常のプロパティではなく、計算されたプロパティになったことです。
計算されたプロパティの詳細
計算されたプロパティはキャッシュされます。つまり、これらのプロパティの計算結果は、これらの結果が依存するデータが変更されるまでシステムに保存されます。その結果、変更される
variantQuantityと、キャッシュはクリアされます。そして、inStock次にアクセスされたときに、プロパティは新しい結果を返し、それはキャッシュに配置されます。
これを考慮すると、特定の値を取得するためにリソースを大量に消費する計算が必要な場合は、メソッドではなく計算されたプロパティを使用してそれらを実行する方が有益であると言えます。対応する値が必要になるたびに、メソッドを呼び出す必要があります。
また、計算されたプロパティコードのVueインスタンスに格納されているデータを変更してはならないことを覚えておくことが重要です。このコードでは、既存のデータに基づいて計算を実行するだけです。これらの機能はクリーンで副作用がない必要があります。
ワークショップ
Vueインスタンスの作成に使用されるデータオブジェクトに新しいブールプロパティを追加します
onSale。販売が進行中であるかどうかを示します。計算されたプロパティ作成saleに基づいておりbrand、productそしてonSaleラインを形成し、それが今そこに販売を行ってたりしていないことが報告されました。この行を製品カードに出力します。
→ここであなたは、この問題を解決するために使用できるテンプレートは
→こちらで問題を解決
結果
このレッスンでは、計算されたプロパティについて学習しました。これらについて私たちが学んだ最も重要なことは次のとおりです。
- 計算されたプロパティは値を計算し、保存しません。
- 計算されたプロパティは、アプリケーションに格納されているデータを使用して、アプリケーションから新しいデータを作成できます。
このコースで宿題をしている場合は、提供されていることだけを行っているのか、それともさらに進んでいるのかを教えてください。
→ Vue.js初心者レッスン1：インスタンスVue
→初心者向けVue.js、レッスン2：バインディング属性
→ Vue.js初心者レッスン3：条件付きレンダリング
→ Vue.js初心者レッスン4：リストレンダリング
→ Vue .js初心者向けレッスン5：イベント処理
→ Vue.js初心者向けレッスン6：クラスとスタイルのバインド
→ Vue.js初心者向けレッスン7：計算されたプロパティ
→ Vue.js初心者向けレッスン8：コンポーネント
