vue学习回顾第一天

为什么要学习vue

为什么学习vue.png

什么是mvvm

MVVM.png

vue常用系统指令

vue的使用

    
    
    
    



{{message}}

插值表达式

    
    
    



    
    
表达式
    
{{name+"xin"}}
    
{{age+3}}
    
{{name.split('').reverse().join('')}}
    
三元运算符
    
{{age>18?"已成年":"未成年"}}

v-text

v-html

v-bind

    
    
    
    



    
    
    
    

    删除
    
    
测试属性绑定
    
    
红色字体

v-for

    
    
    




    
{{people.name}}-{{people.age}}
    
{{item.name}}:{{item.age}}--{{index}}
    
{{value}}
    
{{value}}:{{key}}--{{index}}

v-model

    
    
    
    
你输入的内容是：{{name}}

v-on

    
yourname:{{name}}
    点击改变姓名
    
    简写改变
    传参改变
    事件
    
    跳转
    
    
    

v-if和v-show

    
v-if
    
aaa
    
v-show
    
bbb
    显示/隐藏

    
已成年
    
少年
    
儿童

v-cloak

    
    
    
    



    
    
    
{{msg}}

案例

    
    
    
    



    

        编号:
         品牌名称:
        
        
    

    

        品牌名称:
        
    

    

        

            

                
编号
                
品牌名称
                
创立时间
                
操作
            
            

                
{{item.id}}
                
{{item.name}}
                
{{item.ctime}}
                

                    
                    删除
                
            
            

                
没有品牌数据