vue

When creating a vue instance, an object options is passed in

el:string/htmlelement: determines which DOM the vue instance will manage
data:object/function: the data object corresponding to the vue instance (there must be a function in the component)
methods:{[key:string]:function} function: define some methods belonging to vue, which can be called in other places or used in instructions

vue basic operation

Interpolation operation (i.e. inserting text data in data into html)

Static insertion

1. Mustache syntax (double bracket syntax)
   You can not only write variables directly, but also write simple expressions that only act on the element content

2. The v-once instruction indicates that the elements and components will be rendered only once and will not be changed in response. There is no need to follow other instructions

3. The v-html instruction parses the HTML code and displays the corresponding content

<h2 v-html="url"></h2>//html part
url: "<a href='http://Www.baidu. Com '> Baidu < / a > "/ / data

1. The function of v-text instruction is similar to that of mustache syntax, but it is not as flexible as mustache. The specific use method is similar to that of v-html (not recommended)

2. The v-pre instruction skips the compilation process of this element and child elements and directly displays the original mustache syntax

3. V-cloak instruction. In order to prevent the browser from directly displaying the uncompiled mustache syntax when rendering, add this attribute. You can directly select the elements with this attribute in the style and set their display: none. Then, after vue rendering, the v-cloak attribute will be deleted directly

[v-cloak] {
    display: none;
}

Dynamic insert (v-bind)

v-bind, which can dynamically bind attributes. The specific methods are as follows

<img v-bind:src="imgurl" alt="">//html part
<img :src="imgurl" alt="">//Syntax sugar is to use: instead of v-bind:
imgurl:"https://cn.vuejs.org/images/logo.svg"//data section

v-bind dynamic binding class

1. Object syntax

<h2 v-bind:class="{active:isActive, line:isLine}">Ha ha ha</h2>

When the v-bind instruction is used in class, an object can be placed. The object content is a key value pair, and the attribute name is followed by a Boolean value to judge whether the attribute is valid. At present, the object can only be used when v-bind is placed
The following is a small case. Click once to turn the word red, click twice to turn the word green, and the word is black when there is no point

<div id="app">
    <h2 v-bind:class="{active:isActive, line:isLine}">Ha ha ha</h2>
    <button v-on:click="btnClick">Button</button>
</div>
<script src="vue.js"></script>
<script>
    let count = 0;
    const app = new Vue({
        el: "#app",
        data: {
            isActive: false,
            isLine: false
        },
        methods: {
            btnClick: function () {
                count ++;
                if (count%2!=0) {
                    this.isLine = false;
                    this.isActive = true;
                }else{
                    this.isActive = false;
                    this.isLine = true;
                }
            }
        }
    })
</script>

css part

.active{
    color: brown;
}
.line{
    color: cadetblue;
}

When using v-bind, classes can be merged with ordinary classes (vue internal syntax) and do not conflict with ordinary classes

<h2 v-bind:class="{active:isActive, line:isLine}" class="li">Ha ha ha</h2>

If the properties in class are too complex, they can be placed in methods or computed

<h2 v-bind:class="getClasses()" class="li">Ha ha ha</h2>
getClasses:function () {
                return {active:this.isActive, line:this.isLine}
            }

1. Array syntax

<h2 :class="['active', 'line']" class="li">Ha ha ha</h2>
<!-- The above is the array syntax. Like the object syntax, it can be merged with ordinary classes. If the incoming form is the same as the above, it is actually no different from ordinary classes because they are immutable -->
<h2 :class="[active, line]" class="li">Ha ha ha</h2>
<!-- In this way, the class can be changed dynamically. Array methods are not commonly used active and line It's actually the variable name, in data Take out the variables -->

If the attribute is too complex, you can also encapsulate the function in methods to return the array like the object syntax. Remember to add this before the variable name

v-bind dynamic binding style

Like the previous one, this one has the same object method and array method

1. Object syntax

<h2 :style="{key(Attribute name): value(Attribute value)}">{{message}}</h2>

If the attribute value is not quoted in single quotation marks, it will be the variable name by default. Therefore, when you want to change it directly, remember to add single quotation marks to the attribute value

1. Array syntax
   It is an array type, in which the parameter places the variable name, and the specific variable value is determined by the data in data

Calculation properties

When using mustache syntax, if the splicing is too long, it will be particularly cumbersome. At this time, you can add a method to solve the problem in methods

Of course, there is also a calculation attribute, computed, to calculate the corresponding attribute format. When using mustache syntax and function calls, they are not used in the form of functions, but directly in the form of attributes

<h2>{{full}}</h2>//html part
computed:{//js part
    full: function () {
        return this.active + " " +this.line
    }
}

Generally, the calculation attribute has only the get attribute and no set attribute, so it is a read-only attribute

Why not add parentheses is because it is equivalent to calling the get method directly

Here is the accessor property of the object

Differences between calculation properties and methods
When a method is called, as long as the content of the calculation attribute is not changed, the function in the methods will only be executed once, but the function in the methods will be executed several times after several calls.
Therefore, it is generally recommended to use calculated attributes to optimize performance when calculated attributes and methods can be used at the same time.
Only when the internal content changes, the calculation property will be re executed
Why is the calculation property executed only once without changing its contents?
This is because the calculated attribute will be cached. If it is used multiple times, the calculated attribute will be called only once

In js before es6, there were only global scope and function scope, so there were problems such as closures

Event listening (v-on)

You can bind functions, bind objects (rarely used), or write specific operation steps directly

@click==v-on:click

@It's the syntax of v-on

When the event is called, there are no parameters, and the parentheses can be omitted
If there are parameters and parentheses, but no parameters are passed in, the formal parameter is undefined
If there are parameters and no parentheses (of course, the parameters will not be passed in), the parameters are the event objects clicked
If you have parameters and want to get event objects, vue has a fixed format, that is e v e n t ， Just yes stay ginseng number change amount front noodles plus upper Event is to add an event before the parameter variable event is to add a symbol in front of the parameter variable

Modifier for v-on

<button @click.stop="increment">+</button>

• The. stop modifier prevents bubbling

• . prevent block default events

• . keyCode listens for events of a key on the keyboard
  For example:. Enter listens for enter events

• . native listens for native events of the component root element

• . once only triggers a callback once

Conditional judgment

1. v-if, followed by Boolean values to determine whether to render the elements inside

2. V-else has no parameters. As long as v-if is false, the content of v-else will be displayed
   If multiple pairs are matched one by one according to the proximity principle, if else is more than if, then more else will not be displayed

3. v-else-if, the parameter is a judgment. If the condition is met, it will be displayed. If not, the next one will be replaced
   Just like else if, the logic judgment is complex. It is recommended to use the methods encapsulation method to directly return the content. It is not recommended to use such complex logic judgment in hmtl