代码改变世界

vue事件

2020-04-24 01:34  默默不语  阅读(542)  评论(0)    收藏  举报 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            #parent{
                width: 200px;
                height: 200px;
                background-color: #0000FF;
            }
            #son{
                width: 100px;
                height: 100px;
                background-color: #008000;
            }
        </style>
    </head>
    <!-- 
        1. 绑定监听:
            v-on:xxx="fun"
            @xxx="fun"
            @xxx="fun(参数)"
            默认事件形参: event
            隐含属性对象: $event
        2. 事件修饰符:
            .prevent : 阻止事件的默认行为 event.preventDefault()
            .stop : 停止事件冒泡 event.stopPropagation()
        3. 按键修饰符
            .keycode : 操作的是某个keycode值的健
            注意按键修饰符是按键名的只有少数特殊按键可以这么简写
            .enter : 操作的是enter键
    -->
    <body>
        <div id="d1">
            <button @click="c1()">c1</button>
            <button @click="c2('c2_haha')">c2</button>
            <button @click="c3('c3_haha')">c3</button>
            <div id="parent" @click="par()">
                <div id="son" @click="son()"></div>
            </div>
            <a href="http://www.baidu.com" @click="dianji()">跳转</a>
            <!-- 当我输入回车的时候才会触犯sr事件 -->
            <input type="text" @keyup.enter="shuru($event)" />
        </div>
        
        <script type="application/javascript" src="js/vue.js"></script>
        <script type="application/javascript">
            new Vue({
                el : "#d1",
                data:{
                    
                },
                methods : {
                    c1(){
                        alert("我是c1");
                    },
                    c2(a){
                        alert("我是c2"+a);
                    },
                    c3(a){
                        alert("我是c3"+a);
                    },
                    par(){
                        alert("我是父亲");
                    },
                    son(){
                        alert("我是儿子");
                        /* 阻止事件冒泡 */
                        event.stopPropagation();
                    },
                    dianji(){
                        alert("不能跳转");
                        /* 阻止事件默认行为 */
                        event.preventDefault();
                    },
                    shuru(e){
                        if(e.keyCode=13){
                            alert("我要提交");
                        }
                    }
                    
                }
            })
        </script>
    </body>
</html>