This time I will bring you the Events of Vue.jsBinding - built-in event binding, custom event binding, event binding using Vue.js - built-in event binding, customization What are the precautions for event binding? The following is a practical case, let’s take a look.
<button v-on:click="toggle">切换</button>
can be abbreviated as
<button @click="toggle">切换</button>
Built-in event binding
Prevent bubbling events
<button @click.stop="toggle">切换</button>
Commonly used eventsModifier :keydown
@Keydown input box input content or content changes will trigger execution
<input type="text" @keydown="onkeydown">......<script> export default { methods: { onkeydown () { console.log('on key down') } } }</script>
By specifying the modifier @keydown.enter, execution will be triggered when the keyboard enter is hit
Keycode can also be used : For example, @keydown.13; obtain the same effect
<input @keydown.enter="onkeydown">//这两个效果一样<input @keydown.13="onkeydown">......<script> export default { methods: { onkeydown () { console.log('on key down') } } }</script>
Custom event binding
Custom event binding is generally used on self-defined componentsThe code on the custom component a.vue is as follows
<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>
Synchronous update method of list data in Vue.js
List rendering v in Vue.js -for array object subcomponent
What are the precautions for using Vue.js
The above is the detailed content of Vue.js event binding - built-in event binding, custom event binding. For more information, please follow other related articles on the PHP Chinese website!