Vue.js Instruction Summary

1.vue.js instructions are as follows

V-text, v-html, V-show, V-if, V-else, V-else-if, V-for, v-on, V-bind, V-model,

V-pre, V-cloak, v-once

2. One by one parsing

V-text: Updates the textcontent of the element. If you want to update part of the textcontent, you need to use {{mustache}} interpolation.

The demo is as follows:

<div id= "App" >
      <span v-text= "MSG" ></span>
      <span>{{msg}}</span>
</div>

<script src= "Js/vue.js" ></script>
<script>
    New Vue ({
        El: ' #app ',
        data:{
            msg: ' Hello World '
        }
    })
</script>

3.v-html: Updates the InnerHTML of the element.

<div v-html= "html" id= "app" ></div>

 <SCRIPT>  
  new Vue ({ 
 Span style= "font-size:15px" > el: ' #app ',  
  data:{ 
  html: ' Hello World '  
 }  
  
 </SCRIPT>  
 4.v-show: Toggles the   of an element based on the true or false value of an expression;  display   css property. The directive triggers a transition effect when the condition changes. 

 <div id= "app";  
   
  
 
  
 
  
 
  
 
 </DIV>  

<script>
    var vm = new Vue ({
        El: ' #app ',
        data:{
            Yes:true,
            No:false,
            Age:28,
            Name: ' Jack '
        }
    })
</script>

5.v-if: Renders an element based on the true or false condition of the value of the expression. The element and its data bindings/components are destroyed and rebuilt at the time of the switchover. If the element is <template> , it will be presented with its contents as a conditional block.

The directive triggers a transition effect when the condition changes.

 <div id= "app";  
   
  
 
  
 
  
 
  
 
 </DIV>  

 <SCRIPT>  
  var vm = new Vue ({  
  el: ' #app ',  
  data:{ Br> Yes:true,  
  No:false, 
  age:28,  
  name: ' Jack '  
 }  
 })  
 </SCRIPT>  
 
 6.v-else:  the previous sibling element must have    V-if    or    v-else-if . 

 <div id= "app";  
   
  
 
 Span style= "font-size:15px" > 
  
 
  
 
 </DIV>  

 <SCRIPT>  
 
  var vm = new Vue ({
     
  el: ' #app ',  
  data: { Br> Yes:true,  
  No:false, 
  age:28,  
  name: ' Jane '  
 }  
 })  
 </SCRIPT>  
 7.v-else-if: Used as    v-if    for    else-if    block. Can be used more than once in a chained type: 
  

<div id= "App" >
   <div v-if= "type = = = ' A '" >A</div>
   <div v-else-if= "type = = = ' B '" >B</div>
   <div v-else-if= "type = = = ' C '" >C</div>
    <div V-else>not a/b/c</div>
</div>

<script>
    New Vue ({
    El: ' #app ',
        data:{
            Type: ' M '
        }
     })
</script>
Results:

8.v-for: Renders elements or template blocks multiple times based on source data. The value of this directive, you must use a specific syntax to alias in expression provide an alias for the currently traversed element

 <div id= "example03"; 
 <table> 
 <thead> 
 <tr> 
 <th& Gt         Name</th> 
 <th>age</th> 
 <th>sex</th> 
 </tr> 
  </thead> 
 <tbody> 
 <tr v-for= "person in people"; 
 <td>{{  Person.name}}</td> 
 <td>{{person.age}}</td> 
 <td>{{person.sex }}</td> 
 </tr> 
 </tbody> 
 </table> 
 </div> 
 
 
 

<script>
    var vm = new Vue ({
        El: ' #example03 ',
        Data: {
            People: [{
                Name: ' Jack ',
                Age:30,
                Sex: ' Male '
            }, {
                Name: ' Bill ',
                Age:26,
                Sex: ' Male '
            }, {
                Name: ' Tracy ',
                Age:22,
                Sex: ' Female '
            }, {
                Name: ' Chris ',
                AGE:36,
                Sex: ' Male '
            }]
        }
    })
</script>
Results:

9.v-on:

Binds the event listener. The event type is specified by the parameter. The expression can be either the name of a method or an inline statement, which can be omitted if no modifiers are present.

When used on ordinary elements, only native DOM events can be monitored. When used on a custom element component, you can also listen for custom events that are triggered by the child component.

When listening to native DOM events, the method takes an event as a unique parameter. If you use an inline statement, the statement can access a $event property: v-on:click="handle(‘ok‘, $event)" .

 <!---v-on:click= "" Click Property Execution Method methods:{}-->  
 <!--v-bind B-on provides an abbreviated method  
  

 <div id= "app";  
  <p>  
  <input type= "text" v-model= "message";  
  </p>  
  <p>  
  <!--click Time to directly bind a method-->  
  <button v-on:click= "greet" >GREET</BUTTON>  
  </p>  
  <p>  
  <!--click event--> with inline statement;  
  <button v-on:click=" Say (' Hi ') ">HI</BUTTON>  
  </p>  
 </DIV>  

 <SCRIPT>  
  new Vue ({ 
 Span style= "font-size:15px" > el: ' #app ',  
  data:{ 
  message: ' Hello,vue.js '  
 },  
  methods:{ 
  Greet:function () { Br> alert (this.message)  
 }                ,  
  Say:function (msg) { 
         Alert (msg)  
 }  
  }  
  
 </SCRIPT>  

10.v-bind: Dynamically binds one or more attributes, or one component prop to an expression.

class style Other types of values, such as arrays or objects, are supported when binding or attributes. You can view the details by following the tutorial links below.

When binding prop, prop must be declared in the subassembly. You can specify different binding types with modifiers.

When there are no parameters, you can bind to an object that contains a key-value pair. Note at this time class and the style binding does not support arrays and objects.

The following code involves several examples:

<!--the v-bind directive can be preceded by a parameter with a colon separating the middle of the name,
This element is usually an attribute of the HTML element, example:v-bind:class= ""--
<ul class= "box": class= "[ClassA, ClassB]" >
<li> Learning Vue</li>
<li> Learning Node</li>
<li> Learning React</li>
</ul>
<script>
var vm = new Vue ({
El: '. Box ',
data:{
ClassA: ' TextColor ',
ClassB: ' TextSize '
}
})
</script>
<!--first determine the Boolean value of ISA and, if true, render ClassA;
If False, no rendering is rendered. CLASSB does not do three mesh operations, so it is always displayed.
<div v-bind:class= "[ClassA, {CLASSB:ISB, classc:isc}]" >-->
<ul class= "box1": class= "[Isa?classa: ', ClassB]" >
<li> Learning Vue</li>
<li> Learning Node</li>
<li> Learning React</li>
</ul>
<script>
var vm = new Vue ({
El: '. Box1 ',
data:{
ClassA: ' TextColor ',
ClassB: ' TextSize ',
Isa:false
}

})
</script>

<div id= "Box2": style= "{color:activecolor, fontsize:size, Textshadow:shadow}" > Red-billed Green parrot </div>
<script>
var vm = new Vue ({
El: ' #box2 ',
data:{
Activecolor: ' Red ',
Size: ' 20px ',
Shadow: ' 5px 2px 6px Red '
}
})
</script>
<!--array Syntax--
<div class= "Box3": style= "[Styleobjecta, STYLEOBJECTB]" > Study hard, day up </div>
<script>
var vm2 = new Vue ({
El: '. Box3 ',
data:{
styleobjecta:{
FontSize: ' 10px ',
Color: ' Black '
},
styleobjectb:{
TextDecoration: ' None '
}
}
})
</script>
<!--add a picture URL--

<script>
var vm = new Vue ({
El: '. Box4 ',
data:{
URL: ' Img/0.png '
}
})
</script>
<!--style Binding--

<script>
var vm = new Vue ({
El: '. Box5 ',
data:{
width:{
Width: ' 40px '
},
height:{
Height: ' 40px '
},
URL: ' Img/0.png '
}
})
</script>


<!--pagination--

<div id= "box6" >
<ul class= "Pagination" >
<li v-for= "N in PageCount" style= "list-style-type:none;float:left;" >
<a href= "javascript:void (0)" v-bind:class= "activenumber = = = n + 1?
' Active ': ' ">{{n}}</a>

</li>
</ul>
</div>
<script>
New Vue ({
El: ' #box6 ',
data:{
Activenumber:1,
Pagecount:10
}

})
</script>

Vue.js Instruction Summary