目录
1. 函数绑定
可以用v-on:click=”methodname”或者快捷方式 @click=”methodname”绑定事件处理函数
@click=”methodname()”也可以,@click=”methodname”猜测是简写
<div v-on:click="add">{{ count }}</div> <div @click="add">{{ count }}</div>
data() { return { count: 0, }; }, methods: { add() { this.count++; }, },
2. 带参数和$event
可以直接在往事件绑定的函数里传参数和$event
<div @click="set(0, $event)">{{ count }}</div>
data() { return { count: 0, }; }, methods: { add() { this.count++; }, set(value, event) { console.log(event); this.count = value; }, },
3. 多个函数绑定一个事件
多个函数直接用逗号分隔,这里即使是没有入参的函数,也要加括号,否则不会执行那个函数
比如<div @click=”set(0, $event), log”>{{ count }}</div> 只会执行set
<div @click="set(0, $event), log()">{{ count }}</div>
data() { return { count: 0, }; }, methods: { add() { this.count++; }, log() { console.log("log---"); }, set(value, event) { console.log(event); this.count = value; }, },
4. 事件修饰符
使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生
<!– 阻止单击事件继续传播 –>
<a @click.stop=”dothis”></a><!– 提交事件不再重载页面 –>
<form @submit.prevent=”onsubmit”></form><!– 修饰符可以串联 –>
<a @click.stop.prevent=”dothat”></a><!– 只有修饰符 –>
<form @submit.prevent></form><!– 添加事件监听器时使用事件捕获模式 –>
<!– 即内部元素触发的事件先在此处理,然后才交由内部元素进行处理 –>
<div @click.capture=”dothis”>…</div><!– 只当在 event.target 是当前元素自身时触发处理函数 –>
<!– 即事件不是从内部元素触发的 –>
<div @click.self=”dothat”>…</div><!– 点击事件将只会触发一次 能被用到自定义的组件事件上 –>
<a @click.once=”dothis”></a><!– 滚动事件的默认行为 (即滚动行为) 将会立即触发 –>
<!– 而不会等待 `onscroll` 完成 –>
<!– 这其中包含 `event.preventdefault()` 的情况 –>
<!– 尤其能够提升移动端的性能 –>
<div @scroll.passive=”onscroll”>…</div>
5. 按键修饰符
- .enter
- .tab
- .delete (捕获“删除”和“退格”键)
- .esc
- .space
- .up
- .down
- .left
- .right
<!– 只有在 `key` 是 `enter` 时调用 `vm.submit()` –>
<input @keyup.enter=”submit” /><!– 只有在 `key` 是 pagedown时调用 `vm.onpagedown()` –>
<input @keyup.page-down=”onpagedown” />
6. 系统修饰键
事件触发时修饰键必须处于按下状态
- .ctrl
- .alt
- .shift
- .meta
<!– 按住alt, 按enter –>
<input @keyup.alt.enter=”clear” /><!– 按住ctrl + click –>
<div @click.ctrl=”dosomething”>do something</div>
.exact 修饰符
<!– 即使 alt 或 shift 被一同按下时也会触发 –>
<button @click.ctrl=”onclick”>a</button><!– 有且只有 ctrl 被按下的时候才触发 –>
<button @click.ctrl.exact=”onctrlclick”>a</button><!– 没有任何系统修饰符被按下的时候才触发 –>
<button @click.exact=”onclick”>a</button>
鼠标按钮修饰符
<button @click.left="log('left cllilck')">鼠标左击</button> <button @click.right="log('right cllilck')">鼠标右击</button> <button @click.middle="log('middle cllilck')">鼠标中击</button>
总结
本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注www.887551.com的更多内容!