Commonly used v-instructions in parsing

Interpretation of v-text on if for model bind show in Vue v-text

v-text: The InnerText property of the element must be double tagged with {{ }}The effect is the same and less use
Note: v-text can only be used in double tags

v-html:

innerHTML of element
v-html is actually to assign values to the innerHTML of the element

v-on

In fact, the following v-on is not only a click event but also other events, and the usage is similar. For example: v-on:click/mouseout/mouseover/mousedown…

The following click is an example

Note: All v-ons can be abbreviated as @, for example, v-click can be abbreviated as @click

You can listen for DOM events with the v-on directive and run some JavaScript code when triggered. Generally speaking, it is to listen to dom trigger some operations. The actions (js) executed after these operations (such as clicks) can be directly written in the back.

v-on:click="item+=1"

v-if

v-if: determine whether to insert this element, which is equivalent to destroying and creating elements

v-for

v-for usage v-fo="(item,index) in data" index index item index data

1. Iterate over ordinary arrays
Define a normal array in data

data:{
      list:[1,2,3,4,5,6]
}

&lt;p v-for="(item,i) in list"&gt;--Index value--{{i}}   --Each item--{{item}}&lt;/p&gt;

2. Iterate over an array of objects
Define an array of objects in data

data:{
      list:[1,2,3,4,5,6],
      listObj:[
        {id:1, name:'zs1'},
        {id:2, name:'zs2'},
        {id:3, name:'zs3'},
      ]
}
//Render using v-for directive in html&lt;p v-for "(uesr,i) in listObj"&gt; 
// id --{{}}---name--&gt;{{}}

v-model

Availablev-modelDirectives perform bidirectional data binding on (there are many types of tags, such as button, select, etc.) and elements.
v-modelAll form elements are ignoredvalue、checked 、 selectedThe initial value of the attribute and always takes the data of the Vue instance as the data source. You should declare the initial value in the component's data option via JavaScript:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="/npm/[email protected]/dist/"></script>
    <title>vue</title>
</head>
<body>
    <div >
        <input v-model="message">
        <p>The input value is : {{message}}</p>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Word!'
            }
        })
    </script>
</body>
</html>

v-bind

Used to dynamically update the attributes of elements on html, such as id class, href, src, etc.
Abbreviation: v-bind:href Abbreviation:href

<a :href="{{url}}">aa</a>

Here are some code demonstrations about v-bindv-bind。

    <style>
        .active{
            border: 1px solid red;
        }
    </style>
   
 <div >
      <img v-bind:src="imgSrc" alt="">  
      <br>
      <img :src="imgSrc" alt="" :title="imgTitle+'!!!'" :class="isActive?'active':''" @click="toggleActive">
      <br>
      <img :src="imgSrc" alt="" :title="imgTitle+'!!!'" :class="{active:isActive}" @click="toggleActive">
 </div>

        var app = new Vue({
            el:"#app",
            data:{
                imgSrc:"/images/",
                imgTitle:"Voldemort",
                isActive:false
            },
            methods: {
                toggleActive:function(){
                     = !;
                }
            },
        })

v-show

Hide element If you are sure to hide it, display:none will be added to the element's style. It is a switching based on css style

The difference between v-bind and v-model

There are some situations where we need to use v-bind and v-model:

<input :value="name" v-model="body">

And, who will follow who will change? Will they even conflict?
In fact, their relationship is the same as the above explanation.v-bindThe effect produced does not contain two-way binding, so:valueThe effect is to makeinputofvalueThe attribute value is equal tovalue, andv-modelThe effect is to makeinputandEstablish two-way binding, so firstThe value ofinputofvalueAttributes, secondly, wheninputWhen the value entered in changes,Will change as well.
The following two sentences mentioned above are equivalent:

<input v-model="message">
<input v-bind:value="message" v-on:input="message = $" />

This is the article about the summary of v-instruction usage in Vue. For more related content on v-instruction usage in Vue, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!