Maison > interface Web > js tutoriel > Partage de code sur la façon dont vue.js obtient les données de la base de données

Partage de code sur la façon dont vue.js obtient les données de la base de données

黄舟
Libérer: 2017-05-26 10:03:46
original
2636 Les gens l'ont consulté

Cet article présente principalement l'exemple de code vue.js pour obtenir des données de base de données. L'éditeur pense qu'il est plutôt bon. Maintenant, je vais le partager avec vous et le donner comme référence. Suivons l'éditeur pour jeter un œil

vue.js obtient dynamiquement les données de la base de données

(environnement construit via vue.cli et webpack)

1. va créer un fichier static data.json et créer un dossier json sous static (dans un environnement webpack, les fichiers statiques sont placés dans le répertoire statique)

{
  "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" }
  ]
}
Copier après la connexion

1. Vous devez utiliser vue-resource ici, et install dans notre projet :

nam install vue-ressource --save-dev
Copier après la connexion

2. dans 🎜>main.js références vie-resource

import VueResource from 'vue-resource';
Vue.use(VueResource)
Copier après la connexion
3. Le code est écrit sous le composant Home.vue :

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);
        })
      }
    }
  }
Copier après la connexion
De cette façon, vous pouvez utiliser vue.js pour obtenir les données json obtenues en arrière-plan.


Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal