この記事では、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 Vue ディレクティブとは
Vue では、ディレクティブは実際には特別な属性です
Vue は、 Vue はディレクティブに基づいてシーンを作成します 具体的に何をするかというと、Vue は命令に応じて動作を変えます 詳細は後述します
#1.2 特徴とは
Vue 命令の明らかな特徴は、v-text<span v-text="msg"></span>
組み込み命令とは、すぐに使用できる 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="'<h1>Hello LBJ</h1>'"></div>
)。内部のコンテンツは次のように挿入する必要があることに注意してください。通常の HTML
2.2.3 v-show
v-show は式の true 値に基づくことができます false 値は要素の表示値を切り替えます、要素の表示と非表示を制御するために使用されます。例:
条件が変化すると、この命令がトランジション効果の表示または非表示をトリガーすることがわかります注: v-show は 要素をサポートしておらず、v-else
もサポートしていません。 v-if は、式の true または false の値に基づいて要素を条件付きでレンダリングするために使用されます。
v-show と比較すると、v-if は、単純に表示して要素を表示するのではなく、切り替え時に要素を破棄または再構築します。 Hide
#式が false の場合、v-if は要素を直接破棄しますが、v-show は要素を視覚的に非表示にするだけであることがわかります
And v -if は にすることができ、要素が の場合、そのコンテンツは条件付きブロックとして抽出されます
#2.2.5 v-else
#v-else は式を必要としません。これは、「else ブロック」を追加することを意味します。これは、v-if が条件を満たす場合は v-if の要素を表示し、それ以外の場合は v-else の要素を表示するのと同じです。次に例を示します。
注: v-else の前の兄弟要素には、v-if または v-else-if
2.2.6 v-else が必要です。 -if
同様に、v-if を表す「else if ブロック」は v-else と同じです。前の兄弟要素には v-if または v-else-if が必要です。次に例を示します。
2.2.7 v-for
v-for は反復用のディレクティブで、複数の要素またはテンプレート ブロックをレンダリングできます。#オブジェクトに使用される配列インデックスまたはキーのエイリアスを指定することもできます#
<div v-for="(item, index) in items"></div> <div v-for="(value, key) in object"></div> <div v-for="(value, name, index) in object"></div>
2.2.8 v-on
v-on はイベントを要素にバインドするために使用され、@
Modifier
と省略できます。 .stop - event.stopPropagation()
を呼び出します。.prevent - 调用 event.preventDefault()
.capture - 添加事件侦听器时使用 capture 模式
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调
.{keyAlias} - 仅当事件是从特定键触发时才触发回调
.once - 只触发一次回调
.left - 只当点击鼠标左键时触发
.right - 只当点击鼠标右键时触发
.middle - 只当点击鼠标中键时触发
.passive - { passive: true } 模式添加侦听器
例如：
<!-- 停止冒泡 --> <button @click.stop="doThis"></button>
需要注意，用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件
2.2.9 v-bind
v-bind用于绑定数据和元素属性，可以缩写为: 或.(当使用 .prop 修饰符时)，比如
<div :someProperty.prop="someObject"></div> <!-- 相当于 --> <div .someProperty="someObject"></div>
v-bind的3个修饰符
.camel - 将 kebab-case attribute 名转换为 camelCase
.prop - 将一个绑定强制设置为一个 DOM property。3.2+
.attr - 将一个绑定强制设置为一个 DOM attribute。3.2+
2.2.10 v-model
v-model限制于：
