vue-フォーム操作-ループ操作

フレーム：mvvmデータ
mvc思想
アングラー---大pc端を使ってください。
vue：コンパクトで使いやすいモバイル端末
vue互換性：IE 9+chrome FF
公式サイト:http://cn.vuejs.org/
マニュアル:http://cn.vuejs.org/v2/api/
—————————————————————————————————————————Vue使用プロセス：
1.vue.jsファイルの導入

new Vue({
                el:'#box',
                data:{
                    myData:'hello Vue'
                }
            });

            {{myData}}
        

フォーム要素:データ双方向バインディング

        
{{d}}
          *        
        
{{*d}}
    ：
    {{d}}->           
    {{*d}}->    ，      
    {{d+'a'}}      
    {{d.split(' ')}}      
    {{}}         

操作arr、Json

    v-for="val in    "
    {{val}}  {{$index}}
    v-for="(key,value) in    "
    {{key}}  {{value}}  {{$index}}
             ：
        track-by="$index"

操作arr

window.onload=function(){

new Vue({

el:'#box',

            data:{

              fruit:['  ','  ','  ','  ']

                  }

          });

};







{{fruit}}

操作Json:

window.onload=function(){

new Vue({

el:'#box',

data:{

      myFruit:{

      a:'  ',

      b:'  ',

      c:'  ',

      d:'  '

}

}

});

};








       


          {{value}} {{key}}

       

イベント：v-on：click=「add()」@click=「add()」イベントの略式イベント例：

window.onload=function(){

new Vue({

el:'#box',

data:{

fruit:['  ','  ','  ','  ']

},
//     
methods:{

add:function(){

this.fruit.push('  ');

}

}

});

};











{{val}} {{$index}}





{{fruit}}

———————————————————————————総合例（簡易掲示板）

window.onload=function(){

    new Vue({

          el:'#box',

          data:{

                  list:[]//       ，   

          },

          methods:{

                              add:function(){

                              this.list.unshift(this.content);//     

                           },

                            remove:function(index){//  

                            this.list.splice(index,1);

                               }

                        }

              });

};







                ：

                

                

              


                        


                                {{val}}

                          

                      

             

テンプレート：{d}{d}{d}{{d}//表示ラベル

window.onload=function(){

            new Vue({

                              el:'.box',

                              data:{

                                        d:'<h1>  </h1>'

                                    }

                          });

};







              

              

                  
{{d}}

                      {{{d}}}