1. v-text

v-text is mainly used to update textContent, which can be equivalent to the text attribute of JS.

<span v-text="msg"></span>

The two are equivalent:

<span>{{msg}}</span>

2. v-html

Double curly braces interpret the data as plain text rather than HTML. In order to output real HTML, you can use the v-html instruction. It is equivalent to the innerHtml attribute of JS.

<div v-html="rawHtml"></div>

The content of this div will be replaced with the attribute value rawHtml and rendered directly as HTML.

3. v-pre

v-pre is mainly used to skip the compilation process of this element and its child elements. Can be used to display the original Mustache tag. Skip a large number of nodes without instructions to speed up compilation.

<div id="app">
    <span v-pre>{{message}}</span>  //This statement is not compiled
    <span>{{message}}</span>
</div>

Finally, only the contents of the second span are displayed

4. v-cloak

This instruction is used to keep on the element until the end of the associated instance.

<div id="app" v-cloak>
    <div>
        {{message}}
    </div>
</div>
<script type="text/javascript">
    new Vue({
      el:'#app',
      data:{
        message:'hello world'
      }
    })
</script>

When the page is loaded, it will flash and display:

<div>
    {{message}}
</div>
It will then compile to:
<div>
    hello world!
</div>

5. v-once

The instance associated with v-once will be rendered only once. After re rendering, the instance and all its sub nodes will be treated as static content skipping, which can be used to optimize the update performance.

<span v-once>This will never change:{{msg}}</span>  //Single element
<div v-once>//There are child elements
    <h1>comment</h1>
    <p>{{msg}}</p>
</div>
<my-component v-once:comment="msg"></my-component>  //assembly
<ul>
    <li v-for="i in list">{{i}}</li>
</ul>
In the above example, msg,list Even if changes are made, they will not be re rendered.

6. v-if

v-if can realize conditional rendering, and Vue will render elements according to the true and false conditions of the value of the expression.

<a v-if="ok">yes</a>

If the property value ok is true, it is displayed. Otherwise, the element is not rendered.

7. v-else

V-else is used with v-if. It must follow v-if or v-else-if, otherwise it will not work.

<a v-if="ok">yes</a>
<a v-else>No</a>

8. v-else-if

v-else-if acts as an else if block of v-if and can be used multiple times in a chain. The switch statement can be implemented more conveniently.

<div v-if="type==='A'">
    A
</div>
<div v-else-if="type==='B'">
    B
</div>
<div v-else-if="type==='C'">
    C
</div>
<div v-else>
    Not A,B,C
</div>

9. v-show

<h1 v-show="ok">hello world</h1>

It is also used to display elements according to conditions. Unlike v-if, if the value of v-if is false, the element is destroyed and not in the dom. However, the elements of v-show will always be rendered and saved in the dom. It just simply switches the dispaly attribute of css.

Note: v-if has higher switching overhead
v-show has higher initial rendering overhead.
Therefore, if you want to switch very frequently, it is better to use v-show; If conditions are unlikely to change at runtime, then v-if is better

10. v-for

Use the v-for instruction to render according to the traversal array
There are two traversal forms

<div v-for="(item,index) in items"></div>   //Using in, index is an optional parameter that represents the index of the current item
<div v-for="item of items"></div>   //Use of

The following is an example, and in v-for, you have full access to the properties of the parent scope.

<ul id="app">
    <li v-for="item in items">
        {{parent}}-{{item.text}}
    </li>
</ul>
<script type="text/javascript">
    var example = new Vue({
      el:'#app',
      data:{
        parent:'Parent scope'
        items:[
          {text:'Text1'},
          {text:'Text2'}
        ]
      }
    })
</script>

Will be rendered as:

<ul id="app">
    <li>Parent scope-Text1</li>
    <li>Parent scope-Text2</li>
</ul>

Note: when v-for and v-if are on the same node, the priority of v-for is higher than that of v-if. This means that v-if will run in each v-for loop

11. v-bind

v-bind is used to dynamically bind one or more features. When there are no parameters, you can bind to an object containing key value pairs. It is often used to dynamically bind class and style. And href.
Abbreviated as a colon [:]

<1> Object syntax:

//Examples of class switching
<div id="app">
    <!--When data Defined in isActive be equal to true When, is-active This class will be added to work-->
    <!--When data Defined in hasError be equal to true When, text-danger This class will be added to work-->
    <div :class="{'is-active':isActive, 'text-danger':hasError}"></div>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            isActive: true,  
            hasError: false
        }
    })
</script>

Render result:

<!--because hasError: false，therefore text-danger Not rendered-->
<div class = "is-active"></div>

<2> Array syntax

<div id="app">
    <!--Array syntax: errorClass stay data The corresponding class will be added-->
    <!--is-active Is object syntax, according to activeClass The corresponding value determines whether to add-->
    <p :class="[{'is-active':activeClass},errorClass]">12345</p>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            activeClass: false,
            errorClass: 'text-danger'
        }
    })
</script>

Render result:

<!--because activeClass: false，therefore is-active Not rendered-->
<p class = "text-danger"></p>

<3> Bind data objects directly

<div id="app">
    <!--stay vue Instance data Defined in classObject Object, which contains all class names and their true values-->
    <!--When the value of the class inside is true Will be rendered when-->
    <div :class="classObject">12345</div>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            classObject:{
                'is-active': false,
                'text-danger':true
            }           
        }
    })
</script>

Render result:

<!--because'is-active': false，therefore is-active Not rendered-->
<div class = "text-danger"></div>

12. v-model

This instruction is used to create a two-way data binding on the form.
v-model ignores the initial values of the value, checked and selected attributes of all form elements. Because it selects Vue instance data as the specific value.

<div id="app">
    <input v-model="somebody">
    <p>hello {{somebody}}</p>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            somebody:'Xiao Ming'
        }
    })
</script>

In this example, directly enter another name in the browser input, and the content of p below will change directly. This is bidirectional data binding.

13. v-on

v-on is mainly used to listen for dom events in order to execute some code blocks. An expression can be a method name.
Abbreviated as: [@]

<div id="app">
    <button @click="consoleLog"></button>
</div>
<script>
    var app = new Vue({
        el: '#app',
        methods:{
            consoleLog:function (event) {
                console.log(1)
            }
        }
    })
</script>

v-model modifier

<1> .lazy
By default, v-model synchronizes the values and data of the input box. You can use this modifier to change to resynchronization in the change event.

<input v-model.lazy="msg">

<2> .number
Automatically convert user input values to numeric types

<input v-model.number="msg">

<3> .trim
Automatically filter the first and last spaces entered by the user

<input v-model.trim="msg">

Event modifier

. stop prevents the event from continuing to propagate
The. prevent event no longer reloads the page
. capture uses the event capture mode, that is, the event triggered by the element itself is processed here first, and then handed over to the internal element for processing
Only in self.event target
Is the handler function triggered when the current element itself
The. Once event will only be triggered once
. passive tells the browser that you don't want to block the default behavior of events

<!-- Prevent click events from continuing to propagate -->
<a v-on:click.stop="doThis"></a>

<!-- Submitting an event no longer reloads the page -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- Modifiers can be concatenated -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- Only modifiers -->
<form v-on:submit.prevent></form>

<!-- Use event capture mode when adding event listeners -->
<!-- That is, the event triggered by the element itself is processed here first, and then handed over to the internal element for processing -->
<div v-on:click.capture="doThis">...</div>

<!-- Only when event.target Is the handler function triggered when the current element itself -->
<!-- That is, the event is not triggered from an internal element -->
<div v-on:click.self="doThat">...</div>

<!-- The click event will only be triggered once -->
<a v-on:click.once="doThis"></a>

<!-- Default behavior for scrolling events (Rolling behavior) Will be triggered immediately -->
<!-- Without waiting `onScroll` complete  -->
<!-- This includes `event.preventDefault()` Situation -->
<div v-on:scroll.passive="onScroll">...</div>

When using modifiers, order is important; The corresponding code will be generated in the same order.
Therefore, use v-on: click prevent. Self will block all clicks, and
v-on:click.self.prevent only blocks clicks on the element itself.