2021-05-23 Vue axios读取本地Json文件

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)}
				 //  )
			  // }
		  }
		})