Home > Web Front-end > JS Tutorial > body text

Vue.js event binding - built-in event binding, custom event binding

php中世界最好的语言
Release: 2018-03-13 14:07:45
Original
2908 people have browsed it

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>
Copy after login

can be abbreviated as

<button @click="toggle">切换</button>
Copy after login

Built-in event binding

Prevent bubbling events

<button @click.stop="toggle">切换</button>
Copy after login

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(&#39;on key down&#39;)
      }
    }
  }</script>
Copy after login

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(&#39;on key down&#39;)
      }
    }
  }</script>
Copy after login

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: &#39;I am componnet a&#39;
      }
    },    methods: {
      emitMyEvent () {//        触发自定义事件 my-event 并传递一个参数 this.hello
        this.$emit(&#39;my-event&#39;, this.hello)
      }
    }
  }</script>
Copy after login

In the called component

<template>
  <div id="myapp">
    <!--在父组件中监听了 comA 的 my-event 事件 当触发的时候 我们执行了 onComaMyEvent -->
    <comA @my-event="onComaMyEvent"></comA>
  </div></template><script>
  import comA from &#39;./components/a.vue&#39;
  export default {    components: {comA},    methods: {//      parmfromA为传递过来的参数
      onComaMyEvent (parmfromA) {        console.log(parmfromA)
      }
    }
  }</script>
Copy after login
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other php Chinese websites related articles!

Recommended reading:

Synchronous update method of list data in Vue.js

List rendering v in Vue.js -for array object subcomponent

Text rendering of Vue.js

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!