preface

Coupon website https://www.cps3.cn/

Vue's 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
 

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

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

v-text="info" the result of rendering the page is a. because info is a variable, it directly displays the value corresponding to the variable

V-text = "'abc '+ info" the result of rendering the page is abca. When you want to splice strings and variables, you can add single quotation marks on the string, so that the program will think that you are a string, and the final result of string + info variable is string abca
 

v-html (can parse HTML syntax)

Sometimes our Vue object or the background returns us a piece of native HTML code, which we need to render. If we directly render through {}}, we will treat this HTML code as a string. At this time, we can implement it through the v-html instruction. The example code is as follows:

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

The above two lines of code have no difference except that the vue instructions used are different. Let's show the results first

ok
<b>ok</b>

v-html can parse HTML tags, while text transmits strings. Regardless of the specific content in the string, the original characters are displayed directly

 

v-once (render elements and components only once)

Render elements and components only once. For subsequent re rendering, the element / component and all its child nodes are 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>  

 

v-cloak (prevent page flicker)

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

v-pre (understand)

Skip the compilation of this element and its child elements. Can be used to display the original Mustache tag. Skipping a large number of nodes without instructions speeds 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 finally display hello on the web page, but after using the v-pre instruction, we will skip the compilation and directly display the original tag content, that is, {message}}
 

v-bind

 

Binding properties

If we want to bind the variables in our Vue object on the attributes of html elements, we need to implement it through v-bind.

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

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

Bind Class

There are two ways to bind a Class, one through an array and the other through an object

1. Realize through object:

<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 method of object is like the above code {color:isColor}. key is color and value is isColor. When the value of value is true, it will be rendered, and if it is false, it will not be rendered
 
2. It is realized by 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 array
 

Bind Style

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

1. Implement by object

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

Note: when binding objects, you can only use the hump naming method fontSize, not font size, otherwise an error will be reported. 100px with single quotation marks is a string, and if not, it is a variable. You need to add a variable to data
 

2. It is implemented by 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>