• This is the 29th day of my participation in the Gwen Challenge in November. Check out the details: The last Gwen Challenge in 2021

v-text

V-text is mainly used to update textContent, which can be equivalent to the JS text property.

   <span v-text="msg"></span>
Copy the code

The two are equivalent:

<span>Interpolation {{MSG}}</span>
Copy the code

v-html

The double brace approach interprets the data as plain text, not HTML. To output real HTML, you can use the V-HTML directive. It is equivalent to the innerHtml property of JS

    <div v-html="rawHtml"></div>
Copy the code

The contents of this div will be replaced with attribute values rawHtml and rendered directly as HTML.

v-pre

The V-pre is mainly used to skip the compilation of this element and its children. You can use it to show the original Mustache tag. Skipping large numbers of uninstructed nodes speeds up compilation.

  <div id="app">

       <span v-pre>{{message}}</span>// This statement is not compiled<span>{{message}}</span>

</div>
Copy the code

Finally, only the content of the second span is displayed

v-cloak

This directive is used to remain on the element until the end of the associated instance is compiled

  <div id="app" v-cloak>

    <div>

        {{message}}

    </div>

</div>

<script type="text/javascript">

    new Vue({

      el:'#app'.data: {message:'hello world'}})</script>
Copy the code

Flicker during page loading (interpolating flicker problem), display first:

<div>

    {{message}}

</div>
Copy the code

It will then compile to:

<div>

    hello world!

</div>
Copy the code

The V-cloak command can be used to solve the problem of interpolation flicker. The V-cloak property selector is set to display: None in CSS.

v-once

The instance of the V-once association will only be rendered once. For subsequent re-rendering, the instance and all of its children are treated as static content skipped, which can be used to optimize update performance.

<span v-once>This will never change:{{msg}}</span>// Single element<div v-once>// Has child elements<h1>comment</h1>

    <p>{{msg}}</p>

</div>

<my-component v-once:comment="msg"></my-component>/ / component<ul>

    <li v-for="i in list">{{i}}</li>

</ul>
Copy the code

In the above example, MSG and list are not re-rendered even if they are changed.

v-if

V-if enables conditional rendering, where Vue renders elements based on whether the value of an expression is true or false.

<a v-if="ok">yes</a>
Copy the code

Displays if the property value OK is true. Otherwise, the element is not rendered.

v-else

V-else is used with v-if, and it must be immediately followed by either v-if or v-else-if, otherwise it will not work.

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

<a v-else>No</a>
Copy the code

v-else-if

V-else -if acts as an else-if block for V-if and can be chained multiple times. Switch statements 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>
Copy the code

v-show

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

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. But v-show elements are always rendered and stored in the DOM, which simply toggles CSS dispaly properties.

Note: V-if has higher switching overhead

V-show has a higher initial rendering overhead.

Therefore, if you want to switch very frequently, use V-show; V-if is better if conditions are unlikely to change at run time

v-for

Render according to traversal sets using the V-for command

Note: When v-for and V-if are on the same node, v-for has a higher priority than V-if. This means that v-if will run in each V-for loop

v-bind

V-bind is used to dynamically bind one or more features. With no arguments, you can bind to an object that contains key-value pairs. This is often used to dynamically bind class and style. Href, etc. Short for a colon [:]

v-model

This directive is used to create two-way data binding on the form. The V-Model ignores the initial values of the value, Checked, and selected features 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:'Ming'}})</script>
Copy the code

In this example, enter a different name in the browser input, and the following p will change directly. This is two-way data binding.

v-on

V-on is primarily used to listen for DOM events in order to execute blocks of code. An expression can be a method name.

The last

If it is helpful to you, I hope to give you a 👍 comment/collection/three even!

Bloggers are honest and answer questions for free ❤