Vue axios读取本地文件
引用vue,axios js 文件
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/axios.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vue-resource.min.js" type="text/javascript" charset="utf-8"></script>
声明 一个 vue
<div id="app">
<div v-for="(item,index) in jsondata">
<h2>{{index}}</h2>
<h1>{{item.title}}</h1>
<p>{{item.content }}</p>
</div>
</div>
var app = new Vue({
el: '#app',
data() {
return{
jsondata:[],
}
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//生命周期 - 创建完成(可以访问当前this实例)
created() {
axios.get('js/data.json').then(res=>{
this.jsondata = res.data
})
.catch(erroe=>{
alert("error");
})
},
//生命周期 - 挂载完成(可以访问DOM元素)
mounted() {},
methods:{
// getdata:function(){
// //this.$http.get('js/data.json')
// axios.get('js/data.json')
// .then(function(res){
// // console.log(res.data)
// this.data=res.data
// })
// .catch(err=>{console.log(err)}
// )
// }
}
})