Learning of Vue instructions

Preface:

Vue official website provides a total of 14 instructions, as follows:

• v-text

• v-html

• v-show
• v-if ☆☆☆
• v-else ☆☆☆
• v-else-if ☆☆☆
• v-for ☆☆☆
• v-on ☆☆☆
• v-bind ☆☆☆
• v-model ☆☆☆
• v-slot

• v-pre

• v-cloak

• v-once

Notice:☆ Represents important and commonly used

1. v-text (v-instruction name="variable", variables need data to provide numerical values)

<p v-text="info"></p>
<p v-text="'abc' + info"></p>
<script>
    new Vue({
        el: '#app',
        data: {
            info: 'a'
        }
    })
</script>

v-text="info"The rendering page result isa,becauseinfoIt is a variable, and directly displays the corresponding value of the variable

v-text="'abc' + info"The rendering page result isabca, When you want to splice strings and variables, you can add single quotes to the string, so that the program thinks that you are a string, and the final result of the string + info variable is a stringabca

2. v-html (can parse html syntax)

Sometimes oursVueIn the object, or in the background, we return a segment native to it.htmlWe need to render the code, so if we render it directly through {{}}, we will use thishtmlThe code is treated as a string. Then we can passv-htmlInstructions are implemented.

The sample code is as follows:

<p v-html="'<b>ok</b>'"></p>
<p v-text="'<b>ok</b>'"></p>

In addition to the above two lines of codevueThere is no difference except for different instructions. Let's show the results first.

ok
<b>ok</b>

v-htmlCan be parsedhtmllabel, andtextWhat is passed is a string, regardless of what the specific content is in the string, it directly displays the original characters.

3. v-once (only render elements and components once)

Render elements and components only once. Subsequent re-rendering, elements/components and all their children will be treated as static content and skipped. This can be used to optimize update performance.

<input type="text" v-model="msg" v-once>  // Only render once<p v-once>{{ msg }}</p>  
 

4. v-cloak (prevent page flickering)

This directive remains on the element until the associated instance ends compilation. andCSS Rules such as [v-cloak] { display: none }When used together, this instruction can hide uncompiledMustacheTags until the instance is ready.

V. v-pre (understand)

Skip the compilation process of this element and its child elements. Can be used to display the originalMustache Label. Skipping a large number of nodes without instructions will speed up compilation.

<div >
  <span v-pre>{{message}}</span>
</div>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      message: "hello"
    }
  })
</script>

Normally, we will finally display it on the web page through compilation.hello, but usedv-preAfter the command, the compilation will be skipped and the original tag content will be displayed directly.{{message}}

VI. v-bind

6.1 Binding properties

If we want tohtmlWe are bound to the attributes of the elementVueVariables in the object need to be passedv-bindTo achieve it.

<div >
  <a v-bind:href="baidu" rel="external nofollow" >Baidu</a>
  <img :src="imgSrc" alt="">
</div>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      message: "hello",
      baidu: "",
      imgSrc: "/img/pc_a91909218349e60ed8f6f6f226c30e5f.gif"
    }
  })
</script>

We just need to add the bound property before thev-bind: It's OK, of course we can also use the abbreviation:, just write the colon

6.2 Bind Class

BindClassThere are 2 ways, one is bound through arrays, and one is bound through object

Implemented through object methods:

<div >
  <p v-bind:class="{color:isColor}">Hello，world</p>
</div>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      isColor: true
    }
  })
</script>
<style>
    .color{
        color: blue;
    }
</style>

The object method is like the above code{color:isColor} ，keyyescolor，valueyesisColor,whenvalueThe value oftrueThen render,falseNo rendering

Implemented through arrays:

<div >
  <p :class="[classname1, classname2]">{{message}}</p>
</div>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      message: "hello",
      classname1: "pcolor",
      classname2: "fontSize"
    },
  })
</script>
<style>
    .pcolor{
        color: red;
    }
    .fontSize{
        font-size: 30px;
    }
</style>

whenclassWhen you need to bind 2 properties, you can use an array

6.3 Bind Style

There are also two ways to bind Style, one is bound through arrays, and the other is bound through object

Implemented through object methods:

<div >
  <p :style="{fontSize:'100px'}">{{message}}</p>
</div>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      message: "hello"
    }
  })
</script>

Notice:When binding an object, you can only have the camel nomenclature fontSize. You cannot use font-size, otherwise an error will be reported. Adding single quotes to 100px is a string, and not adding it is a variable. You need to add variables in data.

Implemented through arrays:

<div >
  <p :style="[style1, style2]">{{message}}</p>
</div>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      message: "hello",
      style1: {background:'red'},
      style2: {fontSize:'30px'},
    }
  })
</script>

This is the end of this article about learning Vue instructions. For more related Vue instructions, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!