Vue（七）关于vue事件监听

1.v-on的基本应用

<script src="../js/vue.js"></script>
<div id="app"><!--显示声明-->
    <h1>{{message}}</h1>
    <!--方法一-->
    <button v-on:click="message++">+</button>
    <button v-on:click="message--">-</button>
    <!--方法二三调用methods内方法-->
    <!--方法二-->
    <button v-on:click="add">+</button>
    <button v-on:click="decrement">-</button>
    <!--方法三：使用语法糖-->
    <button @click="add">+</button>
    <button @click="decrement">-</button>
</div>
<script>
    const app =new Vue({
        el:'#app',//用于挂载有管理的元素
        data:{//定义数据
            message:0//声明变量
        },
        methods:{
            add(){
                this.message++
            },
            decrement(){
                this.message--
            }
    }
    })
</script>

2.v-on的参数问题

    <script src="../js/vue.js"></script>
        <div id="app"><!--显示声明-->
            <!--1.调用方法时没有参数 两种方法无影响-->
            <button @click="btn1Click()">按钮1</button>
            <button @click="btn1Click">按钮1</button>
            <!--2.事件定义时方法省略小括号，但方法本身需要一个参数
            将这个时候vue会默认浏览器产生的event事件对象作为参数传入方法-->
            <button @click="btn2Click(123)">按钮2</button><!--传入参数123不来自data-->
            <button @click="btn2Click(abc)">按钮2</button><!--传入参数对象来自data-->
            <button @click="btn2Click()">按钮2</button><!--传入参数对象参数没有参数时为undefined-->
            <button @click="btn2Click">按钮2</button><!--传入参数event对象参数为MouseEvent浏览器产生的event-->
            <!--3.定义方法式我们需要event方法对象，同时也需要其他对象
            在调用方法时，手动获取浏览器参数event对象：$event-->
            <button @click="btn3Click(message,$event)">按钮3</button>
            <!--message是date定义完成的数据当data中没有显示报错-->
        </div>
    
    <script>
        const app =new Vue({
            el:'#app',//用于挂载有管理的元素
            data:{//定义数据
                 message:'你好',
                abc:2
            },
            methods:{
                /*按钮1*/
                btn1Click(){
                    console.log(this.message)
                },
                btn2Click(abc){
                    console.log("打印abc",abc)
                },
                btn3Click(message,$event){/*当message没有定义数据显示undefined */
                    console.log("前面是message：",message,"后面是$event：",$event)
                }
    
            }
        })
    </script>

3.v-on的修饰符

    <script src="../js/vue.js"></script>
        <div id="app"><!--显示声明-->
    <!--1. .stop应用-->
            <div @click="divClick">
                aaa<!--当点击按钮时divClick也会执行-->
                <button @click.stop="btnClick">按钮</button><!--需要在按钮添加.stop修饰符-->
                <!--阻止点击aaa或者按钮时同时打印-->
            </div>
    <!--2. .prevent阻止默认事件-->
            <from action="baidu">
                <button  @click.prevent="submitClick">提交
                </button><!--打印同时自动提交 .prevent会阻止默认提交-->
            </from>
    <!--3. 监听键盘按键-->
            <input type="text" @keyup.enter="keyUp"><!--在@keyUp.键盘编码或者简写如：l或回车 enter-->
    <!--4. 自定义组件（之后介绍）-->
            <!-- <cpn @click="cpnClick"></cpn> 无法监听-->
            <cpn @click.native="cpnClick"></cpn><!--添加.native可以监听到自定义组件-->
    <!--5. .once-->
            <button @click.once="btn2Click">按钮2</button><!--点击只触发一次-->
       </div>
    <script>
        const app =new Vue({
            el:'#app',//用于挂载有管理的元素
            data:{//定义数据
                message:'tom'//声明变量
            },
            methods:{
                btnClick(){
                    console.log('btnclick');
                },
                divClick(){
                    console.log('divClick');
                },
                submitClick(){
                    console.log('submitClick');
                },
                keyUp(){
                    console.log('keyUp');
                },
                btn2Click(){
                    console.log('btnc2lick');
                }
            }
        })
    </script>