Detailed explanation of common instructions in Vue learning

Time:2020-10-25

This paper describes Vue common instructions with examples. For your reference, the details are as follows:

1. Create a Vue instance

One of the characteristics of Vue is the data-driven interface. Once the data in JS is modified, the data used in the interface will be changed immediately. In order to manipulate the interface, we need to get the tag elements of the interface and instantiate a Vue instance.

For example, create a div in HTML:


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

In JS, it is instantiated as a Vue object

let app=new Vue({
    El: 'ා app', // the class name and ID of the tag, which is used to get the element
    //The data members used are stored in the form of key value pairs
    data:{
      MSG: 'displayed content'
    },
    //Contains the function method to be used
    methods:{
    }
  });

In this way, the MSG content in JS will be displayed in the P tag.

2. Vue common instructions

1. V-model: bi directional binding of components and variables. When component data is modified, variables will change accordingly. It can be followed by modifiers such as. Lazy, which synchronizes to the variable only when the value in the tag changes. Trim filters spaces in user input.

2. V-once: data cannot be modified. For example, there are three tags in HTML as follows:


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

After inputting the content in the input box, it will be transmitted to the MSG variable. The information displayed in the second P tag will change with MSG, while the first p tag with v-once will only display the initial value of MSG and will not change with it.

3. If it is true, the element will be rendered, and if false, the element will be commented out

4. V-show is similar to V-IF. True renders, but false does not comment out. Instead, it uses the display:none; If you need to switch back and forth, it is better to use v-show. For example:

< p V-IF = "show" > display content</p>
< p V-IF = "hide" > comment content</p>
< p v-show = "hide" > v-show hide</p>

order show:true , hide:false The results are as follows:

5. V-else, v-else-if and V-IF are used together to form logical judgment. Whether to display v-else, v-else-if and V-IF can not be used separately or separately

<p>Please enter the score:</p>
<input type="text" v-model="score">
< p V-IF = "score > 90" > excellent</p>
< p v-else-if = score > 80 "> good</p>
< p v-else-if = "score > 60" > medium</p>
< p v-else > fail</p>

The results are as follows

6. V-for is used to traverse elements. The format is V-for = (value, key) in traversal content “. The traversal content can be array, object and string. For example, there is a person object in JS data, person: {Name: ‘Tony’, age:15 , sex: ‘male’}, the contents of which are traversed on the page and output:


<p v-for="(value,key) in person">
  {{key+':'+value}}
</p>

The results are as follows:

7. V-text: injects data into the tag and overlays the rest of the tag

8. V-html: injects HTML content into the tag overlay as its child elements. For example:

< div v-html = "vhtml" > the original content in the tag < / div >

The result inserts a child div and will override the original content:

9. V-bind: bind attributes, classes, styles, etc. to tags, which can be abbreviated as colon, for example:

<! -- complete grammar -- >
<a v-bind:href="url" rel="external nofollow" rel="external nofollow" >...</a>
<! -- abbreviation -- >
<a :href="url" rel="external nofollow" rel="external nofollow" >...</a>

Because the interface elements of Vue are all driven by data, the attributes, styles and other data obtained by JS code from the server need to be added to the HTML interface elements by binding. Through binding, the elements to add attributes can be selected more flexibly. Vue does not directly manipulate the class of elements, but binds a data to the class, and then drives the presence or absence of class by data, thus changing the display of the page. This fully shows the characteristics of Vue data-driven.

For example, bind an active class to the line whose key is’ name ‘in the person object above to highlight it

<! -- traverse the person array through the V-for loop and bind the class. If the key value is name, the bound class is' active '-- >
<p v-for="(value,key) in person" :class="key==='name' ? 'active' : ''">
  {{key+':'+value}}
</p>

result:

You can also use the following methods to bind a class name. The page will determine whether to bind active and text danger classes according to the true or false values of isactive and haserror. You can even set active as a calculated property and return true / false after operation.

Note: bound attributes can be linked with hump nomenclature or dashes, but the use of dashes should be enclosed in quotation marks


<div
   v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>

10. V-on: bind function to tag, which can be abbreviated as @, such as binding a click function


<p>{{msg}}</p>
<button @click="changeContent()">change</button>

Implement the changecontent function in Vue’s methods

let app=new Vue({
    el:'#app',
    data:{
      MSG: 'input information for the first time',
    },
    methods:{
      changeContent(){
        this.msg= "Modified input information";
      }
    }
  });

Original page and after clicking:

Vue.js For v-onEvent modifier。 Modifiers are represented by an instruction suffix at the beginning of. And are used to constrain events. For example:

<! -- prevents click events from propagating -- > 
<a v-on:click.stop="doThis"></a>
<! -- submit events no longer overload pages -- > 
<form v-on:submit.prevent="onSubmit"></form> 
<! -- modifiers can be used in series, and the order in which they are used is important -- > 
<a v-on:click.stop.prevent="doThat"></a> 
<! -- use event capture mode when adding event listeners -- > 
<! -- that is, the events triggered by the element itself are handled here first, and then handled by the internal element -- > 
<div v-on:click.capture="doThis">...</div> 
<! -- only when event.target  The function is triggered when it is the current element itself -- > 
<! -- that is, events are not triggered from internal elements -- > 
<div v-on:click.self="doThat">...</div>
<! -- click events will only be triggered once -- >
<a v-on:click.once="doThis"></a>

In addition to the click event, there are also key events, such as when the button with the keyboard code of 13 is pressed:


<input v-on:keyup.13="submit">

To facilitate the use of Vue to rename some commonly used keys, event modifiers can be used, including. Enter,. Delete,. Tab,. Space,. ESC,. Up,. Down,. Right,. Left, etc. you can also customize:


Vue.config.keyCodes.f1 = 112;

I hope this article will be helpful to you vue.js Programming helps.