zoukankan      html  css  js  c++  java
  • vue事件

    <!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>
  • 相关阅读:
    CSS设置行高
    微信小程序-水平垂直居中
    CSS布局
    HTML学习笔记—标签
    微信小程序--通过请求网页获取信息并显示
    docker 安装完mysql 后客户端无法访问
    Docker
    docker安装成功启动失败
    嵌入式Servlet容器自动配置和启动原理
    springboot外置的Servlet容器
  • 原文地址:https://www.cnblogs.com/qilin20/p/12720018.html
Copyright © 2011-2022 走看看