vue.js axios構成ajaxリクエストデータ用

*npmでaxiosをインストール
プロジェクトのルートディレクトリに切り替え

npm install --save axios vue-axios

*vueのエントリファイル./src/main.jsにaxiosを導入し、2行のコードを追加

// axios
import axios from 'axios'
Vue.prototype.$http = axios

 ./src/main.jsエントリファイルは次のとおりです.

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
// axios
import axios from 'axios'
Vue.prototype.$http = axios

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: ''
})

*データファイルを生成します./assets/data/people.json

{"people":[{"id":1,"name":"Jack","age":30,"gender":"Male"},{"id":2,"name":"Bill","age":26,"gender":"Male"},{"id":3,"name":"Tracy","age":22,"gender":"Female"},{"id":4,"name":"Chris","age":36,"gender":"Male"}]}

コンポーネントに直接アクセスできない理由.../assets/data/people.json? 
*php生成データ(ドメイン間CORSが必要)

 people.json
 */
header('Content-Type:text/json; charset=utf-8');

header('Access-Control-Allow-Origin:*');
header('Access-Control-Allow-Methods:GET');
header('Access-Control-Allow-Headers:x-requested-with,content-type');

$data = new \StdClass();
$data->people = [
    [
        "id" => 1,
        "name" => "Jack",
        "age" => 30,
        "gender" => "Male"
    ],
    [
        "id" => 2,
        "name" => "Bill",
        "age" => 26,
        "gender" => "Male"
    ],
    [
        "id" => 3,
        "name" => "Tracy",
        "age" => 22,
        "gender" => "Female"
    ],
    [
        "id" => 4,
        "name" => "Chris",
        "age" => 36,
        "gender" => "Male"
    ],
    [
        "id" => 5,
        "name" => "guanmengying",
        "age" => 29,
        "gender" => "Female"
    ]
];
echo json_encode($data, true);

*phpインタフェースの起動

php -S 0.0.0.0:8081

*このインタフェースをテストするとブラウザでアクセスできますhttp://localhost:8081/person.php
またはコマンドラインcurlhttp://localhost:8081/people.php
出力:
{"people":[{"id":1,"name":"Jack","age":30,"gender":"Male"},{"id":2,"name":"Bill","age":26,"gender":"Male"},{"id":3,"name":"Tracy","age":22,"gender":"Female"},{"id":4,"name":"Chris","age":36,"gender":"Male"},{"id":5,"name":"guanmengying","age":29,"gender":"Female"}]}
*ルーティングファイル./src/router/index.js
デフォルトのHelloWorldに従ってひょうたんを描けばいい

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import person from '@/components/person'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/person',
      name: 'person',
      component: person
    }
  ]
})

*テンプレートファイル./src/components/person.vue

export default {
  name: "person",
  created: function() {
    var v = this;
    v.$http
      .get("http://localhost:8081/people.php")
      .then(function(resp) {
        v.people = resp.data.people;
      })
      .catch(function(error) {
        document.write(error.toString());
      });
  },
  data() {
    return {
      newPerson: {
        name: "",
        age: 0,
        gender: "Male"
      },
      people: []
    };
  },
  methods: {
    createPerson: function() {
      this.people.push(this.newPerson);
      //    newPerson   ，  newPerson  
      this.newPerson = { name: "", age: 0, gender: "Male" };
    },
    deletePerson: function(id) {
      // find index
      var index, person;
      person = this.people.find(function(person, idx) {
        var matchID = person.id === id;
        if (matchID) {
          index = idx;
        }
        return matchID;
      });
      //        
      this.people.splice(index, 1);
    }
  }
};

主な変更:

  created: function() {
    var v = this;    // vue instance
    v.$http
      .get("http://localhost:8081/people.php")  // xhr
      .then(function(resp) {
        v.people = resp.data.people;  // bind data
      })
      .catch(function(error) {
        document.write(error.toString());
      });
  },
  data() {
    return {
      // ...
      people: []  // empty array. null can cause template compiling error
    };
  },

 
*ブラウザアクセスhttp://localhost:8080/#/person

csdnブログにemojiを挿入すると、後のコンテンツが失効し、再編集されます.
https://emojipedia.org/smiling-face-with-sunglasses/だからemojiは使わないで