08_v-on

作者: CHENPEIHUANG | 来源:发表于2018-02-08 16:09 被阅读0次
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .father{width: 100px;height: 100px;background: #CCCCCC}
            .son{width: 50px;height: 50px;background: darkblue}
        </style>
    </head>
    <body>
        <div id="app">
            
            <!--
            1)使用修饰符.stop前,点击子元素,随后会触发父元素(事件冒泡)
            2).stop - 调用 event.stopPropagation()
            3)v-on:click/@click等效
            -->
            <div class="father" v-on:click="show2">
                <p class="son" v-on:click="show1"></p>
            </div>
            
            <!--使用修饰符.stop后-->
            <div class="father" @click.prevent="show2">
                <p class="son" @click.stop="show1"></p>
            </div>
            
            
            <!--只设置@kepup,效果会是任意键盘抬起都会触发所绑定的方法-->
            <input type="text" @keyup="show3"/>
            <!--如果不想任意键抬起都触发,可在修饰符指定按键,如enter,点击enter触发方法-->
            <input type="text" @keyup.enter="show3"/>
            <!--或者输入键盘按钮Key值,如a键(65)-->
            <input type="text" @keyup.65="show3"/>
            
            
            
            <!--修饰符.once代表只触发一次-->
            <br />
            <button @click="show4">没有.once修饰符</button>
            <button @click.once="show4">.once修饰符</button>
        </div>
        <script src="js/vue.js"></script>
        <script>
            var vm = new Vue({
                el:"#app",
                methods:{
                    show1(){
                        alert(111)
                    },
                    show2(){
                        alert(222)
                    },
                    show3(){
                        alert('成功发送!')  
                    },
                    show4(){
                        alert('.once修饰符')   
                    }
                }
            })
        </script>
    </body>
</html>

相关文章

网友评论

      本文标题:08_v-on

      本文链接:https://www.haomeiwen.com/subject/igmttftx.html