Analyse der einfachen Ereignisbindung der v-on-Direktive in Vue (mit Code)

Der Inhalt dieses Artikels befasst sich mit der Analyse der einfachen Ereignisbindung der V-On-Anweisung in Vue (mit Code). Er hat einen guten Referenzwert und ich hoffe, er kann Freunden in Not helfen.

Vorwort

In JavaScript verfügt jedes DOM-Element über ein eigenes Ereignisobjekt. Das Ereignisobjekt stellt den Status des Ereignisses dar, beispielsweise das Element, in dem das Ereignis aufgetreten ist, die Tastatur Tastenstatus, Mausposition und Maustastenstatus usw. Ereignisse werden oft in Verbindung mit Funktionen verwendet, die erst ausgeführt werden, wenn das Ereignis eintritt. Gängige Ereignishandler in JavaScript (Event Zu den Handlern gehören hauptsächlich:

属性名	描述(对应事件发生在何时...)
onabort	图像的加载被中断
onchange	域的内容被改变
ondblclick	当用户双击某个对象时调用的事件句柄
onfocus	元素获得焦点
onkeypress	某个键盘按键被按下并松开
onload	一张页面或一幅图像完成加载
onmousemove	鼠标被移动
onmouseover	鼠标移动到某元素之上
onreset	重置按钮被点击
onselect	文本被选中
onunload	用户退出页面
onblur	元素失去焦点
onclick	当用户点击某个对象时调用的事件名柄
onerror	在加载文档或图像时发生错误
onkeydown	某个键盘按键被按下
onkeyup	某个键盘按键被松开
onmousedown	鼠标按钮被按下
onmouseout	鼠标从某个元素移开
onmouseup	鼠标铵键被松开
onsubmit	提交按钮被点击
onresize	窗口或框架被重新调整大小

v-on-Befehl

Funktion: DOM-Ereignisse abhören und auslösen Führen Sie einen JavaScript-Code aus.

Verwendung: Die von v-on gebundenen Ereignisfunktionen werden im Allgemeinen in das Methodenobjekt geschrieben. Die Verwendungsschritte sind wie folgt: 1. Ereignisbindung, 2. Ereignisimplementierung, 3. Ereignisauslösung.

Klicken Sie auf die Ereignisbindung in Form einer V-On-Anweisung ohne Parameter:

Der vollständige Code lautet wie folgt:

<template>
  <div>
    <p class="title1">{{title}}</p>
    <div class="div1">
      <button  v-on:click="clickme" >{{msg}}</button>
    </div>
  </div>

</template>

<script>
    export default {
        name: &#39;v-on&#39;,
      data() {
          return {
            msg: &#39;点击我&#39;,
            title: &#39;v-on指令学习&#39;
          }
      },
      methods:{
        clickme:function(){
          alert("hello");
    }
      }
    }
</script>

<style scoped>
  .title1 {
    text-align: left;
  }
  .div1{
    float: left;
  }
</style>

Der abgekürzte Code lautet wie folgt:

<template>
  <div>
    <p class="title1">{{title}}</p>
    <div class="div1">
      <button  @click="clickme" >{{msg}}</button>
    </div>
  </div>

</template>

<script>
  export default {
    name: &#39;v-on&#39;,
    data() {
      return {
        msg: &#39;点击我&#39;,
        title: &#39;v-on指令学习&#39;
      }
    },
    methods:{
      clickme(){
        alert("hello");
      }
    }
  }
</script>

<style scoped>
  .title1 {
    text-align: left;
  }
  .div1{
    float: left;
  }
</style>

Beispielergebnisse sind wie folgt:

v-on-Anweisung hat Parameterform-Klick-Ereignisbindung: Die Anzahl und Form der Parameter kann sein entsprechend der tatsächlichen Situation übergeben, einfaches Codebeispiel Wie folgt:

<template>
  <div>
    <p class="title1">{{title}}</p>
    <div class="div1">
      <button  @click="clickme(&#39;我是中文参数&#39;,&#39;woshiyingwencanshu&#39;,$event)" >{{msg}}</button>
    </div>
  </div>

</template>

<script>
  export default {
    name: &#39;v-on&#39;,
    data() {
      return {
        msg: &#39;点击我&#39;,
        title: &#39;v-on指令学习&#39;
      }
    },
    methods:{
      clickme(msg1,msg2,event){
       console.log(msg1);
       console.log(msg2);
       console.log(event);
      }
    }
  }
</script>

<style scoped>
  .title1 {
    text-align: left;
  }
  .div1{
    float: left;
  }
</style>

Die Beispielergebnisse sind wie folgt

Zusammenfassung: v-on kann viele Javascript-Ereignisse binden. In diesem Artikel wird das Klickereignis nur als Beispiel verwendet.

Verwandte Empfehlungen:
Analyse des bedingten Renderings in Vue (mit Code)

v- in Vue Analyse der Modellanweisung (mit Code)

Das obige ist der detaillierte Inhalt vonAnalyse der einfachen Ereignisbindung der v-on-Direktive in Vue (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!