preface

Over the past few years, I have been struggling in the it industry. Along the way, many have summarized some high-frequency interviews in the python industry. I see most of the new blood in the industry, and I still have all kinds of difficult questions for the answers to all kinds of interview questions or collection

Therefore, I developed an interview dictionary myself, hoping to help everyone, and also hope that more Python newcomers can really join the industry, so that Python fire does not just stay in advertising.

Wechat applet search: Python interview dictionary

Or follow the original personal blog: https://lienze.tech

You can also focus on WeChat official account and send all kinds of interesting technical articles at random: Python programming learning.

Event binding

v-on

Bind the corresponding event to the element. The following is the binding for the click event

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

new Vue({
	el: "#app",
    method: {
    	show: function(){
			alert("Play it")
        }    
    }
})

If you get a single input change, you can use the input event

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

horse race lamp

Here is a running lantern effect to play with

<div id="app">
    <h3 v-html="message"></h3>
    <button @click="start">start</button>
    <button @click="stop">stop it</button>
</div>

new Vue({
    el: "#app",
    data: {
        message: "This is a running lantern",
        sT: null, // Timer instance
    },
    methods:{
        work(){
            this.message = this.message.substring(1) + this.message[0] 
            // What the loop timer does
        },
        start(){
            if (this.sT==null) { // Judge whether the timer has been started at this time
                console.log("Turn on the timer")
                this.sT = setInterval(this.work,400)
            } else {
                console.log("Already open, not open")
            }

        },
        stop(){ // Turn off the timer and set the timer variable to null
            console.log("off timer ")
            clearInterval(this.sT)
            this.sT = null
        }
    }
)}

Event binding modifier

Stop bubbling

For example, if a button is in a div and the button and div have their own events, click the button at this time, and the event will be triggered from the button to the div like a bubble. The. stop modifier is used to prevent the default event triggering behavior

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

var vm = new Vue({
    el: "#fDiv ", / / control area
    data: {},
    methods: {
        divClick(){
            console.log("div It was clicked")
        },
        btnClick(){
            console.log("The button was clicked")
        }
    },
})

• stop bubbling through. stop modification

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

Block default behavior

For example, a tag like a has a default jump action when clicked, which can be blocked through. prevent

<div id="fDiv">
	<a href="https://Www.baidu. Com "@ click. Prevent =" alink "> go to Baidu</a>
</div>

var vm = new Vue(){
    el: "#fDiv",
    methods:{
    	aLink(){
    		console.log("Connection clicked")
        }
    }   
}

Capture events

The default event trigger processing mechanism is the bubbling mechanism. capture represents the event with this modification, which will be triggered first and out of the bubbling order;

It can also be understood as who has the modifier and whose event is triggered first

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

var vm = new Vue({
    el: "#fDiv ", / / control area
    data: {},
    methods: {
        divClick(){
            console.log("div It was clicked")
        },
        btnClick(){
            console.log("The button was clicked")
        }
    },
})

Self event

Unlike capture and bubbling,. self only the current event triggered by itself can really execute the callback function

And. self will only prevent the event triggering behavior of the current element

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

// Same as above

Single event

Use. Once to trigger the event function only once

<div id="fDiv">
    <a href="https://Www.baidu. Com "@ click. Prevent. Once =" alink "> go to Baidu</a>
    <!-- The blocking event that the connection cannot jump will only occur once -->
</div>

var vm = new Vue(){
    el: "#fDiv",
    methods:{
    	aLink(){
    		console.log("Connection clicked")
        }
    }   
}