Learning Vue instructions

Preface:

The 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

Note : ☆ represents important and commonly used

1. v-text (v-instruction name = "variable", the variable needs data to provide a value)

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

v-text="info" renders the page result to a . Since info is a variable, the value corresponding to the variable is directly displayed.

v-text="'abc' + info" renders the page result as abca . When you want to concatenate a string and a variable, you can add single quotes to the string so that the program thinks it is a string. The final result of the string + info variable is the string abca

2. v-html (can parse html syntax)

Sometimes in our Vue object, or in the background, we return a piece of native html code, which we need to render. If we render it directly through {{}}, the html code will be treated as a string. At this time we can achieve it through the v-html instruction.

The sample code is as follows:

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

There is no difference between the two lines of code above except that they use different vue instructions. Let's show the results first.

OK
<b>ok</b>

v-html can parse html tags, and text passes a string. No matter what the specific content of the string is, the original characters will be displayed directly.

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

Render elements and components only once. On subsequent re-renders, the element/component and all its 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> // Render only once<p v-once>{{ msg }}</p>  
 

4. v-cloak (prevent page flickering)

This directive remains on the element until the associated instance finishes compiling. When used with CSS rules such as [ v-cloak] { display: none } , this directive can hide uncompiled Mustache markup until the instance is ready.

5. v-pre (understanding)

Skips compilation of this element and its child elements. Can be used to display raw Mustache tags. Skipping large numbers of nodes without instructions will speed up compilation.

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

Normally, we will compile and display hello on the web page, but after using the v-pre directive, we will skip the compilation and directly display the original tag content, that is, {{message}}

6. v-bind

6.1 Binding Properties

If we want to bind the variables in our Vue object to the attributes of html element, we need to use v-bind to do it.

<div id="app">
  <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: "https://www.baidu.com",
      imgSrc: "upload/2022/web/pc_a91909218349e60ed8f6f6f226c30e5f.gif"
    }
  })
</script>

We just need to add v-bind : in front of the bound property. Of course, we can also use the abbreviation: and just write a colon.

6.2 Binding Class

There are two ways to bind Class , one is through array binding, the other is through object binding

Implemented through objects:

<div id="app">
  <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 code above {color:isColor} , key is color , value is isColor , and when value value is true , it is rendered, and when it is false , it is not rendered.

This can be achieved by using an array:

<div id="app">
  <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>

When class needs to bind two attributes, you can use an array

6.3 Style Binding

There are also two ways to bind Style, one is to bind through an array, and the other is to bind through an object.

Implemented through objects:

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

Note: When binding an object, you can only use camelCase naming method fontSize, you cannot use font-size, otherwise an error will be reported. 100px plus single quotes is a string, without single quotes it is a variable, you need to add the variable in data

This can be achieved by using an array:

<div id="app">
  <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 commands. For more relevant Vue command content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!