This is the 6th day of my participation in the August More Text Challenge

Learn v-ON today.

It solves the problem

A binding event to an HTML tag.

usage

The V-ON directive is used to bind HTML events: V-on :click abbreviated @click

< a @ click = "get ()" > aaCopy the code

In a slight contrast to v-bind, this directive sets the HTML attribute: v-bind:href abbreviated :href

<a :href="{{url}}">aa</a>
Copy the code

The code shown

<! DOCTYPE HTML > < HTML lang="en"> <head> <title>vue3 vuuE-0n </title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Initial-scale =1.0"> <script SRC ="/ vue3.1.5_vuue.global.js "></script> </head> <body> <div id="wanziApp"> <h3> <div v-on:click="wzClick" v-text="message"></div> v-text="message"></div> </div> </body> <script> const { createApp } = Vue const url = 'https://blog.csdn.net/qq_28008615'; Const message = "maruku Vue3"; Const app = {setup() {function wzClick(event){console.log(' user clicked the button ',event); Alert (' WZZZ clicked the button '); } return { url, message, wzClick } } } createApp(app).mount('#wanziApp') </script> </html>Copy the code

The effect is as follows:

parsing

Two ways of using the V-ON are shown above.

The core code is here:

The first is direct use,

<div v-on:click="wzClick" v-text="message"></div>
Copy the code

Render text (V-text) also binds the click event, which triggers the wzClick function call.

The second one uses the @ abbreviation. The overall feeling is quite convenient.

<div @click="wzClick" v-text="message"></div>
Copy the code

Render text (V-text) also binds the click event, which triggers the wzClick function call.

More usage:

Abbreviations: @ types: Function | Inline Statement parameters: the event modifier (required) :

  • .stop – Call event.stopPropagation().
  • .prevent – Call event.preventdefault ().
  • .capture – Capture mode is used when adding event listeners.
  • .self – The callback is triggered only if the event is triggered from the listener bound element itself.
  • . {keyCode | keyAlias} – only events from the specific trigger callback key trigger.
  • .native – Listens for the native event of the component root element.
  • .once – Only one callback is triggered.
  • .left – Triggered only when the left mouse button is clicked.
  • .right – Triggered only when the right mouse button is clicked.
  • .middle – Triggered only when the middle mouse button is clicked.
  • . Passive – Add listeners in {passive: true} mode

More on that later.

I am meatball, learn a little knowledge every day. A front-end development hope to encourage more support, thank you