(通过vue.cli和webpack搭建的环境)
1.首先我先在创建一个静态的data.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.在main.js中引用vie-resource
import VueResource from 'vue-resource'; Vue.use(VueResource)
3.代码写在 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); }) } } }
这样我们就可以用vue.js获取到从后台得到的数据json数据了。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持北冥有鱼。
您可能感兴趣的文章:
- 基于VUE选择上传图片并页面显示(图片可删除)
- vue.js 上传图片实例代码
- 基于vue+ bootstrap实现图片上传图片展示功能
- VUE axios上传图片到七牛的实例代码
- vuejs使用FormData实现ajax上传图片文件
- vue上传图片组件编写代码
- vue axios 表单提交上传图片的实例
- vue实现的上传图片到数据库并显示到页面功能示例