Ajaxするにあたって必要な知識 ＆ axiosについて
Webサービスを作るといっても、何がどういうふうに動いているかを把握する必要があります。
以下は、TODOリストを例に、Webアプリがどういう感じに動くのかを雑に説明します。
１．まず空のTODOリストがブラウザに表示されます。
２．ブラウザからAPIサーバに「GETリクエスト」を送信し、TODO一覧をJSON形式で受け取ります
３．受け取ったJSONをVue.jsのdataに突っ込むと、TODOリストがレンダリングされます。
さて、下記の疑問が出てくると思います。
「APIサーバ」って何者なのか？
JSONって何？
GETリクエストって何？
どうやってやり取りすればいいの？（Vue.jsにその機能は組み込まれていない）
順に雑に説明します。
APIサーバとは
こういうやつです。
HTTPリクエストとは、雑にいうと、どういうデータがほしいか（あるいはデータに対してどういう操作がしたいか）書いてある申請書みたいなものです。
詳しくは下記記事などを参考にしてください。
APIサーバは自前で書くこともできます（というか、仕事上はたいてい書きます）。
GETを受け付けてTODOを３つJSONで返すサーバは、Node.jsとExpressだと下記のような感じで書けます。
server.jsvar express = require('express');
var app = express();
app.get('/', function (req, res) {
res.json(["タスク１", "タスク２", "タスク３"]);
});
app.listen(3000, function () {
console.log('ポート3000でAPIサーバを起動しました');
});現状、res.jsonは固定値を返していますが、実用的なアプリだとここでデータベースにアクセスして、TODO一覧をテーブルから取得することになるでしょう。
JSONって何
下記のページを参照
どうやってやり取りすればいいの？
残念ながら、HTTPリクエストの送信は、Vue.jsの機能には組み込まれていません。
外部ライブラリを使うか、fetchという新しい仕様を使うことになりますが、現時点ではaxiosをおすすめします。
利用方法については下記サイトを参考にしてください。
注意点として、axiosはIE11では動作しない(Promiseという仕様がIE11に入っていないため)ので、下記のライブラリをaxios利用前に入れておく必要があります。