Vue.js記法：event関連

event処理関数１：（パラメータ）

<div id="example-3"> <button v-on:click="say('hi')">Say hi</button> <button v-on:click="say('what')">Say what</button> </div>

new Vue({ el: '#example-3', methods: { say: function (message) { alert(message) } } })

event処理関数２：（パラメータ、イベント）

<button v-on:click="warn('Form cannot be submitted yet.', $event)"> Submit </button>

// ... methods: { warn: function (message, event) { // 现在我们可以访问原生事件对象 if (event) { event.preventDefault() } alert(message) } }

イベント修飾子

• .stop
• .prevent
• .capture
• .self
• .once
• .passive

<!-- 阻止单击事件继续传播 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再重载页面 --> <form v-on:submit.prevent="onSubmit"></form> <!-- 修饰符可以串联 --> <a v-on:click.stop.prevent="doThat"></a> <!-- 只有修饰符 --> <form v-on:submit.prevent></form>

<!-- 顶级拦截，之后转发内部元素 --> <!-- 添加事件监听器时使用事件捕获模式 --> <!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 --> <div v-on:click.capture="doThis">...</div> <!-- 只当在 event.target 是当前元素自身时触发处理函数 --> <!-- 即事件不是从内部元素触发的 --> <div v-on:click.self="doThat">...</div>

注意：

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，
而 v-on:click.self.prevent 只会阻止对元素自身的点击。

不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，
同时浏览器可能会向你展示一个警告。
请记住，.passive 会告诉浏览器你不想阻止事件的默认行为。

KeyDown event処理

<input v-on:keyup.enter="submit">

<input v-on:keyup.page-down="onPageDown"> //keyNameを利用

<input v-on:keyup.13="submit">　//KeyCodeおすすめしない。古い書き方

• .enter
• .tab
• .delete (delete and backspace)
• .esc
• .space
• .up
• .down
• .left
• .right
グローバルキーコード宣言： config.keyCodes

　　Vue.config.keyCodes.f1 = 112

システムキー

• .ctrl
• .alt
• .shift
• .meta

<!-- Alt + C --> <input @keyup.alt.67="clear"> <!-- Ctrl + Click --> <div @click.ctrl="doSomething">Do something</div>

ctrキーとctr+shiftキーの区別

<button @click.ctrl="onClick">A</button> //ctr+shift同時押下も有効

<button @click.ctrl.exact="onCtrlClick">A</button>　// ctr+shift同時押下無効

<button @click.exact="onClick">A</button>//どのシステムキーも押下されずの場合、

マウスevent

• .left
• .right
• .middle