webstorm创建vue

1.在webstorm中创建工程

    
    
    



    {{msg}}

2. vue指令

2.1 v-text 和v-html

设置标签的文本值(textContent)

    
    
    



    {{msg}}
    

    

2.2 v-on基础

为元素绑定事件

    
    
    



    {{msg}}
    

    点击
    
    点击2
    

2.3 v-show 和v-if

根据表达值的真假,切换元素的显示和隐藏

    
    
    



    
    
    
    点击

2.4 v-bind

设置元素的属性

    
    
    
    



    
    
    
    
    点击

2.5 v-for

循环数据

    
    
    



    

        
        

            {{item}}--->{{index}}
        
    

    

        

            
姓名
            
年龄
            
性别
            
操作
        
        

            
{{item.name}}
            
{{item.age}}
            
{{item.sex}}
            

                删除
                编辑
            
        
    

    

2.6 v-model

获取和设置表单元素的值. input select textarea

    
    
    




    
    {{name}}
    点击

3. vue结合axios以及后台代码

    
    
    
    
    
    




    

        

        

            
            
                搜 索
            
        

    
    

        

            
ID
            
姓名
            
年龄
            
班级ID
        
        

            
{{item.id}}
            
{{item.name}}
            
{{item.age}}
            
{{item.cid}}