Vue事件绑定及事件绑定修饰符

前言

这几年一直在it行业里摸爬滚打，一路走来，不少总结了一些python行业里的高频面试，看到大部分初入行的新鲜血液，还在为各样的面试题答案或收录有各种困难问题

于是乎，我自己开发了一款面试宝典，希望能帮到大家，也希望有更多的Python新人真正加入从事到这个行业里，让python火不只是停留在广告上。

微信小程序搜索：Python面试宝典

或可关注原创个人博客：https://lienze.tech

也可关注微信公众号，不定时发送各类有趣猎奇的技术文章：Python编程学习

事件绑定

v-on

给元素绑定对应事件，以下是对于点击事件的绑定

<div id="app">
    <button v-on:click="show">按钮</button>
    <button @click="show">按钮</button>
</div> 

new Vue({
	el: "#app",
    method: {
    	show: function(){
			alert("弹一下")
        }    
    }
})

如果获取到单次输入的改变，那么可以使用input事件

<input type="text" v-model="account" @input="getInputData">

跑马灯

这里有一个跑马灯效果可以玩耍

<div id="app">
    <h3 v-html="message"></h3>
    <button @click="start">开始</button>
    <button @click="stop">停止</button>
</div>

new Vue({
    el: "#app",
    data: {
        message: "这是一个跑马灯",
        sT: null, // 定时器实例
    },
    methods:{
        work(){
            this.message = this.message.substring(1) + this.message[0] 
            // 循环定时器所作的事情
        },
        start(){
            if (this.sT==null) { // 判断此时是否已有定时器开启
                console.log("开启定时器")
                this.sT = setInterval(this.work,400)
            } else {
                console.log("已经开启 不在开启")
            }

        },
        stop(){ // 关闭定时器 设置定时器变量为null
            console.log("关闭定时器")
            clearInterval(this.sT)
            this.sT = null
        }
    }
)}

事件绑定修饰符

阻止冒泡

比如一个按钮在一个div中，并且按钮和div均有自己的事件，那么此时点击按钮，事件会像冒泡一样从按钮开始一直到div进行触发，.stop修饰符用来阻止默认的事件触发行为

<div id="fDiv" @click="divClick">
    <button id="fBtn" @click="btnClick">按钮</button>
</div>

var vm = new Vue({
    el: "#fDiv", // 控制区域
    data: {},
    methods: {
        divClick(){
            console.log("div被点击了")
        },
        btnClick(){
            console.log("按钮被点击了")
        }
    },
})

• 通过.stop修饰阻止冒泡

<div id="fDiv" @click="divClick">
    <button id="fBtn" @click.stop="btnClick">按钮</button>
</div>

阻止默认行为

比如像a标签这样的，在点击时他有默认的跳转动作，可以通过.prevent阻止该默认行为

<div id="fDiv">
	<a href="https://www.baidu.com" @click.prevent="aLink">去百度</a>
</div>

var vm = new Vue(){
    el: "#fDiv",
    methods:{
    	aLink(){
    		console.log("连接被点击")
        }
    }   
}

捕获事件

默认的事件触发处理机制是冒泡机制，capture代表具有该修饰的事件，会优先触发，脱离冒泡顺序；

也可理解为谁有该修饰符，先触发谁的事件

<div id="fDiv" @click.capture="divClick">
    <button id="fBtn" @click="btnClick">按钮</button>
</div>

var vm = new Vue({
    el: "#fDiv", // 控制区域
    data: {},
    methods: {
        divClick(){
            console.log("div被点击了")
        },
        btnClick(){
            console.log("按钮被点击了")
        }
    },
})

自身事件

与capture和冒泡不同，.self只有是自身触发的当前的事件才真正执行处理的回调函数

并且.self只会阻止当前元素的事件触发行为

<div id="fDiv" @click.self="divClick">
    <button id="fBtn" @click.self="btnClick">按钮</button>
</div>

// 与上同

单次事件

使用.once只触发一次事件函数

<div id="fDiv">
    <a href="https://www.baidu.com" @click.prevent.once="aLink">去百度</a>
    <!-- 连接无法跳转的阻止事件 只会出现一次 -->
</div>

var vm = new Vue(){
    el: "#fDiv",
    methods:{
    	aLink(){
    		console.log("连接被点击")
        }
    }   
}