Vue-ショッピングカートの演習

ショッピング カート GitHub: GitHub - TsundereAchen/Vue-Demo

スロット

1. コンポーネントをカプセル化するのは Vue の機能であり、ユーザーは開発中に不確実なユーザー指定の部分をスロットとして定義できます。
2. Vue ではスロットに名前を付けることが規定されており、省略した場合はデフォルトの名前が使用されます。
3. スコープ スロット: v スロットはテンプレートまたはコンポーネントにのみ配置できます。
4. テンプレート タグは、ラッパーとしてのみ機能する仮想タグであり、HTML 要素にはレンダリングされません。
5. バックアップ コンテンツはスロット内で宣言できます。ユーザーが表示するフィル コンテンツを指定しない場合、命令はデフォルトのコンテンツをオーバーライドします。

 

 動的命令

コンポーネントの非表示または表示を動的に制御します。

Component は Vue の組み込みコンポーネントです。ラベルのプレースホルダーとして機能します。is 属性はコンポーネントの名前を表示します。この名前はコンポーネント ノードの下に登録されている名前です。

<コンポーネントは = "左"></コンポーネント>

カスタム命令

ディレクティブはグローバルディレクティブとプライベートディレクティブに分かれており、登録方法はフィルターと同様です。

カスタム命令はバインド関数をトリガーします。

バインド機能は、初回バインド時に有効になります 更新データが変更されたときに有効になります 初回では有効ではありません

バインドと更新のロジックが同じであれば、カスタム命令を関数として省略できます。

 directives: {
        color: {
            bind(e, binding) {
                e.style.color = binding.value;
            }
        }
    }

        <p class="pp" v-color="'pink'">{
   
   { count }}</p>