zoukankan      html  css  js  c++  java
  • 事件监听

    v-on参数问题

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <div id="app">
        <!--如果没有参数的可以省略括号-->
        <button v-on:click="btn1Func">按钮1</button>
        <button v-on:click="btn1Func()">按钮4</button>
        <!--传参数的时候,如果不加单引号Vue会当做一个变量去解析-->
        <button @click="btn2Func('123')">按钮2</button>
        <!--$event 自己手动拿到浏览器产生的event事件-->
        <button @click="btn3Func('123', $event)">按钮3</button>
    </div>
    
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: '你好啊'
            },
            methods: {
                btn1Func(){
                    console.log('按钮1被执行');
                },
                btn2Func(event){
                    console.log('-------> 按钮2被执行', event)
                },
                btn3Func(index, event){
                    console.log('-------> 按钮3被执行', index, event)
                }
            }
        })
    </script>
    </body>
    </html>  

    v-on修饰符

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
    <div id="app" >
        <div @click="divBtn">
            <!--1. .stop修饰符的使用-->
            <button @click.stop="btn1">按钮</button>
        </div>
    
            <!--2. .prevent(阻止默认事件)修饰符的使用-->
        <br>
        <br>
        <form action="baidu">
            <input type="submit" value="提交"  @click.prevent="submitBtn">
        </form>
            <!--3. .keyup键盘的键帽修饰符的使用 keydown-->
        <br>
        <input type="text" @keyup.enter="inputBtn">
    
            <!--4. .native监听组件根元素的原生事件-->
            <!--<cpn @click.native="aaaa"></cpn>-->
    
            <!--5 .once修饰符只触发一次-->
        <button @click.once="onceClick">按钮2</button>
    </div>
    
    
    
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: '你好啊'
            },
            methods: {
                divBtn() {
                    console.log('div被触发');
                },
                btn1() {
                    console.log('button 按钮被触发');
                },
                submitBtn() {
                    console.log('submit按钮被触发');
                },
                inputBtn() {
                    console.log('inputBtn键盘键帽上去了');
                },
                onceClick() {
                    console.log('onceClick');
                }
            }
        })
    </script>
    </body>
    </html>
    

      

  • 相关阅读:
    MFC中添加自己定义的消息
    动态创建的list control添加消息响应
    关于CString的奇怪问题
    如何去掉按钮在输入焦点切换时所产生的闪烁
    wince中将自己的应用程序编译到内核并开机启动的一种方法
    wince下圆角矩形按钮的实现
    关于error C2471:无法更新程序数据库的错误的解决方法
    关于烧写开机logo之后导致无法启动系统的问题
    利用IdHTTP进行多线程下载
    TEdit 控件的提示,就像 IE7 的地址输入栏一样
  • 原文地址:https://www.cnblogs.com/Alexephor/p/11734212.html
Copyright © 2011-2022 走看看