面接でよく聞かれる Vue 修飾子 13 個

<input type="text" v-model.lazy="値">
<div>{{値}}</div>

データ（） {
 戻る {
  値: '111111'
 }
}

<input type="text" v-model.trim="値">
<div>{{値}}</div>

データ（） {
 戻る {
  値: '111111'
 }
}

<input type="text" v-model.number="値">
<div>{{値}}</div>

データ（） {
 戻る {
  値: '111111'
 }
}

<div @click="clickEvent(2)" スタイル="幅:300px;高さ:100px;背景:赤">
    <button @click.stop="clickEvent(1)">クリック</button>
</div>

メソッド: {
 クリックイベント(数値) {
  // ボタンをストップなしでクリックすると 1 2 が出力されます
  // 停止を追加し、ボタンをクリックして出力 1 を実行しました
  コンソール.log(数値)
 }
}

<div @click.capture="clickEvent(2)" スタイル="幅:300px;高さ:100px;背景:赤">
    <button @click="clickEvent(1)">クリック</button>
</div>

メソッド: {
 クリックイベント(数値) {
  // キャプチャなしでボタンをクリックして1 2を出力します
  // キャプチャを追加し、ボタンをクリックして 2 1 を出力しました
  コンソール.log(数値)
 }
}

<div @click.self="clickEvent(2)" スタイル="幅:300px;高さ:100px;背景:赤">
    <button @click="clickEvent(1)">クリック</button>
</div>
メソッド: {
 クリックイベント(数値) {
  // selfを追加せずにボタンをクリックして1 2を出力します
  // self を追加しました。ボタンをクリックすると 1 が出力されます。div をクリックすると 2 が出力されます。
  コンソール.log(数値)
 }
}

<div @click.once="clickEvent(2)" スタイル="幅:300px;高さ:100px;背景:赤">
    <button @click="clickEvent(1)">クリック</button>
</div>

メソッド: {
 クリックイベント(数値) {
  // 一度もクリックしない場合は、ボタンを複数回クリックして 1 を出力します
  // 一度追加されます。ボタンを複数回クリックしても、1 が 1 回だけ出力されます。 
  コンソール.log(数値)
 }
}

<a href="#" rel="external nofollow" @click.prevent="clickEvent(1)">クリックしてください</a>

メソッド: {
 クリックイベント(数値) {
  // 防止しない場合は、ラベル a をクリックして最初にジャンプし、次に 1 を出力します。
  // 防止策を追加しました。ラベル a をクリックしてもジャンプせず、1 のみが出力されます。
  コンソール.log(数値)
 }
}

<My-component @click="shout(3)"></My-component>

<My-component @click.native="shout(3)"></My-component>

<button @click.middle="clickEvent(1)" @click.left="clickEvent(2)" @click.right="clickEvent(3)">クリックしてください</button>

メソッド: {
 // 中央のボタンをクリックして1を出力します
 // 左ボタンをクリックして2を出力します
 // 右クリックして3を出力
 クリックイベント(数値) {
  コンソール.log(数値)
 }
}

<div @scroll.passive="onScroll">...</div>

キャメルviewBoxがなければviewboxとして認識されます
<svg :viewBox="viewBox"></svg>

キャンメルviewBoxを追加した後にのみviewBoxとして認識されます
<svg :viewBox.camel="viewBox"></svg>

<children :foo="bar" @update:foo="val => bar = val"></children>

this.$emit('update:foo', newValue)

<children :foo.sync="bar"></children>

this.$emit('update:foo', newValue)

<input type="text" @keyup="叫ぶ(4)">

<input type="text" @keyup.keyCode="shout(4)">

//通常のキー。 
。タブ
.delete //(「delete」キーと「backspace」キーをキャプチャします)
。空間
。ESC
。上
。下
。左
。右
//システム修飾キー.ctrl
.alt
.メタ
。シフト

<input type="text" @keyup.ctrl="叫ぶ(4)">

<input type="text" @mousedown.ctrl.="叫ぶ(4)">

<入力タイプ="テキスト" @