目次
1. Vue フィルター:
1. 知識を組み合わせる
Vue を使用すると、開発者はフィルターをカスタマイズできます。フィルターは通常、一般的なテキストの書式設定に使用されます。
たとえば、[自動車ブランド管理] の場合の日付のテキストの書式設定です。以下に示すように:
データの日付を取得した後、直接表示する効果が必要なものではない可能性があるため、表示する前に処理をカスタマイズする必要があり、処理後の結果を表示に使用するため、「フィルタリング」と呼ばれます。
具体的なケースでは追加、削除、確認の3つの機能を実現しており、各ステップの実装はブログに詳しく書かれています
学習については、次のリンクを参照してください。
フィルタは、補間式または v-bind 式の 2 つの場所で使用できます。フィルタは、構文として理解される「パイプ」文字で示される JavaScript 式の最後に追加する必要があります: { { xxx | filter } }または< p: v-bind="タイトル|フィルタ"></p>
フィルターには 2 種類あり、vue ではプライベート フィルターとグローバル フィルターを定義できます。
- プライベート フィルター: プライベート フィルターは、バインドされたvueインスタンスによって制御される領域でのみ使用できます。
- グローバル フィルター: すべてのVMインスタンスで共有
次は事例で学びましょう~~~~~~
2. 自動車ブランド管理ケース（時間形式）
-
プライベートフィルター:
main.js
インデックス.html
-
グローバルフィルター:
中国語のブランド名 + 英語の後にフィルターを使用します。
2. Vue キーボード修飾子
Web ページでは、キーボードのキーアップ応答イベントを監視する必要がある場合があります。たとえば、上記の例では、ユーザーが ID と名前を入力した後、[追加] ボタンからブランドは追加されませんが、名前の入力によってブランドが追加されます。ボックスが押されましたEnterキーを押して追加を完了します
Enter を使用して追加すると自動的に追加されます
Vue.js公式 Web サイト: https://cn.vuejs.org/v2/guide/events.html#key modifiersには、キー修飾子の説明があります。
keyup.keyboard 操作 = "実現された機能"
ここでも自動車ブランド管理を使用して完了します
<label>Name:
<!-- keyup监听键盘抬起事件:enter表示监听enter键抬起 -->
<input type="text" class="form-control" v-model="name" @keyup.enter="add()">
</label>
*: Vue はキーボードの共通キーのエイリアスを設定します。keyupイベントでは、このキーのキーコードを覚える必要はなく、エイリアスを直接使用するだけです。
。入力 。タブ.delete .esc .space。上下左右
- <!-- 113 はキーボードF2 に対応します -->
<input type="text" class="form-control" v-model="name" @keyup.113 ="add()">
- //カスタムキーボード修飾子
Vue.config.keyCodes.f2=113//<!-- 113 は キーボード F2 に対応します --><input type="text" class="form-control" v-model="name" @keyup.f2 ="add()">
*: ブラウザの F1 キーや Tab キーなど、一部のキーはシステムによって応答される場合があることに注意してください。これらのキーが定義されると、イベントがキャプチャされます。つまり、たとえイベントがあったとしても、システムが最初に応答します。 vue による組み込み キーについても同様である ため、カスタム キーボード キーがある場合は、キーの選択に何らかのスクリーニングが必要です キーボード キー コード 比較表 : Baidu を使用できます
プロジェクトのソースコード:
Vue 命令の包括的なケース - 自動車ブランド管理 (プロジェクト戦闘)-Node.js ドキュメント リソース-CSDN ダウンロード