Home Web Front-end JS Tutorial Example code for obtaining database data with vue.js

Example code for obtaining database data with vue.js

May 28, 2017 am 10:46 AM

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 'vue-resource';
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:{
      '$route':'fetchData'
    },
    methods:{
      fetchData(){              this.$http.get('./../../static/json/data.json').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!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot Article Tags

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Practical combat: Develop a plug-in in vscode that supports vue files to jump to definitions Practical combat: Develop a plug-in in vscode that supports vue files to jump to definitions Nov 16, 2022 pm 08:43 PM

Practical combat: Develop a plug-in in vscode that supports vue files to jump to definitions

Use vue-cropper to crop images in the vue project Use vue-cropper to crop images in the vue project Oct 31, 2022 pm 07:16 PM

Use vue-cropper to crop images in the vue project

Detailed graphic explanation of how to integrate the Ace code editor in a Vue project Detailed graphic explanation of how to integrate the Ace code editor in a Vue project Apr 24, 2023 am 10:52 AM

Detailed graphic explanation of how to integrate the Ace code editor in a Vue project

Explore how to write unit tests in Vue3 Explore how to write unit tests in Vue3 Apr 25, 2023 pm 07:41 PM

Explore how to write unit tests in Vue3

Let's talk in depth about reactive() in vue3 Let's talk in depth about reactive() in vue3 Jan 06, 2023 pm 09:21 PM

Let's talk in depth about reactive() in vue3

In-depth discussion of how vite parses .env files In-depth discussion of how vite parses .env files Jan 24, 2023 am 05:30 AM

In-depth discussion of how vite parses .env files

A brief analysis of how to handle exceptions in Vue3 dynamic components A brief analysis of how to handle exceptions in Vue3 dynamic components Dec 02, 2022 pm 09:11 PM

A brief analysis of how to handle exceptions in Vue3 dynamic components

What is the difference between componentization and modularization in vue What is the difference between componentization and modularization in vue Dec 15, 2022 pm 12:54 PM

What is the difference between componentization and modularization in vue

See all articles