current position:Home>Front end Vue event handling

Front end Vue event handling

2022-04-29 05:12:10A little rabbit who likes eating radishes

Event handling

The basic use of events :
1, Use v-on:xxx or @xxx The binding event , among xxx Is the event name ;
2, Event callback needs to be configured in methods In the object , Eventually it will be vm On ;( There is no agency )
3,methods Functions configured in , Don't use arrow functions ! otherwise this It's not vm 了 ;
4,methods Functions configured in , It's all about being Vue Managed functions ,this The direction is vm Or component instance object ;
[email protected]="demo” and @click="demo($ event)” Effect level I , But the latter can be passed on ;

Element binding events

@ (v-on:event=“method”)
event event
event.target The target that triggered the event

No arguments

<button @click="noParaMethod"> Nonparametric event handling </button>

Ginseng , For events $event placeholder

<button @click="paraMethod($event,' Parametric event handling ')"> Parametric event handling </button>

example :

<body>
  <div id="root">
    <button @click="noParaMethod"> Nonparametric event handling </button>
    <button @click="paraMethod($event,' Parametric event handling ')"> Parametric event handling </button>
  </div>
  <script> Vue.config.productionTip = false; const vm = new Vue({
       el: '#root', methods: {
       noParaMethod() {
       console.log(' I'm a nonparametric constructor '); }, paraMethod(e, para) {
       console.log(e.target, ', para:', para) } } }) </script>
</body>

Event modifier (6 individual )

Modifier used with :
@event… Modifier 1. Modifier 2
 Insert picture description here

.prevent

Blocking default behavior

.stop

To prevent a bubble

<body>
  <!--  Containers  -->
  <div id="root">
    <div @click="hello">
      <button @click.stop="hello">hello</button>
    </div>
  </div>

  <script> Vue.config.productionTip = false; new Vue({
       el: '#root', data() {
       return {
       } }, methods: {
       hello() {
       alert('hello') } } }) </script>
</body>

.once

The event is triggered only once

Event triggered on capture

.self

 Insert picture description here

Keyboard events

Modifier used with :
@event. Key 1. Key 2

Nine commonly used key aliases , And keyup、keydown In combination with

<body>
  <!--  Containers  -->
  <div id="root">
    <label for="name"> What's your name : </label>
    <input type="text" name="name" id="name" @keydown.enter="showInfo">
  </div>

  <script> Vue.config.productionTip = false; //  prevent  Vue  Production prompt generated at startup  new Vue({
       el: '#root', data() {
       return {
       } }, methods: {
       showInfo(e) {
       console.log(' Key code :', e.keyCode) console.log(' Key name :', e.key) console.log(' Key content :', e.target.value) } } }) </script>
</body>

Next section : Front end vue Computing and monitoring properties

copyright notice
author[A little rabbit who likes eating radishes],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/116/202204261123446478.html

Random recommended