Vue.js-レンダリングリスト

ショッピングモールのプロジェクトをしているうちに、少し感じました.ショッピングモールにはいろいろな分類があり、分類にはたくさんの商品があります.
したがって、最も簡単なアイデアは、各商品にすべての情報を入力し、対応するhtmlファイルを作成することです.しかし、これは本当に非常に非効率な方法です.Vue.jsのリストレンダリングで、少し効率が向上しましたか?正しい方法を勉強しています.
V-forによるアレイのマッピング
v-forディレクトリを使用して、アレイに基づいてリストをレンダリングできます.v-for dictiveはitem in itemsの形式で特殊な構文を使用する必要があります.ここで、itemsは元のデータ配列であり、itemは重複配列の別名である.
基本的な使い方

<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>

この場合,{{}}はデータバインドの最も基本的なテキストパケットである.

var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

:key

Vueの仮想DOMアルゴリズムは、ノードのIDを識別するために使用される.これにより、Vueは、既存のノードをいつ取得および再使用し、いつ再ソートおよび再生する必要があるかを決定できます.

VUEは、

配列の属性を直接指定したり、長さを変更したりするなど、変化を検出できない場合があり、また、素子自体の範囲が分離されており、データが変更されても自動的に伝達されない.
キーを指定すると、データの変更を検出して再レンダリングできます.2.2.0以降では、v-forがキー値を強制的に使用する必要があります.

注意:https://kr.vuejs.org/v2/guide/list.html
https://icerabbit.tistory.com/119
https://ruddls00114.github.io/2019/06/17/Vue.js-v-model-%EC%9D%B4%EB%9E%80/


v-if
v-ifディレクトリは、条件付きでブロックをレンダリングするために使用されます.ブロックは、コントローラの式がtrue値を返す場合にのみレンダリングされます.
v-model
データバインドとは?

データバインディングとは、VueJSのバインディング式を使用してスクリプトとDOMとの間でデータを交換するプロセス

である.

v-modelは、Vueでの双方向バインドを可能にする.

一方向バインディングは、画面

にデータを出力することができる.

双方向バインディングは、画面から入力を受信してデータに再送信するプロセスを追加することを意味し、これは双方向バインディングを意味する.

vモデルデータをバインドすることにより、search-barに必要な値

を入力する.

v-クエリーのitem titleに入力値が含まれている場合、add()はitemのitem titleをリフレッシュします.

検索ウィンドウで「coco」を検索すると、その値に一致するtitle値の項目が表示されます.