之前学习到v-on指令绑定，引入了事件绑定。所以这一章学习事件相关知识。先把之前的一个例子贴出来：
<template>
<div>
<input type="text" v-bind:value="number">
<button @click="addFunction">number + 1</button>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
number: 1
}
},
methods: {
addFunction: function (event) {
this.number++
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
h2 {
text-align: left;
}
ul {
list-style-type: none;
padding: 0;
}
a {
color: #42b983;
}
</style>
v-on
v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。
过多的介绍都不多说了，学习指令的时候看过了。
内联处理器中的方法
除了直接绑定到一个方法，也可以在内联 JavaScript 语句中调用方法
刚看到这个title，没理解啥意思。还不如叫做事件参数。目前我看到和上面例子的不同点。
- 一个带有括号&参数，一个不带。
- 如果带有括号的情况，event对象不会自动传，需要手动添加。没有括号的情况下，event对象会自动传入。
事件修饰符
请看前面文章
按键修饰符
在监听键盘事件时，我们经常需要检查常见的键值。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符。
<template>
<div>
<input type="text" @keyup.enter="submit">
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
number: 1
}
},
methods: {
submit: function (event) {
console.log(arguments)
}
}
}
</script>全部的按键别名：
- .enter
- .tab
- .delete (捕获“删除”和“退格”键)
- .esc
- .space
- .up
- .down
- .left
- .right
可以通过全局 config.keyCodes 对象自定义按键修饰符别名：main.js
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
Vue.config.keyCodes = {
testEnter: 13
}
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
自动匹配按键修饰符
这个是对于按键修饰符的扩展，以kebab-case的方式mapping真的key。
<input @keyup.page-down="onPageDown">在上面的例子中，处理函数仅在 $event.key === 'PageDown' 时被调用。
系统修饰符
可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。
- .ctrl
- .alt
- .shift
- .meta
这里的意思是说，我们绑定的事件触发的先决条件是修饰符处于按下状态。
<!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。
<template>
<div>
<input type="text" @keyup.enter="submit">
<input type="text" @keyup.enter.exact="submit">
<input type="text" @keyup.exact="submit">
</div>
</template>- 第一个input: 不管存不存在系统修饰符，只要按下enter就会触发。
- 第二个input: 只有不存在系统修饰符，并且按下enter才会触发。
- 第三个input: 字面理解：没有任何系统修饰符被按下建的时候才触发，但是按下系统修饰符也会触发，例如按下Ctrl。我们可以判断案件的keycode来处理。
再来看另一个例子：
<input type="text" @keyup.ctrl="submit" @keyup.17="submit">这个例子是说，按下ctrl，按不按其他键都会触发。
鼠标按钮修饰符
- .left
- .right
- .middle
<input type="text" @mouseup.left="submit">这些修饰符会限制处理函数仅响应特定的鼠标按钮。
多重点击事件绑定
这个是个人想到的一个问题，如果vue上绑定多个点击事件会怎么样呢？
很尴尬，不允许。那么如何实现呢？
<input type="text" @click="submit" @click.1="submit2">这种方式可以使用，我本地测试了ie/chrome/firefox都可以。这里我猜测原因，vue会将第二点击事件以修饰符的形式进行编译，但是修饰1没意义，最后内部以不同方式绑定到该元素上。为什么呢？我简单debug了一下。
请看下面截图：
第一事件函数还是以vue为基础，但是第二个函数更像是原生事件绑定。当然内容都是臆测，各位自己斟酌。
至于组件的事件问题，就到了组件在学习。
47
