vue常用修飾子

vueには、次の修飾子があります.
1.イベント修飾子
vueはv-onにイベント修飾子を提供し、点(.)を通過する.表示されるコマンド接尾辞は、修飾子を呼び出すために使用されます.
.stop
クリックイベントのバブルを阻止します.JavaScriptのeventと同じです.stopPropagation()例:

例1、泡立ち防止:

 
　　
 
　　　　
 
　　　　　　   (^_^)
 　　　　
 　　
 

使用しました.stop後、サブノードをクリックしても親ノードのイベントはキャプチャされません
.prevent
JavaScriptのeventと同様に、イベントがキャンセル可能である場合、イベントのさらなる伝播を停止することなく、イベントがキャンセルされることを防止する.preventDefault()は、JavaScriptのeventに等しい.preventDefault()は、デフォルトのイベントをキャンセルするために使用されます.たとえば、私たちのページのラベルは、ユーザーがクリックすると、ブラウザのWebサイトに#が表示されます.たとえば、次のようになります.

.capture
イベントバブルの方向とは逆に、イベントキャプチャは外から内へ、イベントキャプチャ:2、3層の親子関係をネストし、すべてクリックイベントがあり、サブノードをクリックすると、外から内の親ノード-」サブノードのクリックイベントがトリガーされます.

<div id="app"> 
　　<div class="outeer" @click.capture="outer"> 
　　　　<div class="middle" @click.capture="middle"> 
　　　　　　<button @click.capture="inner">   (^_^)button>
 　　　　div>
 　　div> 
div>

.self
サブエレメントを含まない自分の範囲内のイベントのみがトリガーされます

<div id="app"> 
　　<div class="outeer" @click.self="outer"> 
　　　　<div class="middle" @click.self="middle"> 
　　　　　　<button @click.stop="inner">   (^_^)button>
 　　　　div>
 　　div> 
div>

.once
@clickイベントに追加する場合は、一度だけ実行します.once修飾子は、ボタンをクリックするだけで1回しか実行されません.

.passive
VueはaddEventListenerのpassiveオプションにも対応する.passive修飾子

...

これpassive修飾子は、特に移動端の性能を向上させることができる.やめてくれpassiveと.preventは一緒に使います.preventは無視され、ブラウザが警告を示す可能性があります.覚えておいてください.passiveは、イベントのデフォルトの動作を阻止したくないことをブラウザに伝えます.
イベント修飾子は直列に接続することもできます
例:

注意:修飾子を使用する場合は、順序が重要です.対応するコードは同じ順序で生成されます.したがって、v-on:clickを用いる.prevent.selfはすべてのクリックを阻止し、v-on:click.self.preventは要素自体へのクリックを阻止するだけです.
2.キーボード修飾子
JavaScriptイベントでは、前述のイベントのほかにキーボードイベントもあり、一般的なキー値を監視する必要があることがよくあります.Vueでは、v-onがキーボードイベントをリスニングするときにキー修飾子を追加できるようにします.すべてのkeyCodeを覚えるのは難しいので、Vueは最もよく使われるキーボードイベントに別名を提供します:.Enter:リターンキー.tab:タブキー.delete:deleteとbackspaceキーを含む.Esc:戻るキー.スペース:スペースキー.up:上へキー.down:下キー.left:左ボタン.right:右ボタン
例:

すべてのkeyCodeを覚えるのは難しいので、Vueは最も一般的なキーに別名を提供します.

グローバルconfig.keyCodesオブジェクトカスタムキー修飾子別名:

//      `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112

3.システム修飾キー
マウスやキーボードのイベントは、それぞれのキーを押すときのみトリガーするリスナーを、以下の修飾子で実現することができる.ctrl .alt .shift .meta
注意:Macシステムのキーボードでは、metaはcommandキー(□)に対応しています.WindowsシステムのキーボードmetaでWindowsバッジキーに対応します.Sunオペレーティングシステムのキーボードでは、metaはソリッド宝石キー(◆)に対応します.他の特定のキーボード、特にMITおよびLispマシンのキーボード、およびその後継製品、例えばKnightキーボード、space-cadetキーボードでは、metaは「META」とマークされている.Symbolicsキーボードでは、metaは「META」または「Meta」と表記されています.
例:

Do something

注意:
修飾キーは通常のキーとは異なり、keyupイベントとともに使用する場合、イベントトリガ時に修飾キーが押されている必要があります.すなわち、ctrlを押す場合にのみ他のキーを解放することでkeyupをトリガすることができる.ctrl.ctrlを解放してもイベントはトリガーされません.もしあなたがこのような行為をしたいなら、ctrlのためにkeyCode:keyupを交換してください.17.
.exact修飾子
.exact修飾子を使用すると、正確なシステム修飾子の組み合わせによってトリガーされるイベントを制御できます.

A


A


A

マウスボタン修飾子
マウス修飾子は、プロセッサが特定のマウスボタンをリスニングすることを制限するために使用されます.よくあるのは:.left .right .middleこれらの修飾子は、処理関数が特定のマウスボタンにのみ応答することを制限します.
カスタムキー修飾子別名
Vueではconfigを通過することができる.keyCodesカスタムキー修飾子別名.例えば、keycode 116(すなわちF 5)の別名がf 5として予め定義されているため、文字入力ボックスでF 5を押すとpromptメソッドがトリガーされ、alertが現れる.

<template>
  <div class="main">
      <input type="text" @keyup.f5="prompt()" />
  div>
template>
<script>
export default {
  data() {
    return {
    };
  },
  methods:{
      prompt(){
          alert("aaaaa")
      }
  }

};
script>

f 5をクリックするとすぐにpromptメソッドが呼び出されます.
4.修飾子
(1).lazy
変更後にトリガーされます(つまりカーソルがinput入力ボックスから離れたときにのみ値が変更されます)

(2).number
出力文字列をNumberタイプ・に変換します(typeタイプはnumberタイプを定義していますが、文字列を入力するとstringを出力します)

(3).trim
ユーザーが入力した先頭と末尾のスペースを自動的にフィルタ