2018-09-11 vue第一課(.hello vue,v-forループ操作,.配列オブジェクト,v-forで作成した表,data作用)

2315 ワード
vueの命令
ユーザーインタフェースを構築するための漸進的なフレームワークのセットは、下から上へ階層的に適用されます.新Vue({})はvueインスタンスであり、カンマで区切られている
1.hello vue! 

    {{ message }}





 var app = new Vue({
            el: '#app',  //el element（   ）   ，        。
            data: {    //data      ，         ，             。
                                                                                                     
                message: 'Hello Vue!'
            }
        })

   hello vue！
 
 
2.v-for    
 
 
arr     ；obj     

                         ，       ；
                           ，        。

    
        
  • {{arr1}}
    • 
        
  • {{obj1}}
    • 
    


 var app = new Vue({
            el:'#app',
            data:{
                arr:[1,2,3],//  
                //  
                obj:{name:'jack',age:148}
            },
        })

   
0=>1
1=>2
2=>3
name=>jack
age=>148

  
3.  オブジェクト



    
    
        // ：js      。
        
  • {{value.name}}{{value.price}}
    • 
    





   
 var app = new Vue({
            el:'#app',
            data:{
                arr:[{
                    name:"  ",
                    price:3
                }]
            }
        })
    
                                                                   `

  
4.v-forで  した 

    //value     ，index    ，arr   ，    arr     
        

    

          
          
          
    

    

            {{index+1}}
            {{value.name}}
            {{value.price}}
        

    




  //    vue
    
        var app = new Vue({
            el:'#app',  

// data  1，    ；2，      ；3，     

            data:{
                arr:[{
                    name:"  ",
                    price:3
                }]
            }
        })
    
···
vueプラグインの追加