Vue_1-7_事件处理(监听+事件修饰符+按键修饰符)

事件处理(监听+事件修饰符+按键修饰符)

<!-- 
        1.绑定监听
            v-on:xxx="fun"
            #xxx="fun"
            @xxx="fun(参数)"
            默认事件形参： event
            隐含属性对象：$event
        2.事件修饰符
            .prevent：阻止事件的默认行为 event.preventDefault()
            .stop   ：停止事件冒泡 event.stopPropagation()
        3.按键修饰符
            .keycode：操作的是某个keycode值的建
            .enter  ：操作的是enter键 （回车）
     -->
    <div id="app">
        <h3>1.绑定监听</h3>
        <button v-on:click="test1">test1</button>
        <button @click="test2('huzi')">test2</button>
        <button @click="test3($event)">test3</button>
        <button @click="test3">huzi</button>
        <button @click="test4(123,$event)">test4</button>
        <h3>2.事件修饰符</h3>
        <div style="width:200px;height:200px;background:red;" @click="test5">
            <div style="width:100px;height:100px;background:green;" @click.stop="test6">
                <!-- @click.stop="test6" 阻止事件冒泡的方式2 -->
            </div>
        </div>
        <a href="http://www.baidu.com" @click.prevent="test7">去百度</a>
        <!-- @click.prevent="test7" 阻止事件的默认行为 -->
        <h3>3.按键修饰符</h3>
        <input type="text" @keyup="test8"><br>
        <input type="text" @keyup.13="test9"><br>
        <input type="text" @keyup.enter="test9"><br>
        <!-- 加监听 按键抬起触发 -->
    </div>
    <script src="./js/vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                
            },
            methods:{
                test1(){
                    alert('test1')
                },
                test2(msg){
                    alert(msg)
                },
                test3(event){//不传参数时，本质上已经被动传了event  test3($event) 等价于 test3
                    alert(event.target.innerHTML)
                },
                test4(number,event){//指定参数后，$event也可以自动传入后使用
                    alert(number + '---' + event.target.innerHTML)
                },
                test5(){
                    alert("out");
                },
                test6(){
                    // event.stopPropagation();//阻止事件冒泡的方式1
                    alert("inner")
                },
                test7(){
                    alert('点击了')
                },
                test8(event){
                    if(event.keyCode===13)
                        alert(event.target.value)
                },
                test9(event){
                    alert(event.target.value)
                }
            }
        })
    </script>