preface

On the front end Vue JS development uses HTML based template syntax, allowing developers to declaratively bind DOM to the data of the underlying Vue instance. All Vue JS templates are legal HTML, so they can be parsed by standard browsers and HTML parsers. Vue, which developers are familiar with The common method of JS data binding is to use the text interpolation of "Mustache" syntax (double braces). The Mustache tag will be replaced with the value of msg property on the corresponding data object. Whenever and wherever the msg property on the bound data object changes, the content at the interpolation will be updated and changed. You can also perform one-time interpolation by using the v-once instruction. When the data changes, the content at the interpolation will not be updated. In this blog post, let's share the relevant contents about the use of v-instruction.

1, Vue JS commonly used v-instructions

1. v-html instruction

The v-html instruction is used to output HTML code. The specific use is as follows:

       <div class="email-content">
          <p v-html="templatePack"></p>  //templatePack is the html code path
        </div>

2. v-text instruction

The v-text instruction is used to output text, as shown below:

          <thead>
              <th class="table-header-th" v-for="(cell, colIndex) in header" :key="colIndex">
                <span class="table-header" v-text="cell.value"></span>  //Output cell Value of value
              </th>
            </thead>

3. v-once instruction

By using the v-once instruction, the interpolation is performed at one time. When the data changes, the content at the interpolation will not be updated. The specific use is as follows:

<span v-once> {{ msg }}</span> //The value of msg remains unchanged

4. v-if instruction

The v-if instruction is used to realize conditional rendering, insert or remove elements (true insertion, false removal), as shown in the following figure:

The v-else instruction ensures that the peer node has v-if 𞓜 v-else-if. If used with v-if, it must be immediately followed by v-if or v-else-if, otherwise it will not work. The specific use is shown in the following figure:

Note: v-if and v-else cannot coexist, and only one can exist.

The v-else-if instruction is an else if block that acts as a v-if. It can be used many times in a chain, and it is more convenient to realize the function of switch statement in the label.

5. v-show instruction

The v-show instruction is used to hide or display elements, as shown below:

<van-loading class="loading-bg" type="spinner" size="24px" v-show="httpLoading"/> //Judge whether to display according to the bool value of httpLoading

6. v-on instruction

The v-on instruction is used for event binding and can be replaced by @ as follows:

      <div class="header-bg" @click="toInterviewResume"> //Bind the click event to the div tag, and use @ instead of v-on

7. v-for instruction

The v-for instruction implements the loop syntax, that is, the function of the for loop. The specific use is as follows:

8. v-bind instruction

The v-bind instruction is used to implement attribute binding. It can be abbreviated as follows:

    <img v-bind:src="imgSrc">    //v-bind is not abbreviated
    <img :src="imgSrc">      //v-bind abbreviation

9. v-model instruction

The v-model instruction is used to implement bidirectional data binding. The specific use is as follows:

2, Vue JS not commonly used v-instructions

1. v-pre instruction

The v-pre instruction is used to not parse data. The specific use is as follows:

<span class="table-header" v-pre>{{hello world}}</span>  //The display effect is: {hello world}}

2. v-cloak instruction

The v-cloak instruction is: before vue parsing, v-cloak will exist on the page; vue parsing is completed and v-cloak disappears. It can solve the problem of interpolation expression flicker. The specific use is as follows:

  //css Style
  [v-cloak]{   
    display:none;
    color:red;
  }
  ....
  <span v-cloak>Loading...</span>

3, Vue JS custom instruction

In addition to the core functions above, the default built-in instructions, Vue JS also allows you to register custom directives. In vue2 0, the main form of code reuse and abstraction is components, but in some cases, the underlying operation of ordinary DOM elements is still required, and custom instructions will be used at this time.

1. Custom v-focus directive

Scenario: when the page is loaded, let the input box get the focus.

As long as no content has been clicked after opening this page, the input box should still be in the focus state. Here, the v-focus instruction is used to realize this requirement. The specific use is as follows:

// Register global custom directives ` v-focus`
  Vue.directive('focus', {
      // When the bound element is about to be inserted into the DOM
      inserted: function (el) {
          // Focus on the corresponding element
          el.focus();
      }
  });
  //Use the above custom command where the input box is used
  <input v-focus> 

2. Custom object literal instruction

Scenario: if the instruction needs to have multiple values, a JavaScript object literal can be passed in, but the instruction function can accept all legal JavaScript expressions. The specific use is as follows:

<span v-demo="{ color: 'red', text: 'hello world!' }"></span>
  Vue.directive('demo', function (el, binding) { //
      console.log(binding.value.color);   // Output result "red"
      console.log(binding.value.text);      //Output the result "hello world!"
  });

last

Through the various use scenarios of the v-instruction described above, in Vue JS is easy to use in development, which is also a necessary function in the development process. Especially for junior developers, they should master the use of this operation scenario, which will not be repeated here.