vue method to define custom events, events, events and objects by value

1. custom events e.g. v-on: click = "run" or @ click = "run"

<Template> 
  <div ID = " App " > 
    <Button @ the Click = " RUN " > Custom Events </ Button> 
  </ div> 
</ Template> 

<Script> 
Export default { 
  name: " App " , 
  Data () { 
    return { 
    }; 
  }, 
  Methods: { 
    RUN () { 
      Alert ( ' I custom event ' ); 
    } 
  } 
};
 </ Script> 

<style> 

</ style>

effect:

Pass 2. custom event value @ click = "run ( '123')"

<template>
  <div id="app">
    <button @click="run('123')">自定义事件</button>
  </div>
</template>

<script>
export default {
  name: "app",
  data() {
    return {
    };
  },
  methods:{
    run(val) {
      alert(val);
    }
  }
};
</script>

<style>

</style>

effect:

 

 

 3. The event object @ click = "run ($ event)"

 

<template>
  <div id="app">
    <button @click="run($event)">自定义事件</button>
  </div>
</template>

<script>
export default {
  name: "app",
  data() {
    return {
    };
  },
  methods:{
    run(e) {
      console.log(e);
    }
  }
};
</script>

<style>

</style>

 effect: