vue基础代码小案例第一章

1.vue版的Hello world

 


    
    
    
    



    

        
        
{{msg}}
        
{{msg}}
        
{{msg}}
        
{{msg}}
        
{{msg}}
        
{{msg}}
    
    

2.插值的表达式的使用

    
        
        
        
        
    
    
    


        
{{name}} 
        
{{age}}

        
        
表达式
        
{{'路易斯'+name}}
        
{{age+4}}
        
{{name.split('').reverse().join('')}}

        
三元运算符
        
{{age}}{{age>=18?"已成年":"未成年"}}
    
    

3.v-text指令

4.v-html指令

5.v-bind 指令

 



 

 

 
      

      {{name}}

      
      

      
      

      删除

      
      
测试属性绑定

      
      
红色字体
    
    
 

6.v-for指令

 



  

  
v-for="item in arr"
  
{{item.name}}:{{item.age}}

  
v-for="(item, index) in arr"
  
{{item.name}}:{{item.age}}索引：{{index}}

  
v-for="value in obj"
  
{{value}}

  
v-for="(value, key, index) in obj"
  
{{key}}:{{value}} -- {{index}}

7.v-model指令

8.v-on指令

 

 

  
{{name}}
  
  点击改变
  简写
  传参
  事件对象
  跳转
  
  

9.v-if和v-show指令介绍

 



  
  
  
v-if
  
aaaa
  
v-show
  
bbbb

10.v-if指令

 



  

    A
  
  

    B
  
  

    C
  
  

    Not A/B/C
  

11.v-cloak指令

 




  
  
  
{{msg}}

12.列表展示删除添加

  
  
  
   
  




    

    编号:
     品牌名称:
    
    
    


  品牌名称:
  



      

        

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

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

            
            删除
          
        
        

          
没有品牌数据