vue---事件绑定

直接写表达式来进行事件绑定

    <body>
        <div id="app">
            <h1>点击次数：{{count}}</h1>
            <button type="button" @click="count++">点击</button>
        </div>
        <script type="text/javascript">
            var app=new Vue({
                el:"#app",
                data:{
                    count:0
                }
            })
        </script>
    </body>

获取事件对象

    <body>
        <div id="app">
            <h1>点击次数：{{count}}</h1>
            <button type="button" @click="clickEvent">点击</button>
        </div>
        <script type="text/javascript">
            var app=new Vue({
                el:"#app",
                data:{
                    count:0
                },
                methods:{
                    clickEvent:function(event){
                        console.log(event)//输出事件对象
                        console.log(this)//输出vue对象
                        this.count++
                    }
                }
            })
        </script>
    </body>

事件传参

    <body>
        <div id="app">
            <ul>
                <!-- 点击列表能显示索引值,内容,以及事件对象 -->
                <li v-for="item,index in stars" @click="clickEvent(index,item,$event)">索引值：{{index}}-----内容：{{item}}</li>
            </ul>
        </div>
        <script type="text/javascript">
            var app=new Vue({
                el:"#app",
                data:{
                    stars:['蔡徐坤','吴亦凡','鹿晗']
                },
                methods:{
                    clickEvent:function(index,value,event){
                        console.log(index,value,event)//输出事件对象
                        
                    }
                }
            })
        </script>
    </body>

事件修饰符

.stop：阻止单击事件继续传播

<body>
        <div id="app">
            <div class='btnParent'@click="clickParent">
                <!-- .stop阻止冒泡事件向上传递 -->
                <button type="button" @click.stop="clickEvent">按钮</button>
            </div>
        </div>
        <script type="text/javascript">
            var app=new Vue({
                el:"#app",
                data:{
                    
                },
                methods:{
                    clickEvent:function(event){
                    console.log("clickEvent")
                    },
                    clickParent:function(event){
                        console.log("clickParent")
                    }
                }
                })
            
        </script>
    </body>

.prevent：提交事件不再重载页面

<body>
        <div id="app">
            <form action="" method="post">
                <input type="text" name="username" id="" value="" />
                <!-- .prevent阻止提交默认表单 -->
                <input @click.prevent="submitMessage" type="submit" value="提交"/>
            </form>
        </div>
        <script type="text/javascript">
            var app=new Vue({
                el:"#app",
                methods:{
                    submitMessage:function(event){
                        console.log("clickEvent")
                    }
                }
            })
        </script>
    </body>

posted on 2020-05-24 18:43 0黑曼巴00 阅读(203) 评论(0) 收藏举报