Instruction is to drive DOM behavior with data and simplify DOM operation. Common instructions are as follows

• v-text innertext, cannot parse html tags in text

• v-html innerhtml, which can parse HTML tags in text

• v-show controls the display and hiding of elements

• v-if, v-else-if, v-else meet the conditions to display the corresponding elements

• v-for traversing arrays and objects

• v-bind one-way data binding
• v-model bidirectional data binding
• v-on event binding

 

 

demo   v-text,v-html,v-show

    <div id="div1"></div> 
    <div id="div2"></div> 
    <div id="div3"></div> 

    <script>
        
        new Vue({
            el:'#div1',
            template:'<p v-text="info"></p>',  //Amount to'<p>{{info}}</p>'
            data:function(){
                return{
                    info:"are you ok?"  //If it contains html Label, not parsed, output directly as text
                }
            }
        });
        
        new Vue({
            el:'#div2',
            template:'<p v-html="info"></p>',
            data:function(){
                return{
                    info:"<h3>are you ok?</h3>"  //It's going to be resolved html Label
                }
            }
        });
        
        new Vue({
            el:'#div3',
            template:'<p v-show="display">are you ok?</p>',  //Specify a variable whose name does not have to be display，Anything is OK? display Not referring to css Attribute name
            data:function(){
                return{
                    display:true  //boolean Value, true-Show that false-Don't show (hide), no more space
                }
            }
        });
        
    </script>

 

 

 

Condition judgment of demo v-if series

    <div id="app">
        <p v-if="score>80">excellent</p>
        <p v-else-if="score>60">pass</p>
        <p v-else>Fail,</p>
    </div> 

    <script>
        new Vue({
            el:'#app',
            data:function(){
                return{
                    score:85
                }
            }
        });
    </script>

The element for is displayed only if the condition is met.

In new Vue(), template and data are optional.

 

 

 

Template template is the template of content. Content (including instructions) can be written in elements or templates

    <div id="app1">Full name:{{name}}</div>  <!--Write directly in the element-->
    <div id="app2"></div>
    
    <script>
        new Vue({
            el:'#app1',
            data:function(){
                return{   
                    name:'chy'
                }
            }
        });
        
        new Vue({
            el:'#app2',
            template:'<p>Full name:{{name}}</p>',  //Written in template in
            data:function(){
                return{
                    name:'chy'
                }
            }
        });
        
    </script>

The effect is the same.

return {} returns an object.

 

 

 

Two ways to write data

    data:function(){  //Point to anonymous function
        return {
            content:20
        }  
    },
    
    data(){ //Directly as function name
        return {
            content:20
        } 
    },

The effect is the same.

 

 

 

demo v-for traverses arrays and objects

　　 <ul id="app1">
        <li v-for="(item,index) in array">The first{{index}}Item:{{item}}</li>   <!-- index Start at 0. One element fills one li -->
    </ul>
    
    <ul id="app2">
        <li v-for="(key,value) in object">{{key}}: {{value}}</li>   <!-- item,index,array,key,value,object All variables can be specified by themselves, not fixed -->
    </ul>


    <script>
        new Vue({
            el:'#app1',
            data:function(){
                return{
                    array:["Mobile phone","Flat","Computer"]  //array
                }
            }
        });
        
        new Vue({
            el:'#app2',
            data:function(){
                return{
                    object:{name:'chy',age:20}   //object
                }
            }
        });
        
    </script>

 

 

 

demo v-bind, v-model single and two-way data binding

　　<div id="app1"></div>
    <div id="app2"></div>
    
    
    <script>
        
        new Vue({
            el:'#app1',
            //One way binding, value If you specify a variable name, the change of the variable value in memory will be synchronized to the view, but the change of the value in the view will not affect|Variables synchronized to memory
            //If other properties want to use this variable value, the property name is preceded by a colon, such as the class="chy"
            template:'<div><input v-bind:value="name" :class="name" /> The value is{{name}}</div>',  
            data:function(){
                return{
                    name:'chy'  //Variable values in memory
                }
            }
        });
        
        new Vue({
            el:'#app2',
            //Bi directional binding, the change of variable value in memory will be synchronized to the view, and the change of value in the view will also be synchronized to the internal initial variable
            template:'<div><input v-model:value="age" :class="age" /> The value is{{age}}</div>',
            data:function(){
                return{
                    age:20
                }
            }
        });
        
    </script>

You can bind with v-bind|model:value = "variable name" or v-bind|model = "variable name". The latter is simpler.

When v-bind|model is bound with < input / > value, it is bound with < input / > value.

 

 

 

demo v-on event binding

　　<div id="app1"></div>
    <div id="app2"></div>
    
    <script>
        
        new Vue({
            el:'#app1',
            //You can modify variables in memory, but not directly alert(),console.log()Something like that
            template:'<button v-on:click="content=\'click me\'">{{content}}</button>',  
            data:function(){
                return{
                    content:'btn1'
                }
            }
        });
        
        new Vue({
            el:'#app2',
            // You can also call a method, which statement to execute needs to be placed in the method. Specify method name
            template:'<button v-on:click="showInfo">{{content}}</button>',  
            data:function(){
                return{
                    content:'btn2'
                }
            },
            methods:{
                showInfo:function(){  //Write method name before colon
                    alert("you clicked btn2");
                }
                // Multiple methods can be written, comma separated
            }
        });
        
    </script>

 

 

 

There are many things to write in template

    <div id="app"></div>
    
    <script>
        
        new Vue({
            el:'#app',
            template:'<div><h3>this is a title</h3><p>this is first paragraph</p><p>this is second paragraph</p></div>',  
            data:function(){
                return{
                    content:'btn1'
                }
            }
        });
        
    </script>