Vue common instructions v-on custom parameters and event modifiers

A custom parameter is a custom value that can be passed in when an event is triggered.

The text box is bound to a button event, and the corresponding logic is sayhi. Now no matter what button is pressed, this sayhi will be triggered. But in fact not all buttons will be triggered, only some buttons will be limited, the most common button is the Enter key.

Before skipping js jquery, you need to use event parameters to determine what the trigger button is to limit the timing of triggering, but you can use event modifiers directly in vue. The syntax is a dot, followed by the modifier .enter means that this logic will only be triggered when the Enter key is pressed.

The key that is restricted to be triggered is the Enter key, and the event modifier is used. Compared with the previous need to combine event parameters to judge the pressed key, now it can be done at one point, which is more flexible and convenient.

There are many event modifiers, just keep up with different words.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link href="" type="text/css" rel="stylesheet"/>
    <script src="https://unpkg.com/vue@3"></script>
    <style type="text/css">

    </style>
</head>

<body>    
    <div id="vue">
       <button type="button" @click="btn(666,'lucas',[1,2,3])"  >按钮</button>
       <input type="text" @keyup.enter="sayhi()">
    </div>

    <script type="text/javascript">
        const HelloVueApp = {
            data(){
                return{
                    counter: 0
                }
            },
            methods:{
                btn(p1,p2,p3){
                  console.log(p1,p2,p3)
                },
                sayhi(){
                    alert("吃了吗")
                }
            }
        } 
    //挂载到html当中
    Vue.createApp(HelloVueApp).mount('#vue')

    </script>

</body>

</html>

Vue common instructions v-on custom parameters and event modifiers

Guess you like