VueJS方法

2019独角兽企业重金招聘Python工程师标准>>>

 1、Vue.js
    
        vue.js是一个提供数据双向绑定的js框架，通过使用vueJS，可以实现DOM数据和数据绑定实时更新。
        vue.js以数据驱动和组件化思想构建。

         相比AngularJS，VueJS的语法更加简洁。

  2、Vue绑定数据

    
        

            //message为和绑定的数据，用{{}}括起
            {{message}}
        
        点击更换
        
        
        
    

3、Vue绑定表单元素
 

    
{{message}}
    

4、常用vue指令
    
        (1)、v-if

            

    

        
呀呀呀呀呀
        
哇哇哇哇哇
        
哦哦哦哦哦
        
咦咦咦咦咦
    

    
    
    

        (2)、v-show
    

    

        
1
        
2
        
3
        
4
    

    
    
    

        (3)、v-else
    

    
    

        
00000001
        
此时为true，00000002
        
此时为false，00000003
        
此时num<=30，00000004
        
此时num>30，00000005
    

    
    
    

        (4)、v-for
    

    
    
    


    

        

            

                

                    
name
                    
age
                    
gender
                
            
            

                

                    
{{key.name}}
                    
{{key.age}}
                    
{{key.gender}}
                
            
        
    

        (5)、v-bind
    

    
    
    


    

        

            

                {{ n  }}
            
        
    
    
    

        (6)、v-on

    tips：v-if和v-show的区别在于，
            v-if中的判断条件不成立的时候，页面中不会出现该元素，即该元素不在DOM中出现，
            而v-show中的判断条件无论是否成立，其页面中都会出现该元素，判断条件只控制该元素的display属性，判断条件为false则display：none；

           v-else则是if和show的一个互补，当if或show不成立，else的元素显示出来；

           v-for一般用来生成多个元素，将一组数据循环生成到页面；

           v-bind一般用来给元素绑定class属性，可以加判断条件；

           v-on用来给元素添加事件；

tips：v-on和v-bind可以进行缩写

{{ n  }}

                                                                             

转载于:https://my.oschina.net/LinearLawX/blog/858379