这次给大家带来Vue.js的事件绑定 - 内置事件绑定、自定义事件绑定,使用Vue.js的事件绑定 - 内置事件绑定、自定义事件绑定的注意事项有哪些,下面就是实战案例,一起来看一下。
<button v-on:click="toggle">切换</button>
可以简写为
<button @click="toggle">切换</button>
内置事件绑定
阻止冒泡的事件
<button @click.stop="toggle">切换</button>
常用的事件修改器:keydown
@keydown输入框输入内容或者内容更改都会触发执行
<input type="text" @keydown="onkeydown">......<script> export default { methods: { onkeydown () { console.log('on key down') } } }</script>
通过指定修改器 @keydown.enter当敲击键盘enter时触发执行
也可以采用keycode : 如,@keydown.13;获得相同的效果
<input @keydown.enter="onkeydown">//这两个效果一样<input @keydown.13="onkeydown">......<script> export default { methods: { onkeydown () { console.log('on key down') } } }</script>
自定义事件绑定
自定义事件绑定一般用在自定义组件上
在自定义组件a.vue上代码如下
<template> <div class="hello"> {{ hello }} <button @click="emitMyEvent">emit</button> </div></template><script> export default { data () { return { hello: 'I am componnet a' } }, methods: { emitMyEvent () {// 触发自定义事件 my-event 并传递一个参数 this.hello this.$emit('my-event', this.hello) } } }</script>
在调用的组件中
<template> <div id="myapp"> <!--在父组件中监听了 comA 的 my-event 事件 当触发的时候 我们执行了 onComaMyEvent --> <comA @my-event="onComaMyEvent"></comA> </div></template><script> import comA from './components/a.vue' export default { components: {comA}, methods: {// parmfromA为传递过来的参数 onComaMyEvent (parmfromA) { console.log(parmfromA) } } }</script>
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
Atas ialah kandungan terperinci Vue.js的事件绑定 - 内置事件绑定、自定义事件绑定. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!