VueのVUE-リソース要求データモードペット、ポスト、JSONPの3種類

<！DOCTYPE HTML > 
< HTML LANG = "EN" > 

< 頭> 
  < メタ文字コード= "UTF-8" > 
  < メタ名= "ビューポート" コンテンツ= "幅=装置幅、初期の規模= 1.0" > 
  < メタHTTP -equiv = "X-UA-互換性のある" コンテンツ= "IE =エッジ" > 
  < タイトル>ドキュメント</ タイトル> 
  < スクリプトSRC = "./ libに/ VUE-2.4.0.js" > <
  注：順序は留意する必要があるので、Vueの上VUEリソース依存   - > 
  <！ - このhttp.jsonp $。- > 
  < スクリプトSRC = "./ libに/ VUE資源-1.3.4.js" > </ スクリプト> 
</ ヘッド> 

< 身体> 
  < DIV ID = "アプリケーション" > 
    < INPUTのタイプ= "ボタン" 値= "GETリクエスト" @click = "GETINFO" > 
    < INPUTのタイプ= "ボタン" 値=「POST要求" @click =" postinfo " >
    < 入力タイプ=「ボタン」値= "要求JSONP" @click = "jsonpInfo" > 
  </ divの> 

  < スクリプト> 
    // 与えることを、Vueのインスタンスを作成しますViewModelに
    VAR VM =  新しい新しいヴュー（{ 
      EL：' #app ' 、
      データ：{}、
      メソッド：{ 
        GETINFO（）{ 
          // 開始するには、要求が取得
          //   .then成功したコールバック関数を設定し、開始後の要求を取得し
          、この。http.get $（' http://jsonplaceholder.typicode.com/users ' （）.then結果=> {
             // result.bodyを介して取得するためにサーバによって返された成功したデータ
            console.log（' これは、GET要求のデータである：' ）
            はconsole.log（result.body）
          }）
        }、

        postinfo（）{ 
          // POSTリクエストのhttp://jsonplaceholder.typicode.com/usersを開始するには、
          //   手動で開始しますポストは、デフォルトのフォーマットサーバは、いくつかの処理できないので、形成されませ要請
          //   、{emulateJSON：真}三番目のパラメータPOSTメソッドコンテンツタイプは、共通のデータ形式が形成提出し
          、これを。http.post $（" http://jsonplaceholder.typicode.com/users '{}、{emulateJSON： 真へ}。）、次いで（結果=> { 
            にconsole.log（' これはポストデータ要求である：'）
            console.log（result.body）
          }）
        }、

        jsonpInfo（）{ // JSONPを開始リクエスト
          この。http.jsonp $（' http://jsonplaceholder.typicode.com/users ' ）.then（結果=> { 
            コンソール.logの（' 要求されたデータJSONP：' ）
            はconsole.log（result.body）
          }）
        } 
      } 
    }）; 
  </ スクリプト> 
</ ボディ> 

</ HTML >
データが返されました：
VueのVUE-リソース要求データモードペット、ポスト、JSONPの3種類

おすすめ
