[30天 Vue学好学满 DAY11] v-on

v-on

监听DOM并进行触发
v-on: -> 简写 @

v-on:click="xxx"
@click="xxx"

监听执行 JavaScript

定义Data

text: ""

HTML

<button @click="text = 'show value!'">按我</button>
<h1>text : {{ text }}</h1>

前端实现

监听执行方法

调整HTML触发，并带入参数

<button @click="doShowValue('show value!')">按我</button>

定义方法

doShowValue: function () {
    this.text = "show value!";
},

-> 可达到相同效果

访问原生DOM事件

透过 $event 传入方法

<button @click="warn('warn warn warn warn warn', $event)">
    访问测试
</button>

定义方法

warn: function (message, event) {
    if (event) {
        event.preventDefault();
    }
    alert(message);
},

前端实现
按下访问测试按钮

事件修饰符

vue提供事件修饰符，直接处理DOM细节，如以下
.stop : 防止冒泡。ex :DOM重叠时，点击内层按钮会同时触发外层按钮，同於stopPropagation()
.prevent : 防止预设行为，单纯执行所绑定的事件。同於preventDefault()
.capture : 捕获事件，优先触发。
.self : 只触自己范围的事件，不进行子层事件。
.once : 只会触发一次。
.passive : 与prevent相反，不执行preventDefault()

事件修饰符可连续使用

<a @click.stop.prevent="doThat"></a>

顺序会影响执行的结果

// 阻止所以点击
@click.prevent.self

冲突会产生警告

按键修饰符

监听特定键盘按键
.enter
.tab
.delete (delete & backspace)
.esc
.space
.up
.down
.left
.right

在Enter时触发submit

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

keyCode attribute

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

前端实现: 输入k (不须按下enter)

系统修饰符

.ctrl
.alt
.shift
.meta

vue 官方范例

<!-- Alt + C -->
<input v-on:keyup.alt.67="clear">

<!-- Ctrl + Click -->
<div v-on:click.ctrl="doSomething">Do something</div>

.exact 精确的系统修饰符组合
vue 官方范例

<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button v-on:click.ctrl="onClick">A</button>

<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button v-on:click.ctrl.exact="onCtrlClick">A</button>

<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button v-on:click.exact="onClick">A</button>

鼠标修饰符
.left
.right
.middle

补上 DOM事件

有错误请不吝指教!
参考资料
https://vuejs.org/v2/guide
https://ithelp.ithome.com.tw/articles/10198986
https://ithelp.ithome.com.tw/articles/10198999
https://ithelp.ithome.com.tw/articles/10203933
https://ithelp.ithome.com.tw/articles/10199021
https://cythilya.github.io/2017/04/17/vue-methods-and-event-handling/

感谢各路大神