ホームページ > ウェブフロントエンド > jsチュートリアル > vue.js がデータベース データを取得する方法に関するコード共有

vue.js がデータベース データを取得する方法に関するコード共有

黄舟
リリース: 2017-05-26 10:03:46
オリジナル
2636 人が閲覧しました

この記事では、vue.jsでデータベースのデータを取得するサンプルコードを中心に紹介します。エディターに従って見てみましょう

vue.js はデータベース データを動的に取得します

(vue.cli と webpack によって構築された環境)

1. まず、

staticdata.json ファイルを作成します。 static の下の json フォルダー (Webpack 環境では、静的ファイルは static ディレクトリに配置されます)

{
  "data":[
    {"id":1,"name": "yidong", "age": "11" },
    {"id":2,"name": "yidong2", "age": "12" },
    {"id":3,"name": "yidong3", "age": "13" },
    {"id":4,"name": "yidong4", "age": "14" },
    {"id":5,"name": "yidong5", "age": "15" },
    {"id":6,"name": "yidong6", "age": "16" },
    {"id":7,"name": "yidong7", "age": "17" }
  ]
}
ログイン後にコピー

1. プロジェクトにインストールされている vue-

resource を使用する必要があります:

nam install vue-ressource --save-dev
ログイン後にコピー
2. vie-resource
import VueResource from 'vue-resource';
Vue.use(VueResource)
ログイン後にコピー

in

main.js3. コードは Home.vue コンポーネントの下に記述されています:

このようにして、vue.js を使用してバックグラウンド Data から取得したデータ json を取得できます。

以上がvue.js がデータベース データを取得する方法に関するコード共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート