スクラッチからカスタム命令を手動でカプセル化するまで、16 の Vue 命令について学習します。

この記事では、Vue 命令とカスタム命令の手動カプセル化に関する関連知識を提供します。

フロントエンドの基本的な面接では、Vue の指示は高頻度の面接の質問とみなされます

面接官は次のように尋ねました: Vue にはどのような指示がありますか?

彼に伝えてください: Vue3.2 の時点で、Vue には次のような組み込み命令が合計 16 個あります:

v-text、v-html、v-show、v-if 、v-else、v-else-if、v-for、v-on、v-bind、v-model、v-slot、v-pre、v-cloak、v-once、v-memo、v-isこのうち、v-memo は 3.2 で新しく追加され、v-is は 3.1.0 で廃止されました。

インタビュアーがさらに質問した場合: カスタム命令をカプセル化するにはどうすればよいですか?

彼に教えてください: カスタム命令はグローバル カスタム命令とローカル命令に分けられます。Vue3 では、アプリケーション インスタンスの directive() を通じてグローバル カスタム命令を登録できます。ローカル命令を登録したい場合は、コンポーネントのディレクティブ オプションを設定して、ローカル命令を登録できます

この記事を読むと、16 の Vue 命令を完全に理解し、ディレクティブをカスタマイズする方法を習得できます

1. はじめに

1.1 Vue ディレクティブとは

Vue では、ディレクティブは実際には特別な属性です

Vue は、 Vue はディレクティブに基づいてシーンを作成します 具体的に何をするかというと、Vue は命令に応じて動作を変えます 詳細は後述します

#1.2 特徴とは

Vue 命令の明らかな特徴は、v-text

<span v-text="msg"></span>

2 のように、命令がすべて v- で始まることです。

#2.1 Vue の組み込み命令とは何ですか?

組み込み命令とは、すぐに使用できる Vue 独自の命令を指します。 ##Vue には、次のような合計 16 の組み込み命令があります: v-text、v-html、v-show、v-if、v-else、v-else-if、v-for 、v-on、v-bind、v-model、v-slot、v-pre、v-cloak、v-once、v-memo、v-is、そのうち v-memo は 3.2 の新機能、v-isは 3.1.0 で廃止されました

これらの組み込み命令を見てみましょう基本的な使用法

2.2 16 の組み込み命令の基本的な使用法を理解します

2.2.1 v-text v-text は、要素の textContent を更新するために使用されます。例:

<h1 v-text="msg"></h1>

h1 要素の内容は最終的に msg の値に依存します

2.2.2 v-html

は非常に似ていますただし、要素の innerHTML を更新するために v-html が使用される点は異なります (

<div v-html="&#39;<h1>Hello LBJ</h1>&#39;"></div>

)。内部のコンテンツは次のように挿入する必要があることに注意してください。通常の HTML

2.2.3 v-show

v-show は式の true 値に基づくことができます false 値は要素の表示値を切り替えます、要素の表示と非表示を制御するために使用されます。例:

条件が変化すると、この命令がトランジション効果の表示または非表示をトリガーすることがわかります

注: v-show は