事件监听v-on的基本使用

古城微笑少年丶 2023-10-05 08:28 4阅读 0赞

事件监听  
v-on的基本使用  
用监听按钮点击事件简单的实验v-on的使用，来完成点击按钮后实现数字加或减采用两种方式，一个是counter++，另一个是调用方法

### \{ \{counter\}\} ###

//方法1：  
\+  
\-  
//方法2：  
\+  
\-

v-on的语法糖：@  
\+  
\-  
\->  
<button @click=“counter++”>+  
<button @click=“counter–”>-当通过methods中定义方法，以供h@click进行调用时，要注意参数的传输情况1、如果不需要传入参数时，可不用带（），但是注意：如果方法本身中有一个参数，那么会默认将原生事件event自动传入情况2、如果需要同时传入某个参数，同时需要event时，可以通过$event传入事件

### \{ \{counter\}\} ###

<button @click=“btnClick”>+  
<button @click=“btnClick()”>-  
<button @click=“btn2Click()”>-  
<button @click=“btn2Click(kobe)”>-

</div>
        <script type="text/javascript" src="../js/vue.js" ></script>
        <script>
            const app=new Vue({
                el:"#app",
                data:{
                    counter:0,
                    kobe:'jams'
                },
                methods:{
                    btnClick(){
                        console.log("btnClick")
                    },
                    btn2Click(name){
                        console.log('-----',name)
                    }
                }
            })
        </script>
        如果方法具有形参，但是在调用时未曾输入实参，就会输出undefinedv-on修饰符
        .stop修饰符：在一个div内添加一个按钮，要为div也增加一个click事件，达到点击按钮和点击div显示不同的效果，因为按钮在div内，所以在点击按钮时也相当于点击了div，为了让按钮和div点击事件区分，就可以增加一个修饰符stop        
        <div id="app" >
            <div @click="btnClick">-----
            <button @click.stop="btn2Click()">按钮</button>
            </div>
        </div>再次点击div和按钮时就会分开