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

事件监听
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和按钮时就会分开