Example code for obtaining database data with vue.js-JS Tutorial-php.cn

Example code for obtaining database data with vue.js

黄舟

Release： 2017-05-28 10:46:39

Original

2735 people have browsed it

This article mainly introduces the vue.js example code for obtaining database data. The editor thinks it is quite good. Now I will share it with you and give it as a reference. Let’s follow the editor to take a look

vue.js dynamically obtains database data

(Environment built through vue.cli and webpack)

1. First of all, let me Create a static data.json file and create a json folder under static (in a webpack environment, static files are placed in the static directory)

{
  "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" }
  ]
}

Copy after login

1. You need to use vue-resource here, install in our project:

nam install vue-ressource --save-dev

Copy after login

2. In main# Reference in ##.jsvie-resource

import VueResource from &#39;vue-resource&#39;;
Vue.use(VueResource)

Copy after login

3. The code is written under the Home.vue component:

export default{
    data(){
      return {        
        user:null,
      }
    },
    created () {
      this.fetchData()
    },
    watch:{
      &#39;$route&#39;:&#39;fetchData&#39;
    },
    methods:{
      fetchData(){              this.$http.get(&#39;./../../static/json/data.json&#39;).then((response)=>{  
          console.log(response.data.data);
        })
      }
    }
  }

Copy after login

So we can use vue.js to get it The data obtained from the background is json data.

The above is the detailed content of Example code for obtaining database data with vue.js. For more information, please follow other related articles on the PHP Chinese website!