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.

Basic grammar

Every vue application starts by instantiating a new vue object

The first template syntax is to have the main object element that vue can operate on in the page

The elements under this dom will be taken over by vue

<div id="content">
    {{ message }}
    <!-- This is also called interpolation expression -->
</div>

Take over the tag and initialize the vue instance object

var vm = new Vue({ 
    // The vm variable is not allowed to use hyphens. You can use underscores. For example, vm data is not allowed
    el: "#content", 
    // Corresponding to a tag in the document, when the vue object is created, the area in the tag will be taken over
    data: {
        message: "This is vue Variables in"
    }
})

When a vue instance is created, the responsive system of vue adds all the attributes that can be found in its data object

When these attribute values are changed, the view will also change accordingly and update the corresponding attributes to the new values

Template instruction

Template syntax refers to how to put data into html

Vue uses an HTML based template syntax that allows developers to declaratively bind the DOM to the data of the underlying Vue instance

All Vue templates are legal HTML, so they can be parsed by standard browsers and HTML parsers

Difference expression

The most common form of data binding is text interpolation using Mustache syntax (double braces), that is, {message}} in the above example

<div id="app">
	{{ message }}    
</div>

Define the variable corresponding to the interpolation expression message in vue

var vm = new Vue({
    el: "#app", // getElementById('app')
    data: {
        message: "vue",
    },
})

Function return value

In addition to the interpolation expression, the return value of the function can also be called directly on the page

<div id="app">
    <h1>{{ classType }}study</h1>
    <p>{{ content }}</p>
    <span>{{ describe() }}</span>
</div>

describe is a method that can be called directly in a double brace expression

var vm = new Vue({
    el: "#app", // getElementById('app')
    data: {
        classType: "vue",
        content: "This is vue A test of",
    },
    methods:{
        describe:function(){
            return "This is the return value of a function"
        },
    }
})

v-html

Insert the content in html format, which is often used for rendering rich text data

<div id="app">
    <p v-html="content"></p>
</div>

var vm = new Vue({
    el: "#app",
    data: {
      content: "<b>Paragraph label</b>Text content"  
    },
})

Note that it is very dangerous to dynamically render arbitrary HTML on the website, because it is easy to lead to XSS attack

v-html is generally only used in trusted content and will never be used in content submitted by users

v-text

Insert the content according to the text format, but it will overwrite the content in the original label without flashing problem

<div id="app">
    <p v-text="contetn"></p>
    <p>
       	{{ gender ? 'male' : 'female' }}
        <!-- ok? true:false -->
    </p>
</div>

var vm = new Vue({
    el: "#app",
    data: {
      	gender: true, // When the variable value is true, the left value in the template variable is displayed
      	content: "<b>Paragraph label</b>Text content"  
    },
})

However, it will not explain that the text content is the actual html tag and other style effects

v-cloak

To solve the flicker problem caused by non initialization of variables during page rendering when using difference expression, you can set the browser network speed effect for reproduction

Generally speaking, for example, if the actual content of the {{message}} variable is not created, the page will only show the effect of {{message}}. After the variable is initialized, {{message}} will change to the actual value. At this time, the change process is called flicker

The v-cloak instruction can hide uncompiled tags until the instance is ready

<div id="app">
    {{ message }}
</div>
<script>
    new Vue({
        el: "#app",
        data:{
            message: "test",
        }
    })
</script>

In the above code, if the network speed is slow enough to clear, the page will be loaded first, and the displayed content is {message}}

Solution: write on the label of the template variable through the v-clock instruction, and set a class style of v-clock

<style type="text/css">
    [v-cloak]{
        display: none;
    }
</style>

<div v-cloak id="app">
	<p v-cloak>{{ message }}</p>
</div>