vue ajaxデータ充填リストを取得し、追加、削除します。

  
  
  
  
  
  
  



  




    

      

        
    
      
      


        
          Name:
          
        

        
      
    



    

      

        

          
Id
          
Name
          
Ctime
          
Operation
        
      
      

        

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

              
          
        
      
    


  

  
    //            ，           ，  ，        http      ，    url   ，         ，      /  ，             ；
    Vue.http.options.root = 'http://vue.studyit.io/';
    //      emulateJSON   
    Vue.http.options.emulateJSON = true;

    //    Vue   ，   ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        name: '',
        list: [ //            
        ]
      },
      created() { //   vm      data   methods       ，vm       created         
        this.getAllList()
      },
      methods: {
        getAllList() { //           
          //   ：
          // 1.         Vue-resource   ，   ，        this.$http        
          // 2.     API  ，  ，       ，       get   
          // 3. this.$http.get('url').then(function(result){})
          // 4.     then         ，      ，             result
          // 5.     result.status     0，    0，    ，     result.message     this.list ;      0，      ，      ！

          this.$http.get('api/getprodlist').then(result => {
            //   ：    $http       ，   result.body    
            var result = result.body
            if (result.status === 0) {
              //    
              this.list = result.message
            } else {
              //    
              alert('      ！')
            }
          })
        },
        add() {  //             
          //   ：
          // 1.        API  ，  ，      Post   ，  this.$http.post
          // 2. this.$http.post()        ：
          //   2.1      ：     URL  
          //   2.2      ：            ，             { name: this.name }
          //   3.3      ：        ，              ， { emulateJSON: true },        ，          application/x-www-form-urlencoded
          // 3.   post    ，   .then           ，           ，   result.body

          /* this.$http.post('api/addproduct', { name: this.name }, { emulateJSON: true }).then(result => {
            if (result.body.status === 0) {
              //    ！
              //      ，     ，      getAllList          
              this.getAllList()
              //    name 
              this.name = ''
            } else {
              //    
              alert('    ！')
            }
          }) */

          this.$http.post('api/addproduct', { name: this.name }).then(result => {
            if (result.body.status === 0) {
              //    ！
              //      ，     ，      getAllList          
              this.getAllList()
              //    name 
              this.name = ''
            } else {
              //    
              alert('    ！')
            }
          })
        },
        del(id) { //     
          this.$http.get('api/delproduct/' + id).then(result => {
            if (result.body.status === 0) {
              //     
              this.getAllList()
            } else {
              alert('    ！')
            }
          })
        }
      }
    });
  

 
完全な原文:http://blog.maptoface.com/post/114