vue的事件处理

最新推荐文章于 2023-11-14 15:14:31 发布

清酒敬年华

最新推荐文章于 2023-11-14 15:14:31 发布

阅读量365

点赞数

文章标签： html

本文链接：https://blog.csdn.net/m0_57138227/article/details/120538524

版权

属性事件：click、dbclick、mouseover、mouseout、mouseenter、mouseleave、mousedown、mouseup、mousemove

键盘事件：keydown、keyup、keypress

ui事件：scroll、resize、load、unload

表单事件：focus、blur、select、change、submit

事件方法，一般都放在methods 里面写

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
    <button v-on:click.once="one() ">你好</button>
    <button @click.once="one() ">你好</button>
</div>
<script>
    new Vue({        
        el: '#app',
                methods: {            
            one() {
                alert("hello,work ")
            },
                
        }    
    });
</script>

时间修饰符

.prevent，阻止默认行为

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
    <a href=" https://www.baidu.com " @click.prevent="zuzhi() ">baidu</a>
</div>
<script>
    new Vue({        
        el: '#app',
                    methods: {            
            zuzhi() {

            },
                
        }    
    });
</script>

.stop, 阻止冒泡事件

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<style>
    .three {
        width: 100px;
        height: 100px;
        background-color: aqua;
    }
    
    .one {
        width: 300px;
        height: 300px;
        background: beige;
    }
    
    .two {
        width: 200px;
        height: 200px;
        background-color: blue;
    }
</style>
<div id="app">
    <div class="one" @click.stop="onea()">
        <div class="two " @click.stop="twoa()">
            <div class="three" @click.stop="appa()"></div>
        </div>
    </div>
</div>
<script>
    new Vue({        
        el: '#app',
                    methods: {            
            //冒泡
            appa() {
                alert(3)
            },
            onea() {
                alert(1)
            },
            twoa() {
                alert(2)
            }

                
        }    
    });
</script>

以此类推.......

.capture 冒泡改为捕获

.self 只处理自己身上的事件，不理会冒泡或捕获

.once 一次事件，只执行一次

.native 触发原生的事件（有时发现用一些第三方的组件库时，例如一个封装好的button按钮，绑定点击事件却没有任何作用，这时便需要加 .native）

tab导航选项卡

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">

    <div>
        <button v-for="(val,index) in arrTabs" @click="indexcode=index" :class="indexcode==index?'red':''">{{val.title}}</button>
    </div>

    <div v-for="(val,index) in arrTabs" v-if="indexcode==index">
        {{val.contents}}
    </div>
</div>
<script type="text/javascript">
    new Vue({        
        el: '#app',
                data: {            
            indexcode: 0,
                        arrTabs: [                {
                'title': '军事新闻',
                'contents': '1949年，中华人民共和国今天成立了'
            },                  {
                'title': '娱乐新闻',
                'contents': '萧敬腾，来北京了今天看来是要下雨了'
            },                  {
                'title': '科技新闻',
                'contents': '前端是世界上最好的语言'
            }            ]        
        }    
    });
</script>