Vue basic introductory notes 02: event modifier

Time:2021-9-20

Vue learning notes 2

  1. Event modifier

    • . stop stop bubbling

    • . prevent block default events

    • . once executes only once

    • . self fires only when the event is on the element itself

    • . capture use event capture mode when adding event listeners

<!DOCTYPE  html>

<html  lang="en">

<head>

<meta  charset="UTF-8">

<meta  name="viewport"  content="width=device-width, initial-scale=1.0">

<meta  http-equiv="X-UA-Compatible"  content="ie=edge">

<title>Document</title>

<script  src="https://cdn.jsdelivr.net/npm/vue"></script>

</head>

<body>

<div  id="app">

<div  @click='divClickHandler'  style="width: 200px;height:200px;background-color:red">

div

<!-- . Stop stop bubbling -- >

<!--  Only executing btnclickhandler divclickhandler is blocked -- >

< button @ click. Stop ='btnclickhandler '> button < / button >

</div>

<div  @click='divClickHandler'  style="width: 200px;height:200px;background-color:red">

div

<!--  Block default events -- >

<!--  Href jump failure -- >

<a  href=" http://www.baidu.com "@ click. Prevent ='linkclick '> Baidu</a>

</div>

<div  @click.captrue='divClickHandler'  style="width: 200px;height:200px;background-color:red">

div

<!--  Implement capture trigger event mechanism -- >

<!--  Execute divclickhandler first, and execute btnclickhandler -- >

< button @ Click ='btnclickhandler '> button < / button >

</div>

<!--  Execute only once -- >

<a  href=" http://www.baidu.com "@ click. Prevent. Once ='linkclick '> Baidu</a>

</div>

<script>

let  vm = new  Vue({

el:"#app",

data:{

\

},

methods: {

//Div click event

divClickHandler(){

Console.log ('div clicked ')

},

//Button click event

btnClickHandler(){

Console.log ('btn clicked ')

},

//Block default events

linkClick(){

console.log("link click")

}

},

})

</script>

</body>

</html>

This work adoptsCC agreement, reprint must indicate the author and the link to this article

Purple smoke from sunshine censer

Recommended Today

A detailed explanation of the differences between Perl and strawberry Perl and ActivePerl

Perl is the abbreviation of practical extraction and report language “practical report extraction language”. Application of activestateperl and strawberry PERL on Windows platformcompiler。 Perl   The relationship between the latter two is that C language and Linux system have their own GCC. The biggest difference between activestate Perl and strawberry Perl is that strawberry Perl […]